feat(Drawer): add veil color to CSS API, shadow for DrawerItem

gravity-ui · Aug 1, 2024 · 7286233 · 7286233
1 parent b339aec
commit 7286233
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 4 deletions.
diff --git 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
@@ -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<HTMLDivElement, MouseEvent>) => void;
 
@@ -145,6 +148,7 @@ export interface DrawerProps {
 
 export const Drawer: React.FC<DrawerProps> = ({
     className,
+    veilClassName,
     children,
     style,
     onVeilClick,
@@ -193,7 +197,7 @@ export const Drawer: React.FC<DrawerProps> = ({
             {(state) => {
                 const childrenVisible = someItemVisible && state === 'entered';
                 return (
-                    <div ref={containerRef} className={b(null, className)} style={style}>
+                    <div ref={containerRef} className={b({hideVeil}, className)} style={style}>
                         <CSSTransition
                             in={childrenVisible}
                             timeout={TIMEOUT}
@@ -203,7 +207,7 @@ export const Drawer: React.FC<DrawerProps> = ({
                         >
                             <div
                                 ref={veilRef}
-                                className={b('veil', {hidden: hideVeil})}
+                                className={b('veil', {hidden: hideVeil}, veilClassName)}
                                 onClick={onVeilClick}
                             />
                         </CSSTransition>

diff --git 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/__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;
     }