Skip to content

Commit

Permalink
feat(Drawer): add veil color to CSS API, shadow for DrawerItem (#290)
Browse files Browse the repository at this point in the history 
* feat(Drawer): add veil color to CSS API, shadow for DrawerItem
  • Loading branch information
@StepanKirichenko
StepanKirichenko authored Aug 2, 2024
1 parent b339aec commit 0a8637b
Show file tree
Hide file tree
Showing 8 changed files with 29 additions and 12 deletions.
11 changes: 10 additions & 1 deletion src/components/Drawer/Drawer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,20 @@ $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);
--_--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: var(--gn-drawer-item-shadow, var(--_--item-shadow-default));
}

&__item {
position: absolute;
left: 0;
Expand All @@ -20,6 +28,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;
Expand Down Expand Up @@ -75,7 +84,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;
Expand Down
8 changes: 6 additions & 2 deletions src/components/Drawer/Drawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -145,6 +148,7 @@ export interface DrawerProps {

export const Drawer: React.FC<DrawerProps> = ({
className,
veilClassName,
children,
style,
onVeilClick,
Expand Down Expand Up @@ -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}
Expand All @@ -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>
Expand Down
21 changes: 13 additions & 8 deletions src/components/Drawer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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` | |
Expand All @@ -92,11 +93,15 @@ The Drawer module consists of two primary components: `Drawer` and `DrawerItem`.

## CSS API

| Name | Description | Default |
| :-------------------------------------------- | :---------------------------------------------------------- | :----------------------------: |
| 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 |
Binary file modified ....test.tsx-snapshots/DrawerStories-render-story-HideVeil-dark-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...al.test.tsx-snapshots/DrawerStories-render-story-HideVeil-dark-webkit-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...test.tsx-snapshots/DrawerStories-render-story-HideVeil-light-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...l.test.tsx-snapshots/DrawerStories-render-story-HideVeil-light-webkit-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion src/components/Drawer/__stories__/HideVeil.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down

0 comments on commit 0a8637b

Please sign in to comment.