From 835dfa154eedb7cea8b98e3c55ebe3bd24417124 Mon Sep 17 00:00:00 2001 From: vladoseeg Date: Fri, 29 Mar 2024 19:08:54 +0300 Subject: [PATCH 1/7] feat(Overlay): implement component --- src/components/Overlay/Overlay.scss | 45 ++++++ src/components/Overlay/Overlay.tsx | 30 ++++ src/components/Overlay/README.md | 32 ++++ .../Overlay/__stories__/Overlay.scss | 24 +++ .../Overlay/__stories__/Overlay.stories.tsx | 151 ++++++++++++++++++ src/components/Overlay/__stories__/utils.tsx | 91 +++++++++++ src/components/Overlay/index.ts | 1 + src/components/index.ts | 1 + 8 files changed, 375 insertions(+) create mode 100644 src/components/Overlay/Overlay.scss create mode 100644 src/components/Overlay/Overlay.tsx create mode 100644 src/components/Overlay/README.md create mode 100644 src/components/Overlay/__stories__/Overlay.scss create mode 100644 src/components/Overlay/__stories__/Overlay.stories.tsx create mode 100644 src/components/Overlay/__stories__/utils.tsx create mode 100644 src/components/Overlay/index.ts diff --git a/src/components/Overlay/Overlay.scss b/src/components/Overlay/Overlay.scss new file mode 100644 index 0000000000..b33abdbf61 --- /dev/null +++ b/src/components/Overlay/Overlay.scss @@ -0,0 +1,45 @@ +@use '../variables'; + +$block: '.#{variables.$ns}overlay'; + +#{$block} { + position: absolute; + inset: 0; + + display: flex; + visibility: hidden; + justify-content: center; + align-items: center; + + opacity: 0; + + transition: + visibility 0.1s linear, + opacity 0.1s linear; + + &_visible { + visibility: visible; + opacity: 1; + } + + &__background { + position: absolute; + inset: 0; + + opacity: 80%; + + &_view { + &_base { + background-color: var(--g-color-base-background); + } + + &_float { + background-color: var(--g-color-base-float); + } + } + } + + &__children { + z-index: 0; + } +} diff --git a/src/components/Overlay/Overlay.tsx b/src/components/Overlay/Overlay.tsx new file mode 100644 index 0000000000..2f17b17825 --- /dev/null +++ b/src/components/Overlay/Overlay.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +import {block} from '../utils/cn'; + +import './Overlay.scss'; + +const b = block('overlay'); + +export type OverlayBackground = 'base' | 'float'; + +export interface OverlayProps { + className?: string; + view?: OverlayBackground; + visible?: boolean; + children?: React.ReactNode; +} + +export function Overlay({ + className, + view = 'base', + visible: loading = false, + children, +}: OverlayProps) { + return ( +
+
+ {children &&
{children}
} +
+ ); +} diff --git a/src/components/Overlay/README.md b/src/components/Overlay/README.md new file mode 100644 index 0000000000..29694c7503 --- /dev/null +++ b/src/components/Overlay/README.md @@ -0,0 +1,32 @@ + + +# Loader + + + +```tsx +import {Overlay} from '@gravity-ui/uikit'; +``` + +The `Overlay` component renders an overlay over the parent element with relative position. +For example, it can be used to preserve the desired layout while loading data. + +### PropTypes + +| Name | Type | Required | Default | Description | +| :-------- | :----------------- | :------: | :------ | :---------------------------------- | +| className | `String` | | | CSS class name of the root element | +| visible | `Boolean` | | `false` | Overlay visibility state | +| view | `"base"` `"float"` | | `base` | Overlay background style | +| children | `React.ReactNode` | | | Content, usually a Loader component | + +### Basic usage + +```jsx +
+
Some content to hide under overlay
+ + + +
+``` diff --git a/src/components/Overlay/__stories__/Overlay.scss b/src/components/Overlay/__stories__/Overlay.scss new file mode 100644 index 0000000000..1298b33a34 --- /dev/null +++ b/src/components/Overlay/__stories__/Overlay.scss @@ -0,0 +1,24 @@ +@use '../../variables'; + +$block: '.#{variables.$ns}overlay-showcase'; + +#{$block} { + &__content { + position: relative; + + width: fit-content; + padding: var(--g-spacing-1); + } + + &__table table { + min-width: 763px; + } + + &__button { + margin-block-start: var(--g-spacing-1); + + & + & { + margin-inline-start: var(--g-spacing-1); + } + } +} diff --git a/src/components/Overlay/__stories__/Overlay.stories.tsx b/src/components/Overlay/__stories__/Overlay.stories.tsx new file mode 100644 index 0000000000..33c47c9d84 --- /dev/null +++ b/src/components/Overlay/__stories__/Overlay.stories.tsx @@ -0,0 +1,151 @@ +import React from 'react'; + +import {ArrowsRotateRight} from '@gravity-ui/icons'; +import type {Meta, StoryFn} from '@storybook/react'; + +import {Button} from '../../Button'; +import {Dialog as DialogComponent} from '../../Dialog'; +import {Icon} from '../../Icon'; +import {Loader} from '../../Loader'; +import {Table as TableComponent} from '../../Table'; +import {block} from '../../utils/cn'; +import {Overlay} from '../Overlay'; +import type {OverlayProps} from '../Overlay'; + +import {columns, data} from './utils'; +import type {DataItem} from './utils'; + +import './Overlay.scss'; + +const b = block('overlay-showcase'); + +export default { + title: 'Components/Overlays/Overlay', + component: Overlay, +} as Meta; + +const DefaultTemplate: StoryFn = (args) => { + return ( +
+
+
Example of overlay
+
with loader
+ + + +
+
+
Example of overlay
+
with text
+ Loading... +
+
+
Example of overlay
+
with icon
+ + + +
+
+
Example of overlay
+
without children
+ +
+
+ ); +}; +export const Default = DefaultTemplate.bind({}); + +Default.args = { + visible: true, +}; + +const BackgroundTemplate: StoryFn = (args) => { + return ( +
+
+
I am an example
+
content
+ +
+ +
+
I am an example
+
content
+ +
+
+ ); +}; + +export const Background = BackgroundTemplate.bind({}); + +Background.args = { + visible: true, +}; + +const DialogTemplate: StoryFn = (args) => { + const dialogTitleId = 'app-dialog-title'; + return ( + {}} + onEnterKeyDown={() => { + alert('onEnterKeyDown'); + }} + aria-labelledby={dialogTitleId} + > +
+ + Dialog.Body + alert('onApply')} + textButtonApply="Apply" + /> + + + +
+ + ); +}; + +export const Dialog = DialogTemplate.bind({}); + +Dialog.args = { + visible: true, +}; + +const TableTemplate: StoryFn = (args) => { + const [loading, setLoading] = React.useState(false); + const [loadedData, setData] = React.useState([]); + + return ( +
+
+ + + + +
+ + +
+ ); +}; + +export const Table = TableTemplate.bind({}); diff --git a/src/components/Overlay/__stories__/utils.tsx b/src/components/Overlay/__stories__/utils.tsx new file mode 100644 index 0000000000..9254f6342f --- /dev/null +++ b/src/components/Overlay/__stories__/utils.tsx @@ -0,0 +1,91 @@ +import React from 'react'; + +import type {TableColumnConfig} from '../../Table'; + +export interface DataItem { + name: string; + location?: {region: string; city?: string}; + phone: string; + count: number; + date: string; + disabled?: boolean; +} + +export const columns: TableColumnConfig[] = [ + { + id: 'name', + name: 'Name', + template(item, i) { + if (i % 2 === 0) { + return item.name; + } + const [name, surname] = item.name.split(' '); + return ( +
+ {name} +
+ {surname} +
+ ); + }, + }, + { + id: 'location.region', + name: 'Region', + }, + { + id: 'location.city', + name: 'City', + }, + { + id: 'phone', + name: 'Phone', + }, + { + id: 'count', + name: 'Count', + align: 'end', + }, + { + id: 'date', + name: 'Date created', + }, +]; + +export const data: DataItem[] = [ + { + name: 'Nomlanga Compton', + location: {region: 'Liguria', city: 'Erli'}, + phone: '+7 (923) 737-89-72', + count: 82, + date: '2019-03-15', + }, + { + name: 'Paul Hatfield', + location: {region: 'Trentino-Alto Adige/Südtirol', city: 'Campitello di Fassa'}, + phone: '+7 (900) 333-82-02', + count: 51, + date: '2019-11-23', + }, + { + name: 'Phelan Daniel', + location: {region: 'Piedmont', city: 'Meugliano'}, + phone: '+7 (925) 549-50-23', + count: 10, + date: '2019-05-14', + }, + { + name: 'Hiram Mayer', + phone: '+7 (950) 372-56-84', + location: {region: 'Calabria'}, + count: 54, + date: '2019-03-29', + }, + { + name: 'Madeline Puckett', + phone: '+7 (908) 582-05-91', + count: 75, + date: '2019-02-01', + disabled: true, + }, +]; diff --git a/src/components/Overlay/index.ts b/src/components/Overlay/index.ts new file mode 100644 index 0000000000..6dbcd51b81 --- /dev/null +++ b/src/components/Overlay/index.ts @@ -0,0 +1 @@ +export * from './Overlay'; diff --git a/src/components/index.ts b/src/components/index.ts index 56fbfb39e4..f6c5da76da 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -23,6 +23,7 @@ export * from './Label'; export * from './Link'; export * from './List'; export * from './Loader'; +export * from './Overlay'; export * from './Menu'; export * from './Modal'; export * from './Pagination'; From 5d58c8e29bf2d25b5edb59621976925b67f1b33e Mon Sep 17 00:00:00 2001 From: vladoseeg Date: Thu, 18 Apr 2024 18:47:36 +0300 Subject: [PATCH 2/7] feat(Overlay): adjust storybook examples --- .../Overlay/__stories__/Overlay.scss | 7 ++++++ .../Overlay/__stories__/Overlay.stories.tsx | 25 ++++++++++++------- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src/components/Overlay/__stories__/Overlay.scss b/src/components/Overlay/__stories__/Overlay.scss index 1298b33a34..046f42cecd 100644 --- a/src/components/Overlay/__stories__/Overlay.scss +++ b/src/components/Overlay/__stories__/Overlay.scss @@ -10,6 +10,13 @@ $block: '.#{variables.$ns}overlay-showcase'; padding: var(--g-spacing-1); } + &__dialog-content { + position: relative; + + width: 480px; + height: 212px; + } + &__table table { min-width: 763px; } diff --git a/src/components/Overlay/__stories__/Overlay.stories.tsx b/src/components/Overlay/__stories__/Overlay.stories.tsx index 33c47c9d84..f843eee87a 100644 --- a/src/components/Overlay/__stories__/Overlay.stories.tsx +++ b/src/components/Overlay/__stories__/Overlay.stories.tsx @@ -8,6 +8,7 @@ import {Dialog as DialogComponent} from '../../Dialog'; import {Icon} from '../../Icon'; import {Loader} from '../../Loader'; import {Table as TableComponent} from '../../Table'; +import {Box, Flex} from '../../layout'; import {block} from '../../utils/cn'; import {Overlay} from '../Overlay'; import type {OverlayProps} from '../Overlay'; @@ -31,7 +32,7 @@ const DefaultTemplate: StoryFn = (args) => {
Example of overlay
with loader
- +
@@ -95,17 +96,23 @@ const DialogTemplate: StoryFn = (args) => { }} aria-labelledby={dialogTitleId} > -
- - Dialog.Body - alert('onApply')} - textButtonApply="Apply" - /> + +
+ Some text to show in dialog body - + + + + Loading text about process with long description to show +
max content-width + +
+ alert('onApply')} + textButtonApply="Apply" + /> ); }; From 2b27ed0054bee23561f3e895e44fd0b25506a5cf Mon Sep 17 00:00:00 2001 From: vladoseeg Date: Wed, 22 May 2024 13:53:08 +0300 Subject: [PATCH 3/7] feat(Box): add 'position' property --- src/components/layout/Box/Box.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/layout/Box/Box.tsx b/src/components/layout/Box/Box.tsx index 3e0d828494..2beafe2410 100644 --- a/src/components/layout/Box/Box.tsx +++ b/src/components/layout/Box/Box.tsx @@ -15,7 +15,13 @@ export interface BoxProps React.PropsWithChildren< Pick< React.CSSProperties, - 'width' | 'height' | 'maxHeight' | 'maxWidth' | 'minHeight' | 'minWidth' + | 'width' + | 'height' + | 'maxHeight' + | 'maxWidth' + | 'minHeight' + | 'minWidth' + | 'position' > > { as?: T; @@ -63,6 +69,7 @@ export const Box = React.forwardRef(function Box Date: Wed, 22 May 2024 13:54:35 +0300 Subject: [PATCH 4/7] fix(Overlay): documentation and codestyle updates --- src/components/Overlay/Overlay.scss | 6 +- src/components/Overlay/Overlay.tsx | 13 +- src/components/Overlay/README.md | 44 +++-- src/components/Overlay/__stories__/Docs.mdx | 7 + .../Overlay/__stories__/Overlay.stories.tsx | 158 ----------------- .../{Overlay.scss => OverlayShowcase.scss} | 9 - .../__stories__/OverlayShowcase.stories.tsx | 166 ++++++++++++++++++ .../__stories__/{utils.tsx => data.tsx} | 0 8 files changed, 209 insertions(+), 194 deletions(-) create mode 100644 src/components/Overlay/__stories__/Docs.mdx delete mode 100644 src/components/Overlay/__stories__/Overlay.stories.tsx rename src/components/Overlay/__stories__/{Overlay.scss => OverlayShowcase.scss} (73%) create mode 100644 src/components/Overlay/__stories__/OverlayShowcase.stories.tsx rename src/components/Overlay/__stories__/{utils.tsx => data.tsx} (100%) diff --git a/src/components/Overlay/Overlay.scss b/src/components/Overlay/Overlay.scss index b33abdbf61..b2d0b630d4 100644 --- a/src/components/Overlay/Overlay.scss +++ b/src/components/Overlay/Overlay.scss @@ -14,7 +14,7 @@ $block: '.#{variables.$ns}overlay'; opacity: 0; transition: - visibility 0.1s linear, + visibility 0.1s, opacity 0.1s linear; &_visible { @@ -26,9 +26,9 @@ $block: '.#{variables.$ns}overlay'; position: absolute; inset: 0; - opacity: 80%; + opacity: 0.8; - &_view { + &_style { &_base { background-color: var(--g-color-base-background); } diff --git a/src/components/Overlay/Overlay.tsx b/src/components/Overlay/Overlay.tsx index 2f17b17825..89ea9fa25b 100644 --- a/src/components/Overlay/Overlay.tsx +++ b/src/components/Overlay/Overlay.tsx @@ -10,20 +10,15 @@ export type OverlayBackground = 'base' | 'float'; export interface OverlayProps { className?: string; - view?: OverlayBackground; + background?: OverlayBackground; visible?: boolean; children?: React.ReactNode; } -export function Overlay({ - className, - view = 'base', - visible: loading = false, - children, -}: OverlayProps) { +export function Overlay({className, background = 'base', visible = false, children}: OverlayProps) { return ( -
-
+
+
{children &&
{children}
}
); diff --git a/src/components/Overlay/README.md b/src/components/Overlay/README.md index 29694c7503..709bce37f7 100644 --- a/src/components/Overlay/README.md +++ b/src/components/Overlay/README.md @@ -1,6 +1,6 @@ -# Loader +# Overlay @@ -8,25 +8,39 @@ import {Overlay} from '@gravity-ui/uikit'; ``` -The `Overlay` component renders an overlay over the parent element with relative position. +The `Overlay` component renders an overlay over the parent element with relative position, +i.e. parent element must have `position` set to `relative`. For example, it can be used to preserve the desired layout while loading data. -### PropTypes - -| Name | Type | Required | Default | Description | -| :-------- | :----------------- | :------: | :------ | :---------------------------------- | -| className | `String` | | | CSS class name of the root element | -| visible | `Boolean` | | `false` | Overlay visibility state | -| view | `"base"` `"float"` | | `base` | Overlay background style | -| children | `React.ReactNode` | | | Content, usually a Loader component | - -### Basic usage - ```jsx -
+
Some content to hide under overlay
-
+ ``` + +## Appearance + +### Background + +You can use `base` or `float` background colors. + + + +```tsx + + +``` + + + +## Properties + +| Name | Type | Required | Default | Description | +| :--------- | :----------------- | :------: | :------ | :---------------------------------- | +| className | `String` | | | CSS class name of the root element | +| visible | `Boolean` | | `false` | Overlay visibility state | +| background | `"base"` `"float"` | | `base` | Overlay background style | +| children | `React.ReactNode` | | | Content, usually a Loader component | diff --git a/src/components/Overlay/__stories__/Docs.mdx b/src/components/Overlay/__stories__/Docs.mdx new file mode 100644 index 0000000000..85dfb38f27 --- /dev/null +++ b/src/components/Overlay/__stories__/Docs.mdx @@ -0,0 +1,7 @@ +import {Meta, Markdown} from '@storybook/addon-docs'; +import * as Stories from './OverlayShowcase.stories'; +import Readme from '../README.md?raw'; + + + +{Readme} diff --git a/src/components/Overlay/__stories__/Overlay.stories.tsx b/src/components/Overlay/__stories__/Overlay.stories.tsx deleted file mode 100644 index f843eee87a..0000000000 --- a/src/components/Overlay/__stories__/Overlay.stories.tsx +++ /dev/null @@ -1,158 +0,0 @@ -import React from 'react'; - -import {ArrowsRotateRight} from '@gravity-ui/icons'; -import type {Meta, StoryFn} from '@storybook/react'; - -import {Button} from '../../Button'; -import {Dialog as DialogComponent} from '../../Dialog'; -import {Icon} from '../../Icon'; -import {Loader} from '../../Loader'; -import {Table as TableComponent} from '../../Table'; -import {Box, Flex} from '../../layout'; -import {block} from '../../utils/cn'; -import {Overlay} from '../Overlay'; -import type {OverlayProps} from '../Overlay'; - -import {columns, data} from './utils'; -import type {DataItem} from './utils'; - -import './Overlay.scss'; - -const b = block('overlay-showcase'); - -export default { - title: 'Components/Overlays/Overlay', - component: Overlay, -} as Meta; - -const DefaultTemplate: StoryFn = (args) => { - return ( -
-
-
Example of overlay
-
with loader
- - - -
-
-
Example of overlay
-
with text
- Loading... -
-
-
Example of overlay
-
with icon
- - - -
-
-
Example of overlay
-
without children
- -
-
- ); -}; -export const Default = DefaultTemplate.bind({}); - -Default.args = { - visible: true, -}; - -const BackgroundTemplate: StoryFn = (args) => { - return ( -
-
-
I am an example
-
content
- -
- -
-
I am an example
-
content
- -
-
- ); -}; - -export const Background = BackgroundTemplate.bind({}); - -Background.args = { - visible: true, -}; - -const DialogTemplate: StoryFn = (args) => { - const dialogTitleId = 'app-dialog-title'; - return ( - {}} - onEnterKeyDown={() => { - alert('onEnterKeyDown'); - }} - aria-labelledby={dialogTitleId} - > - -
- Some text to show in dialog body - - - - - Loading text about process with long description to show -
max content-width - - - -
- alert('onApply')} - textButtonApply="Apply" - /> - - ); -}; - -export const Dialog = DialogTemplate.bind({}); - -Dialog.args = { - visible: true, -}; - -const TableTemplate: StoryFn = (args) => { - const [loading, setLoading] = React.useState(false); - const [loadedData, setData] = React.useState([]); - - return ( -
-
- - - - -
- - -
- ); -}; - -export const Table = TableTemplate.bind({}); diff --git a/src/components/Overlay/__stories__/Overlay.scss b/src/components/Overlay/__stories__/OverlayShowcase.scss similarity index 73% rename from src/components/Overlay/__stories__/Overlay.scss rename to src/components/Overlay/__stories__/OverlayShowcase.scss index 046f42cecd..ea07797b7f 100644 --- a/src/components/Overlay/__stories__/Overlay.scss +++ b/src/components/Overlay/__stories__/OverlayShowcase.scss @@ -4,19 +4,10 @@ $block: '.#{variables.$ns}overlay-showcase'; #{$block} { &__content { - position: relative; - width: fit-content; padding: var(--g-spacing-1); } - &__dialog-content { - position: relative; - - width: 480px; - height: 212px; - } - &__table table { min-width: 763px; } diff --git a/src/components/Overlay/__stories__/OverlayShowcase.stories.tsx b/src/components/Overlay/__stories__/OverlayShowcase.stories.tsx new file mode 100644 index 0000000000..be00fd433f --- /dev/null +++ b/src/components/Overlay/__stories__/OverlayShowcase.stories.tsx @@ -0,0 +1,166 @@ +import React from 'react'; + +import {ArrowsRotateRight} from '@gravity-ui/icons'; +import type {Meta, StoryObj} from '@storybook/react'; + +import {Button} from '../../Button'; +import {Dialog as DialogComponent} from '../../Dialog'; +import {Icon} from '../../Icon'; +import {Loader} from '../../Loader'; +import {Table as TableComponent} from '../../Table'; +import {Box, Flex} from '../../layout'; +import {block} from '../../utils/cn'; +import {Overlay} from '../Overlay'; +import type {OverlayProps} from '../Overlay'; + +import {columns, data} from './data'; +import type {DataItem} from './data'; + +import './OverlayShowcase.scss'; + +const b = block('overlay-showcase'); + +type Story = StoryObj; + +export default { + title: 'Components/Utils/Overlay', + component: Overlay, +} as Meta; + +export const Default: Story = { + args: { + visible: true, + }, + render: (args) => { + return ( +
+ +
Example of overlay
+
with loader
+ + + + + +
Example of overlay
+
with text
+ Loading... + + +
Example of overlay
+
with icon
+ + + + + +
Example of overlay
+
without children
+ + +
+ ); + }, +}; + +export const Background: Story = { + args: { + visible: true, + }, + render: (args) => { + return ( +
+ +
I am an example
+
content
+ + + + +
I am an example
+
content
+ + +
+ ); + }, +}; + +export const DialogTemplate: Story = { + args: { + visible: true, + }, + render: (args) => { + const dialogTitleId = 'app-dialog-title'; + return ( + {}} + onEnterKeyDown={() => { + alert('onEnterKeyDown'); + }} + aria-labelledby={dialogTitleId} + > + + + + + Some text to show in dialog body + + + + + + + Loading text about process with long description to show +
max content-width + + + + + + alert('onApply')} + textButtonApply="Apply" + /> + + ); + }, +}; + +const TableShowcase = (args: OverlayProps) => { + const [loading, setLoading] = React.useState(false); + const [loadedData, setData] = React.useState([]); + + return ( +
+ + + + + + + + +
+ ); +}; + +export const Table: Story = { + args: {}, + render: TableShowcase, +}; diff --git a/src/components/Overlay/__stories__/utils.tsx b/src/components/Overlay/__stories__/data.tsx similarity index 100% rename from src/components/Overlay/__stories__/utils.tsx rename to src/components/Overlay/__stories__/data.tsx From 5c3db0e5aad5bedae86e9c07158ee1c0f6a910e7 Mon Sep 17 00:00:00 2001 From: vladoseeg Date: Thu, 13 Jun 2024 19:00:54 +0300 Subject: [PATCH 5/7] fix(Overlay.stories): codestyle/docs fixes + remove unnecessary story --- src/components/Overlay/README.md | 12 +-- src/components/Overlay/__stories__/Docs.mdx | 2 +- ...rlayShowcase.scss => Overlay.stories.scss} | 2 +- ...owcase.stories.tsx => Overlay.stories.tsx} | 86 ++++++------------- 4 files changed, 32 insertions(+), 70 deletions(-) rename src/components/Overlay/__stories__/{OverlayShowcase.scss => Overlay.stories.scss} (88%) rename src/components/Overlay/__stories__/{OverlayShowcase.stories.tsx => Overlay.stories.tsx} (55%) diff --git a/src/components/Overlay/README.md b/src/components/Overlay/README.md index 709bce37f7..b913e64948 100644 --- a/src/components/Overlay/README.md +++ b/src/components/Overlay/README.md @@ -38,9 +38,9 @@ You can use `base` or `float` background colors. ## Properties -| Name | Type | Required | Default | Description | -| :--------- | :----------------- | :------: | :------ | :---------------------------------- | -| className | `String` | | | CSS class name of the root element | -| visible | `Boolean` | | `false` | Overlay visibility state | -| background | `"base"` `"float"` | | `base` | Overlay background style | -| children | `React.ReactNode` | | | Content, usually a Loader component | +| Name | Description | Type | Default | +| :--------- | :---------------------------------- | :----------------: | :-----: | +| className | CSS class name of the root element | `String` | | +| visible | Overlay visibility state | `Boolean` | `false` | +| background | Overlay background style | `"base"` `"float"` | `base` | +| children | Content, usually a Loader component | `React.ReactNode` | | diff --git a/src/components/Overlay/__stories__/Docs.mdx b/src/components/Overlay/__stories__/Docs.mdx index 85dfb38f27..a099505e89 100644 --- a/src/components/Overlay/__stories__/Docs.mdx +++ b/src/components/Overlay/__stories__/Docs.mdx @@ -1,5 +1,5 @@ import {Meta, Markdown} from '@storybook/addon-docs'; -import * as Stories from './OverlayShowcase.stories'; +import * as Stories from './Overlay.stories'; import Readme from '../README.md?raw'; diff --git a/src/components/Overlay/__stories__/OverlayShowcase.scss b/src/components/Overlay/__stories__/Overlay.stories.scss similarity index 88% rename from src/components/Overlay/__stories__/OverlayShowcase.scss rename to src/components/Overlay/__stories__/Overlay.stories.scss index ea07797b7f..93faf42c44 100644 --- a/src/components/Overlay/__stories__/OverlayShowcase.scss +++ b/src/components/Overlay/__stories__/Overlay.stories.scss @@ -1,6 +1,6 @@ @use '../../variables'; -$block: '.#{variables.$ns}overlay-showcase'; +$block: '.#{variables.$ns}overlay-stories'; #{$block} { &__content { diff --git a/src/components/Overlay/__stories__/OverlayShowcase.stories.tsx b/src/components/Overlay/__stories__/Overlay.stories.tsx similarity index 55% rename from src/components/Overlay/__stories__/OverlayShowcase.stories.tsx rename to src/components/Overlay/__stories__/Overlay.stories.tsx index be00fd433f..edfefbe88d 100644 --- a/src/components/Overlay/__stories__/OverlayShowcase.stories.tsx +++ b/src/components/Overlay/__stories__/Overlay.stories.tsx @@ -3,12 +3,13 @@ import React from 'react'; import {ArrowsRotateRight} from '@gravity-ui/icons'; import type {Meta, StoryObj} from '@storybook/react'; +import {Showcase} from '../../../demo/Showcase'; +import {ShowcaseItem} from '../../../demo/ShowcaseItem'; import {Button} from '../../Button'; -import {Dialog as DialogComponent} from '../../Dialog'; import {Icon} from '../../Icon'; import {Loader} from '../../Loader'; import {Table as TableComponent} from '../../Table'; -import {Box, Flex} from '../../layout'; +import {Box} from '../../layout'; import {block} from '../../utils/cn'; import {Overlay} from '../Overlay'; import type {OverlayProps} from '../Overlay'; @@ -16,9 +17,9 @@ import type {OverlayProps} from '../Overlay'; import {columns, data} from './data'; import type {DataItem} from './data'; -import './OverlayShowcase.scss'; +import './Overlay.stories.scss'; -const b = block('overlay-showcase'); +const b = block('overlay-stories'); type Story = StoryObj; @@ -33,7 +34,7 @@ export const Default: Story = { }, render: (args) => { return ( -
+
Example of overlay
with loader
@@ -58,7 +59,7 @@ export const Default: Story = {
without children
 -
+ ); }, }; @@ -69,66 +70,27 @@ export const Background: Story = { }, render: (args) => { return ( -
- -
I am an example
-
content
- - - - -
I am an example
-
content
- - -
- ); - }, -}; - -export const DialogTemplate: Story = { - args: { - visible: true, - }, - render: (args) => { - const dialogTitleId = 'app-dialog-title'; - return ( - {}} - onEnterKeyDown={() => { - alert('onEnterKeyDown'); - }} - aria-labelledby={dialogTitleId} - > - - - - - Some text to show in dialog body - - - - - - - Loading text about process with long description to show -
max content-width - - - + + + +
I am an example
+
content
+ + + + + +
I am an example
+
content
+ - - alert('onApply')} - textButtonApply="Apply" - /> - + + ); }, }; -const TableShowcase = (args: OverlayProps) => { +const TableView = (args: OverlayProps) => { const [loading, setLoading] = React.useState(false); const [loadedData, setData] = React.useState([]); @@ -162,5 +124,5 @@ const TableShowcase = (args: OverlayProps) => { export const Table: Story = { args: {}, - render: TableShowcase, + render: TableView, }; From 49eba675ed2a0ffe7614a78fe51a69e182171bea Mon Sep 17 00:00:00 2001 From: vladoseeg Date: Mon, 24 Jun 2024 12:42:38 +0300 Subject: [PATCH 6/7] chore(Overlay): fixes in README --- src/components/Overlay/README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Overlay/README.md b/src/components/Overlay/README.md index b913e64948..b45a32f03c 100644 --- a/src/components/Overlay/README.md +++ b/src/components/Overlay/README.md @@ -13,12 +13,14 @@ i.e. parent element must have `position` set to `relative`. For example, it can be used to preserve the desired layout while loading data. ```jsx +import {Box, Overlay, Loader} from '@gravity-ui/uikit'; +
Some content to hide under overlay
- +; ``` ## Appearance @@ -40,7 +42,7 @@ You can use `base` or `float` background colors. | Name | Description | Type | Default | | :--------- | :---------------------------------- | :----------------: | :-----: | -| className | CSS class name of the root element | `String` | | -| visible | Overlay visibility state | `Boolean` | `false` | +| className | CSS class name of the root element | `string` | | +| visible | Overlay visibility state | `boolean` | `false` | | background | Overlay background style | `"base"` `"float"` | `base` | | children | Content, usually a Loader component | `React.ReactNode` | | From 336ec67cebdf7319a62e2aa0c138310e67ea3e39 Mon Sep 17 00:00:00 2001 From: vladoseeg Date: Mon, 24 Jun 2024 15:40:33 +0300 Subject: [PATCH 7/7] fix(Overlay): export order and stacking context --- src/components/Overlay/Overlay.scss | 6 +++++- src/components/index.ts | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/Overlay/Overlay.scss b/src/components/Overlay/Overlay.scss index b2d0b630d4..1898262208 100644 --- a/src/components/Overlay/Overlay.scss +++ b/src/components/Overlay/Overlay.scss @@ -11,6 +11,8 @@ $block: '.#{variables.$ns}overlay'; justify-content: center; align-items: center; + isolation: isolate; + opacity: 0; transition: @@ -19,11 +21,13 @@ $block: '.#{variables.$ns}overlay'; &_visible { visibility: visible; + opacity: 1; } &__background { position: absolute; + z-index: 0; inset: 0; opacity: 0.8; @@ -40,6 +44,6 @@ $block: '.#{variables.$ns}overlay'; } &__children { - z-index: 0; + z-index: 1; } } diff --git a/src/components/index.ts b/src/components/index.ts index f6c5da76da..1f00c0fa38 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -23,9 +23,9 @@ export * from './Label'; export * from './Link'; export * from './List'; export * from './Loader'; -export * from './Overlay'; export * from './Menu'; export * from './Modal'; +export * from './Overlay'; export * from './Pagination'; export * from './Palette'; export * from './UserLabel';