From 98cd51213112299742738210c434e38e8bad5a68 Mon Sep 17 00:00:00 2001 From: fulcanellee <45999900+fulcanellee@users.noreply.github.com> Date: Thu, 26 Dec 2024 18:15:49 +0700 Subject: [PATCH] fix(plate): fix custom view border (#1479) * feat(plate): fix custom view border --- .changeset/thin-schools-worry.md | 5 +++ .../plate-custom-view-and-background-snap.png | 3 -- ...view-border-and-background-sprite-snap.png | 3 ++ .../plate/src/component.screenshots.test.tsx | 40 ++++++++++++------- .../src/components/base-plate/Component.tsx | 30 ++++++++++++-- .../components/base-plate/index.module.css | 4 ++ packages/plate/src/docs/Component.stories.tsx | 18 --------- 7 files changed, 64 insertions(+), 39 deletions(-) create mode 100644 .changeset/thin-schools-worry.md delete mode 100644 packages/plate/src/__image_snapshots__/plate-custom-view-and-background-snap.png create mode 100644 packages/plate/src/__image_snapshots__/plate-custom-view-border-and-background-sprite-snap.png diff --git a/.changeset/thin-schools-worry.md b/.changeset/thin-schools-worry.md new file mode 100644 index 0000000000..89bb54c7d2 --- /dev/null +++ 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 deleted file mode 100644 index e7d72ef07a..0000000000 --- a/packages/plate/src/__image_snapshots__/plate-custom-view-and-background-snap.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:1f24b43133baef5dd94281a405a860293a549251e7a24c06dd50288f17491e25 -size 13022 diff --git a/packages/plate/src/__image_snapshots__/plate-custom-view-border-and-background-sprite-snap.png b/packages/plate/src/__image_snapshots__/plate-custom-view-border-and-background-sprite-snap.png new file mode 100644 index 0000000000..d68d1b3446 --- /dev/null +++ b/packages/plate/src/__image_snapshots__/plate-custom-view-border-and-background-sprite-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c40e5c35a9bfe61811463db86266381222248790ca06650875427fcf05f3038b +size 53692 diff --git a/packages/plate/src/component.screenshots.test.tsx b/packages/plate/src/component.screenshots.test.tsx index cff403b7cc..dc43f3bdaf 100644 --- 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 index 79fb309707..7ee4255015 100644 --- 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( const rowLimitStyles = rowLimit && commonStyles[`rowLimit${rowLimit}`]; + const isCustomView = view === 'custom'; + const handleClick = useCallback( (event: React.MouseEvent | React.KeyboardEvent) => { const clickSimilarKeys = ['Enter', ' '].includes( @@ -268,6 +270,27 @@ export const BasePlate = forwardRef( [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
( [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 index 53e47f7b84..404d5781e5 100644 --- 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 index f91875964e..c26159ba2e 100644 --- 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, }} > - - -