diff --git a/src/components/Drawer/Drawer.scss b/src/components/Drawer/Drawer.scss index 92e4ef0..c1058c8 100644 --- a/src/components/Drawer/Drawer.scss +++ b/src/components/Drawer/Drawer.scss @@ -11,6 +11,12 @@ $block: '.#{variables.$ns}drawer'; --_--resizer-handle-color-hover: var(--g-color-line-generic-hover); --_--resizer-z-index: 100; + --_--veil-background-color: var(--g-color-sfx-veil); + + &_hideVeil { + --_--item-shadow: 0 1px 5px 0 var(--g-color-sfx-shadow); + } + &__item { position: absolute; left: 0; @@ -20,6 +26,7 @@ $block: '.#{variables.$ns}drawer'; will-change: transform; background-color: var(--g-color-base-background); pointer-events: initial; + box-shadow: var(--_--item-shadow, none); &_direction_right { left: auto; @@ -75,7 +82,7 @@ $block: '.#{variables.$ns}drawer'; position: absolute; pointer-events: initial; inset: 0; - background-color: var(--g-color-sfx-veil); + background-color: var(--gn-drawer-veil-background-color, var(--_--veil-background-color)); &_hidden { display: none; diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx index 9e74cf0..a35e65d 100644 --- a/src/components/Drawer/Drawer.tsx +++ b/src/components/Drawer/Drawer.tsx @@ -130,6 +130,9 @@ export interface DrawerProps { /** Optional inline styles to be applied to the drawer component. */ style?: React.CSSProperties; + /** Optional additional class names to style the background veil element. */ + veilClassName?: string; + /** Optional callback function that is called when the veil (overlay) is clicked. */ onVeilClick?: (event: React.MouseEvent) => void; @@ -145,6 +148,7 @@ export interface DrawerProps { export const Drawer: React.FC = ({ className, + veilClassName, children, style, onVeilClick, @@ -193,7 +197,7 @@ export const Drawer: React.FC = ({ {(state) => { const childrenVisible = someItemVisible && state === 'entered'; return ( -
+
= ({ >
diff --git a/src/components/Drawer/README.md b/src/components/Drawer/README.md index 9c19b45..90f1fb6 100644 --- a/src/components/Drawer/README.md +++ b/src/components/Drawer/README.md @@ -84,6 +84,7 @@ The Drawer module consists of two primary components: `Drawer` and `DrawerItem`. | children | Child components to be rendered within the drawer. | `'DrawerChild' 'DrawerChild[]'` | | | preventScrollBody | Optional flag to prevent the body from scrolling when the drawer is open. | `boolean` | `true` | | className | Optional additional class names to style the drawer component. | `string` | | +| veilClassName | Optional additional class names to style the veil (overlay) element. | `string` | | | style | Optional inline styles to be applied to the drawer component. | `React.CSSProperties` | | | onVeilClick | Optional callback function that is called when the veil (overlay) is clicked. | `(event: React.MouseEvent) => void` | | | onEscape | Optional callback function that is called when the escape key is pressed, if the drawer is open. | `() => void` | | @@ -94,6 +95,8 @@ The Drawer module consists of two primary components: `Drawer` and `DrawerItem`. | Name | Description | Default | | :-------------------------------------------- | :---------------------------------------------------------- | :----------------------------: | +| Veil | | | +| `--gn-drawer-veil-background-color` | The color of the veil element | `--g-color-sfx-veil` | | Resizer | | | | `--gn-drawer-item-resizer-width` | The width of the resizer element | 8px | | `--gn-drawer-item-resizer-color` | The color of the resizer element | `--g-color-base-generic` | diff --git a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-HideVeil-dark-chromium-linux.png b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-HideVeil-dark-chromium-linux.png index 8e1cd0c..1da64f8 100644 Binary files a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-HideVeil-dark-chromium-linux.png and b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-HideVeil-dark-chromium-linux.png differ diff --git a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-HideVeil-dark-webkit-linux.png b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-HideVeil-dark-webkit-linux.png index da99dda..b8e08c6 100644 Binary files a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-HideVeil-dark-webkit-linux.png and b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-HideVeil-dark-webkit-linux.png differ diff --git a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-HideVeil-light-chromium-linux.png b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-HideVeil-light-chromium-linux.png index 0ce14b1..f8b0d11 100644 Binary files a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-HideVeil-light-chromium-linux.png and b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-HideVeil-light-chromium-linux.png differ diff --git a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-HideVeil-light-webkit-linux.png b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-HideVeil-light-webkit-linux.png index b5b7860..88f5b0e 100644 Binary files a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-HideVeil-light-webkit-linux.png and b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-HideVeil-light-webkit-linux.png differ diff --git a/src/components/Drawer/__stories__/HideVeil.scss b/src/components/Drawer/__stories__/HideVeil.scss index b4095f4..723e6b6 100644 --- a/src/components/Drawer/__stories__/HideVeil.scss +++ b/src/components/Drawer/__stories__/HideVeil.scss @@ -34,7 +34,6 @@ &__item-content { box-sizing: border-box; padding: 8px 16px; - border-left: 1px solid var(--g-color-line-generic); height: 100%; overflow-y: scroll; }