fix(Overlay): documentation and codestyle updates

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);
             }

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 (
-        <div className={b({visible: loading}, className)}>
-            <div className={b('background', {view})} />
+        <div className={b({visible}, className)}>
+            <div className={b('background', {style: background})} />
             {children && <div className={b('children')}>{children}</div>}
         </div>
     );

src/components/Overlay/README.md

@@ -1,32 +1,46 @@
 <!--GITHUB_BLOCK-->
 
-# Loader
+# Overlay
 
 <!--/GITHUB_BLOCK-->
 
 ```tsx
 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
-<div style={{position: 'relative'}}>
+<Box position="relative">
   <div>Some content to hide under overlay</div>
   <Overlay visible={loading}>
     <Loader />
   </Overlay>
-</div>
+</Box>
 ```
+
+## Appearance
+
+### Background
+
+You can use `base` or `float` background colors.
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+<Overlay background="base">
+<Overlay background="float">
+```
+
+<!--/GITHUB_BLOCK-->
+
+## 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 |

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';
+
+<Meta of={Stories} />
+
+<Markdown>{Readme}</Markdown>

src/components/Overlay/__stories__/Overlay.scss → 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;
     }