fix: add item shadow to CSS API

gravity-ui · Aug 2, 2024 · 8698e66 · 8698e66
1 parent 24f293e
commit 8698e66
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/src/components/Drawer/Drawer.scss b/src/components/Drawer/Drawer.scss
@@ -5,6 +5,8 @@ $block: '.#{variables.$ns}drawer';
 #{$block} {
     pointer-events: none;
 
+    --_--item-shadow-default: 0 1px 5px 0 var(--g-color-sfx-shadow);
+
     --_--resizer-width: 8px;
     --_--resizer-color: var(--g-color-base-generic);
     --_--resizer-handle-color: var(--g-color-line-generic);
@@ -14,7 +16,7 @@ $block: '.#{variables.$ns}drawer';
     --_--veil-background-color: var(--g-color-sfx-veil);
 
     &_hideVeil {
-        --_--item-shadow: 0 1px 5px 0 var(--g-color-sfx-shadow);
+        --_--item-shadow: var(--gn-drawer-item-shadow, var(--_--item-shadow-default));
     }
 
     &__item {

diff --git a/src/components/Drawer/README.md b/src/components/Drawer/README.md
@@ -93,13 +93,15 @@ The Drawer module consists of two primary components: `Drawer` and `DrawerItem`.
 
 ## CSS API
 
-| 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`    |
-| `--gn-drawer-item-resizer-handle-color`       | The color of the resizer handle                             |    `--g-color-line-generic`    |
-| `--gn-drawer-item-resizer-handle-color-hover` | The color of the resizer handle when the resizer is hovered | `--g-color-line-generic-hover` |
-| `--gn-drawer-item-resizer-z-index`            | z-index of the resizer element                              |              100               |
+| Name                                          | Description                                                 |                 Default                 |
+| :-------------------------------------------- | :---------------------------------------------------------- | :-------------------------------------: |
+| DrawerItem                                    |                                                             |                                         |
+| `--gn-drawer-item-shadow`                     | The box-shadow of the drawer item when veil is hidden       | `0 1px 5px 0 var(--g-color-sfx-shadow)` |
+| 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`         |
+| `--gn-drawer-item-resizer-handle-color`       | The color of the resizer handle                             |        `--g-color-line-generic`         |
+| `--gn-drawer-item-resizer-handle-color-hover` | The color of the resizer handle when the resizer is hovered |     `--g-color-line-generic-hover`      |
+| `--gn-drawer-item-resizer-z-index`            | z-index of the resizer element                              |                   100                   |