fix(plate): fix custom view border (#1479)

* feat(plate): fix custom view border
core-ds · Dec 26, 2024 · 98cd512 · 98cd512
1 parent 138ae13
commit 98cd512
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 39 deletions.
diff --git a/.changeset/thin-schools-worry.md b/.changeset/thin-schools-worry.md
@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-plate': patch
+---
+
+Исправлена установка цвета `border` для элемента `view=custom shape=rect`
diff --git a/packages/plate/src/__image_snapshots__/plate-custom-view-and-background-snap.png b/packages/plate/src/__image_snapshots__/plate-custom-view-and-background-snap.png
diff --git a/...src/__image_snapshots__/plate-custom-view-border-and-background-sprite-snap.png b/...src/__image_snapshots__/plate-custom-view-border-and-background-sprite-snap.png
diff --git a/packages/plate/src/component.screenshots.test.tsx b/packages/plate/src/component.screenshots.test.tsx
@@ -181,20 +181,32 @@ describe(
 );
 
 describe(
-    'Plate | custom view and background',
+    'Plate | custom view, border and background',
     screenshotTesting({
-        cases: generateTestCases({
-            componentName: 'Plate',
-            testStory: false,
-            knobs: {
-                view: 'custom',
-                title: 'Поздравляем, полный успех',
-                children: 'Вам одобрено. Согласитесь на предложение',
-                background: 'var(--color-light-decorative-muted-indigo)',
-                borderColor: 'var(--color-light-decorative-indigo)',
-            },
-            wrapperStyles: 'width:500px',
-        }),
-        viewport: { width: 1024, height: 160 },
+        cases: [
+            [
+                'sprite',
+                createSpriteStorybookUrl({
+                    componentName: 'Plate',
+                    knobs: {
+                        view: 'custom',
+                        title: 'Поздравляем, полный успех',
+                        children: 'Вам одобрено. Согласитесь на предложение',
+                        background: 'var(--color-light-decorative-muted-indigo)',
+                        borderColor: 'var(--color-light-decorative-indigo)',
+                        border: [true, false],
+                        rounded: [true, false],
+                    },
+                    size: { width: 400, height: 140 },
+                }),
+            ],
+        ],
+        screenshotOpts: {
+            fullPage: true,
+        },
+        viewport: {
+            width: 1024,
+            height: 140,
+        },
     }),
 );
diff --git a/packages/plate/src/components/base-plate/Component.tsx b/packages/plate/src/components/base-plate/Component.tsx
@@ -217,6 +217,8 @@ export const BasePlate = forwardRef<HTMLDivElement, BasePlateProps>(
 
         const rowLimitStyles = rowLimit && commonStyles[`rowLimit${rowLimit}`];
 
+        const isCustomView = view === 'custom';
+
         const handleClick = useCallback(
             (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {
                 const clickSimilarKeys = ['Enter', ' '].includes(
@@ -268,6 +270,27 @@ export const BasePlate = forwardRef<HTMLDivElement, BasePlateProps>(
             [onClose],
         );
 
+        const setCustomViewColors = (): { background: string; borderColor: string } | object => {
+            if (isCustomView) {
+                return {
+                    background,
+                    borderColor,
+                };
+            }
+
+            return {};
+        };
+
+        const setCustomViewRectangleBorderColor = (): { boxShadow: string } | object => {
+            if (isCustomView && border && !rounded && borderColor) {
+                return {
+                    boxShadow: `2px 0 0 0 ${borderColor} inset`,
+                };
+            }
+
+            return {};
+        };
+
         return (
             // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
             <div
@@ -279,20 +302,19 @@ export const BasePlate = forwardRef<HTMLDivElement, BasePlateProps>(
                         [commonStyles.focused]: focused,
                         [commonStyles.isHidden]: hasCloser && isHidden,
                         [commonStyles.isFolded]: foldable && folded,
-
                         [commonStyles.rounded]: rounded,
                         [styles.rounded]: rounded,
-
                         [commonStyles.rect]: !rounded,
                         [commonStyles.noBorder]: !border,
-
                         [commonStyles.shadow]: shadow,
                         [styles.shadow]: shadow,
+                        [commonStyles.customBorder]: border && !rounded && isCustomView,
                     },
                     className,
                 )}
                 style={{
-                    ...(view === 'custom' && { background, borderColor }),
+                    ...setCustomViewColors(),
+                    ...setCustomViewRectangleBorderColor(),
                 }}
                 onClick={handleClick}
                 onKeyDown={handleClick}

diff --git a/packages/plate/src/components/base-plate/index.module.css b/packages/plate/src/components/base-plate/index.module.css
@@ -19,6 +19,10 @@
         top: var(--gap-0);
         left: var(--gap-0);
     }
+
+    &.customBorder:before {
+        all: unset;
+    }
 }
 
 .foldable {

diff --git a/packages/plate/src/docs/Component.stories.tsx b/packages/plate/src/docs/Component.stories.tsx
@@ -49,12 +49,6 @@ export const plate: Story = {
                     ...previewStyles,
                 }}
             >
-                <style>
-                    {`.custom {
-                        background: rgba(207, 112, 255, 0.1);
-                        box-shadow: 0 0 0 1px rgba(207, 112, 255, 1);
-                    `}
-                </style>
                 <Plate
                     className={view === 'custom' ? 'custom' : undefined}
                     view={view}
@@ -123,12 +117,6 @@ export const plate_mobile: Story = {
                     ...previewStyles,
                 }}
             >
-                <style>
-                    {`.custom {
-                        background: rgba(207, 112, 255, 0.1);
-                        box-shadow: 0 0 0 1px rgba(207, 112, 255, 1);
-                    `}
-                </style>
                 <PlateMobile
                     className={view === 'custom' ? 'custom' : undefined}
                     view={view}
@@ -196,12 +184,6 @@ export const plate_desktop: Story = {
                     ...previewStyles,
                 }}
             >
-                <style>
-                    {`.custom {
-                        background: rgba(207, 112, 255, 0.1);
-                        box-shadow: 0 0 0 1px rgba(207, 112, 255, 1);
-                    `}
-                </style>
                 <PlateDesktop
                     className={view === 'custom' ? 'custom' : undefined}
                     view={view}