fix(Select): fix examples in docs and storybook (#1553)

gravity-ui · Apr 25, 2024 · 3a46421 · 3a46421
1 parent 575477a
commit 3a46421
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 35 deletions.
diff --git a/src/components/Select/README.md b/src/components/Select/README.md
@@ -1023,11 +1023,12 @@ To render custom popup use the `renderPopup` property.
     code={`
 <Select
   filterable
-  renderSelectedOption={({renderList, renderFilter}) => {
+  placeholder="Custom popup"
+  renderPopup={({renderList, renderFilter}) => {
     return (
       <React.Fragment>
         {renderFilter()}
-        <div className="CustomElement" />
+        <div style={{width: "100%", height: "20px", backgroundColor: "tomato"}} />
         {renderList()}
       </React.Fragment>
     );
@@ -1042,16 +1043,16 @@ To render custom popup use the `renderPopup` property.
 >
   <UIKit.Select
     filterable
-    placeholder="Custom selected options"
-    renderSelectedOption={({renderList, renderFilter}) => {
+    placeholder="Custom popup"
+    renderPopup={({renderList, renderFilter}) => {
       return (
         <React.Fragment>
           {renderFilter()}
           <div style={{width: "100%", height: "20px", backgroundColor: "tomato"}} />
           {renderList()}
         </React.Fragment>
-      );
-    }}
+  );
+}}
   >
     <UIKit.Select.Option value="val_1" data={{color: '#8FE1A1'}}>Value 1</UIKit.Select.Option>
     <UIKit.Select.Option value="val_2" data={{color: '#38C0A8'}}>Value 2</UIKit.Select.Option>

diff --git a/src/components/Select/__stories__/SelectPopupWidthShowcase.tsx b/src/components/Select/__stories__/SelectPopupWidthShowcase.tsx
@@ -24,7 +24,7 @@ export const SelectPopupWidthShowcase = (args: any) => {
             <h2>Static width (props.popupWidth)</h2>
             <Select
                 {...args}
-                className="select-width-50"
+                className="select-example select-width-50"
                 options={extralong}
                 popupWidth={200}
                 title="Sample select"
@@ -34,12 +34,24 @@ export const SelectPopupWidthShowcase = (args: any) => {
                 options={extralong}
                 width="max"
                 popupWidth={200}
+                className="select-example"
                 title="Sample select"
             />
 
             <h2>Short values. Adjust to Control width</h2>
-            <Select {...args} className="select-width-300" options={short} title="Sample select" />
-            <Select {...args} options={short} width="max" title="Sample select" />
+            <Select
+                {...args}
+                className="select-example select-width-300"
+                options={short}
+                title="Sample select"
+            />
+            <Select
+                {...args}
+                className="select-example"
+                options={short}
+                width="max"
+                title="Sample select"
+            />
 
             <h2>Modes default/fit</h2>
             <Flex gap={10}>

diff --git a/src/components/Select/__stories__/SelectShowcase.scss b/src/components/Select/__stories__/SelectShowcase.scss
@@ -11,6 +11,10 @@ $blockSelectClear: '.#{variables.$ns}select-clear';
     width: 300px;
 }
 
+.select-example {
+    margin: 5px 0;
+}
+
 #{$block} {
     display: flex;
     flex-direction: column;

diff --git a/src/components/Select/__stories__/SelectShowcase.tsx b/src/components/Select/__stories__/SelectShowcase.tsx
@@ -17,6 +17,7 @@ import {block} from '../../utils/cn';
 import {
     EXAMPLE_CHILDREN_OPTIONS,
     EXAMPLE_CUSTOM_FILTER_SECTION,
+    EXAMPLE_CUSTOM_POPUP,
     EXAMPLE_CUSTOM_RENDERER_WITH_DISABLED_ITEM,
     EXAMPLE_DISABLED_OPTIONS,
     EXAMPLE_GROUP_CHILDREN_OPTIONS,
@@ -366,10 +367,21 @@ export const SelectShowcase = (props: SelectProps) => {
             </ExampleItem>
             <ExampleItem
                 title="Select with custom popup"
-                code={[EXAMPLE_JSON_OPTIONS, EXAMPLE_CHILDREN_OPTIONS]}
+                code={[EXAMPLE_CUSTOM_POPUP]}
                 selectProps={{
                     ...props,
-                    popupClassName: b('custom-popup'),
+                    filterable: true,
+                    renderPopup: ({renderFilter, renderList}) => {
+                        return (
+                            <React.Fragment>
+                                <div>{'---- Before Filter ----'}</div>
+                                {renderFilter()}
+                                <div>{'---- After Filter, Before List ----'}</div>
+                                {renderList()}
+                                <div>{'---- After List ----'}</div>
+                            </React.Fragment>
+                        );
+                    },
                 }}
             >
                 <Select.Option value="val1" content="Value1" />
@@ -411,30 +423,6 @@ export const SelectShowcase = (props: SelectProps) => {
                     <Select.Option value="val4" content="Value4" />
                 </ExampleItem>
             </div>
-
-            <ExampleItem
-                title="Select with custom popup"
-                selectProps={{
-                    ...props,
-                    filterable: true,
-                    renderPopup: ({renderFilter, renderList}) => {
-                        return (
-                            <React.Fragment>
-                                <div>{'---- Before Filter ----'}</div>
-                                {renderFilter()}
-                                <div>{'---- After Filter, Before List ----'}</div>
-                                {renderList()}
-                                <div>{'---- After List ----'}</div>
-                            </React.Fragment>
-                        );
-                    },
-                }}
-            >
-                <Select.Option value="val1" content="Value1" />
-                <Select.Option value="val2" content="Value2" />
-                <Select.Option value="val3" content="Value3" />
-                <Select.Option value="val4" content="Value4" />
-            </ExampleItem>
         </div>
     );
 };
diff --git a/src/components/Select/__stories__/constants.ts b/src/components/Select/__stories__/constants.ts
@@ -285,3 +285,30 @@ const renderFilter: SelectProps['renderFilter'] = ({value, ref, onChange, onKeyD
 </Select>
 
 `;
+
+export const EXAMPLE_CUSTOM_POPUP = `const [value, setValue] = React.useState<string[]>([]);
+
+<Select
+    value={value}
+    placeholder="Values",
+    onUpdate={(nextValue) => setValue(nextValue)}
+    filterable: true,
+    renderPopup: ({renderFilter, renderList}) => {
+        return (
+            <React.Fragment>
+                <div>{'---- Before Filter ----'}</div>
+                {renderFilter()}
+                <div>{'---- After Filter, Before List ----'}</div>
+                {renderList()}
+                <div>{'---- After List ----'}</div>
+            </React.Fragment>
+        );
+    },
+>
+    <Select.Option value="val1" content="Value1" />
+    <Select.Option value="val2" content="Value2" />
+    <Select.Option value="val3" content="Value3" />
+    <Select.Option value="val4" content="Value4" />
+</Select>
+
+`;