fix: better styles for size:'s'

gravity-ui · Mar 11, 2024 · a2cb9d9 · a2cb9d9
1 parent 9f80c88
commit a2cb9d9
Show file tree

Hide file tree

Showing 14 changed files with 88 additions and 5 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -5,13 +5,16 @@ import '@gravity-ui/uikit/styles/styles.scss';
 
 import {ThemeProvider, MobileProvider, configure as uikitConfigure} from '@gravity-ui/uikit';
 import {configure} from '../src/configure';
+import {SizeProvider} from '../src/stories/SizeContext';
 
 export const withContextProvider: Decorator = (StoryItem, context) => {
     return (
         <React.StrictMode>
             <ThemeProvider theme={context.globals.theme}>
                 <MobileProvider>
-                    <StoryItem {...context} />
+                    <SizeProvider value={context.globals.size}>
+                        <StoryItem {...context} />
+                    </SizeProvider>
                 </MobileProvider>
             </ThemeProvider>
         </React.StrictMode>
@@ -62,6 +65,18 @@ const preview: Preview = {
                 ],
             },
         },
+        size: {
+            name: 'Size',
+            defaultValue: 'm',
+            toolbar: {
+                icon: 'apple',
+                items: [
+                    {title: 's', value: 's'},
+                    {title: 'm', value: 'm'},
+                    {title: 'l', value: 'l'},
+                ],
+            },
+        },
     },
 };
 

diff --git a/src/dialog/Dialog/Dialog.scss b/src/dialog/Dialog/Dialog.scss
@@ -1,7 +1,29 @@
 .df-dialog {
     $self: &;
 
+    &.df-dialog_size_s {
+        #{$self}__field-wrapper {
+            width: 250px;
+
+            &_type_block,
+            &_type_textarea {
+                width: 100%;
+            }
+
+            &_type_plain {
+                padding-top: 6px;
+            }
+
+            &_full-width {
+                width: 100%;
+                padding-top: 12px;
+            }
+        }
+    }
+
     &_with_vertical_tabs {
+        $selfWithVertical: &;
+
         display: flex;
 
         #{$self}__field-wrapper {
@@ -13,6 +35,18 @@
                 width: 100%;
             }
         }
