From 7f4adcaf74d0d4a1b68af6a672b85c65a10a9194 Mon Sep 17 00:00:00 2001 From: vladoseeg Date: Wed, 22 May 2024 13:54:35 +0300 Subject: [PATCH] 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