+
+        &.df-dialog_size_s {
+            #{$self}__field-wrapper {
+                width: 200px;
+
+                &.df-dialog__field-wrapper_type_textarea,
+                &.df-dialog__field-wrapper_type_block,
+                &_full-width {
+                    width: 100%;
+                }
+            }
+        }
     }
 
     &__caption {
@@ -222,6 +256,10 @@
 .df-page-dialog {
     width: 720px;
 
+    &.df-page-dialog_size_s {
+        width: 480px;
+    }
+
     &__wrapper {
         width: 100%;
         display: flex;

diff --git a/src/dialog/Dialog/Dialog.tsx b/src/dialog/Dialog/Dialog.tsx
@@ -1063,7 +1063,7 @@ class Dialog<
         form: FormApi<FormValues, InitialFormValues>,
     ) => {
         this.form = form;
-        const {waitingMessage, headerProps, footerProps, fields, formId} = this.props;
+        const {waitingMessage, headerProps, footerProps, fields, formId, size} = this.props;
         const {verticalTabs} = this.state;
         const {title, insertAfter, insertBefore} = headerProps || {};
         const {textApply: textApplyDefault, textCancel: textCancelDefault} =
@@ -1092,7 +1092,7 @@ class Dialog<
                     <CommonDialog.Body
                         className={bDialog('body', {with_vertical_tabs: Boolean(verticalTabs)})}
                     >
-                        <div className={bDialog({with_vertical_tabs: Boolean(verticalTabs)})}>
+                        <div className={bDialog({size, with_vertical_tabs: Boolean(verticalTabs)})}>
                             {isArrayOfTabs(fields) ? (
                                 this.renderTabbedFields()
                             ) : (
@@ -1137,10 +1137,10 @@ class Dialog<
         handleSubmit: () => void;
         form: FormApi<FormValues, InitialFormValues>;
     }): React.ReactNode => {
-        const {className, modal} = this.props;
+        const {className, modal, size} = this.props;
         return (
             <div className={bPage('wrapper', {modal}, className)}>
-                <div className={bPage()}>{this.renderDialogContent(handleSubmit, form)}</div>
+                <div className={bPage({size})}>{this.renderDialogContent(handleSubmit, form)}</div>
             </div>
         );
     };

diff --git a/src/stories/SizeContext.tsx b/src/stories/SizeContext.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const SizeContext = React.createContext<'s' | 'm' | 'l'>('m');
+
+export const SizeProvider = SizeContext.Provider;
+
+export function useSize() {
+    const size = React.useContext(SizeContext);
+    return {size};
+}
diff --git a/src/stories/dialog/00_Base_controls.stories.tsx b/src/stories/dialog/00_Base_controls.stories.tsx
@@ -8,6 +8,7 @@ import {MultiTextControlProps} from '../../dialog/MultiTextControl/MultiTextCont
 import {EditableListProps} from '../../dialog/EditableList/EditableList';
 import {EditableManyListsProps} from '../../dialog/EditableManyLists/EditableManyLists';
 import {SelectControlProps} from '../../dialog/SelectControl/SelectControl';
+import {useSize} from '../SizeContext';
 
 class DialogWithSelectStories extends Component {
     state = {
@@ -88,6 +89,7 @@ function DialogDemo({
             }}
             onClose={onClose ?? (() => {})}
             visible
+            {...useSize()}
             onAdd={onAdd}
             initialValues={{
                 plain: 'Some text for "plain" control',

diff --git a/src/stories/dialog/01_One_tab.stories.tsx b/src/stories/dialog/01_One_tab.stories.tsx
@@ -3,6 +3,7 @@ import {DFDialog} from '../../dialog/Dialog/Dialog';
 import {StoryFn, Meta} from '@storybook/react';
 import {FormApi} from '../../index';
 import {Button} from '@gravity-ui/uikit';
+import {useSize} from '../SizeContext';
 
 interface FormValues {
     firstName: string;
@@ -66,6 +67,7 @@ function DialogDemo({
             headerProps={{
                 title: 'One tab',
             }}
+            {...useSize()}
             onClose={onClose ?? (() => {})}
             visible
             onAdd={onAdd}

diff --git a/src/stories/dialog/02_Several_tabs.stories.tsx b/src/stories/dialog/02_Several_tabs.stories.tsx
@@ -3,6 +3,7 @@ import {DFDialog} from '../../dialog/Dialog/Dialog';
 import {StoryFn, Meta} from '@storybook/react';
 import {FormApi} from '../../index';
 import {Button} from '@gravity-ui/uikit';
+import {useSize} from '../SizeContext';
 
 interface FormValues {
     general: {
@@ -84,6 +85,7 @@ function DialogDemo({
             headerProps={{
                 title: 'Several tabs',
             }}
+            {...useSize()}
             onClose={onClose ?? (() => {})}
             visible
             onAdd={onAdd}

diff --git a/src/stories/dialog/03_Sections.stories.tsx b/src/stories/dialog/03_Sections.stories.tsx
@@ -3,6 +3,7 @@ import {DFDialog} from '../../dialog/Dialog/Dialog';
 import {StoryFn, Meta} from '@storybook/react';
 import {FormApi} from '../../index';
 import {Button} from '@gravity-ui/uikit';
+import {useSize} from '../SizeContext';
 
 interface FormValues {
     firstName: string;
@@ -66,6 +67,7 @@ function DialogDemo({
             headerProps={{
                 title: 'Group of fields',
             }}
+            {...useSize()}
             onClose={onClose ?? (() => {})}
             visible
             onAdd={onAdd}

diff --git a/src/stories/dialog/04_Visibility_condition.stories.tsx b/src/stories/dialog/04_Visibility_condition.stories.tsx
@@ -3,6 +3,7 @@ import {DeepPartial, DFDialog} from '../../dialog/Dialog/Dialog';
 import {StoryFn, Meta} from '@storybook/react';
 import {FormApi} from '../../index';
 import {Button} from '@gravity-ui/uikit';
+import {useSize} from '../SizeContext';
 
 interface FormValues {
     general: {
@@ -86,6 +87,7 @@ function DialogDemo({
             headerProps={{
                 title: 'Visibility contdition',
             }}
+            {...useSize()}
             onClose={onClose ?? (() => {})}
             visible
             onAdd={onAdd}

diff --git a/src/stories/dialog/05_Extras_and_linked_fields.stories.tsx b/src/stories/dialog/05_Extras_and_linked_fields.stories.tsx
@@ -3,6 +3,7 @@ import {DFDialog} from '../../dialog/Dialog/Dialog';
 import {StoryFn, Meta} from '@storybook/react';
 import {FormApi} from '../../index';
 import {Button} from '@gravity-ui/uikit';
+import {useSize} from '../SizeContext';
 
 interface FormValues {
     type: Array<string>;
@@ -64,6 +65,7 @@ function DialogDemo({
             headerProps={{
                 title: 'Linked fields by value',
             }}
+            {...useSize()}
             onClose={onClose ?? (() => {})}
             visible
             onAdd={onAdd}

diff --git a/src/stories/dialog/06_Field_validators.stories.tsx b/src/stories/dialog/06_Field_validators.stories.tsx
@@ -3,6 +3,7 @@ import {DFDialog} from '../../dialog/Dialog/Dialog';
 import {StoryFn, Meta} from '@storybook/react';
 import {FormApi} from '../../index';
 import {Button} from '@gravity-ui/uikit';
+import {useSize} from '../SizeContext';
 
 interface FormValues {
     general: {
@@ -84,6 +85,7 @@ function DialogDemo({
             headerProps={{
                 title: 'Field-level validation',
             }}
+            {...useSize()}
             onClose={onClose ?? (() => {})}
             visible
             onAdd={onAdd}

diff --git a/src/stories/dialog/07_Form_validation.stories.tsx b/src/stories/dialog/07_Form_validation.stories.tsx
@@ -3,6 +3,7 @@ import {DeepPartial, DFDialog} from '../../dialog/Dialog/Dialog';
 import {StoryFn, Meta} from '@storybook/react';
 import {FormApi} from '../../index';
 import {Button} from '@gravity-ui/uikit';
+import {useSize} from '../SizeContext';
 
 interface FormValues {
     general: {
@@ -80,6 +81,7 @@ function DialogDemo({
             headerProps={{
                 title: 'Form-level validation',
             }}
+            {...useSize()}
             onClose={onClose ?? (() => {})}
             visible
             onAdd={onAdd}

diff --git a/src/stories/dialog/08_Virtualized_tabs.stories.tsx b/src/stories/dialog/08_Virtualized_tabs.stories.tsx
@@ -3,6 +3,7 @@ import {DeepPartial, DFDialog} from '../../dialog/Dialog/Dialog';
 import {StoryFn, Meta} from '@storybook/react';
 import {FormApi} from '../../index';
 import {Button} from '@gravity-ui/uikit';
+import {useSize} from '../SizeContext';
 
 interface FormValues {
     general: {
@@ -74,6 +75,7 @@ function DialogDemo({
             headerProps={{
                 title: 'Virtualized tabs',
             }}
+            {...useSize()}
             onClose={onClose ?? (() => {})}
             visible
             onAdd={onAdd}

diff --git a/src/stories/dialog/09_Cloneable_tabs.stories.tsx b/src/stories/dialog/09_Cloneable_tabs.stories.tsx
@@ -3,6 +3,7 @@ import {DeepPartial, DFDialog} from '../../dialog/Dialog/Dialog';
 import {StoryFn, Meta} from '@storybook/react';
 import {FormApi} from '../../index';
 import {Button} from '@gravity-ui/uikit';
+import {useSize} from '../SizeContext';
 
 interface FormValues {
     general: {
@@ -74,6 +75,7 @@ function DialogDemo({
             headerProps={{
                 title: 'Clonable tabs',
             }}
+            {...useSize()}
             onClose={onClose ?? (() => {})}
             visible
             onAdd={onAdd}