fix: replace deprecated 'dropdown' with Select in tabs

innovaccer · Oct 17, 2024 · 1fa589f · 1fa589f
1 parent 6b0b1bd
commit 1fa589f
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 9 deletions.
diff --git a/core/components/molecules/tabs/__stories__/BasicTabs.story.jsx b/core/components/molecules/tabs/__stories__/BasicTabs.story.jsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { action } from '@/utils/action';
-import { Tabs, Heading, Dropdown, Tab } from '@/index';
+import { Tabs, Heading, Select, Tab } from '@/index';
 
 // CSF format story
 export const basicTabs = () => {
@@ -42,7 +42,20 @@ export const basicTabs = () => {
           Data Gaps
         </Heading>
         <div style={{ width: 'var(--spacing-8)' }}>
-          <Dropdown options={options} />
+          <Select
+            value={{ label: options[0].label, value: options[0].value }}
+            triggerOptions={{ withClearButton: false }}
+          >
+            <Select.List>
+              {options.map((item, key) => {
+                return (
+                  <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                    {item.label}
+                  </Select.Option>
+                );
+              })}
+            </Select.List>
+          </Select>
         </div>
       </div>
       <Tabs activeIndex={activeIndex} onTabChange={onTabChangeHandler} className="mb-6">
@@ -98,7 +111,20 @@ const customCode = `() => {
           Data Gaps
         </Heading>
         <div style={{ width: 'var(--spacing-8)' }}>
-          <Dropdown options={options} />
+          <Select
+            value={{ label: options[0].label, value: options[0].value }}
+            triggerOptions={{ withClearButton: false }}
+          >
+            <Select.List>
+              {options.map((item, key) => {
+                return (
+                  <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                    {item.label}
+                  </Select.Option>
+                )
+              })}
+            </Select.List>
+          </Select>
         </div>
       </div>
       <Tabs activeIndex={activeIndex} onTabChange={onTabChangeHandler} className="mb-6">

diff --git a/core/components/molecules/tabs/__stories__/InlineContent.story.jsx b/core/components/molecules/tabs/__stories__/InlineContent.story.jsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { action } from '@/utils/action';
-import { Tabs, Dropdown, Input, Tab } from '@/index';
+import { Tabs, Select, Input, Tab } from '@/index';
 
 // CSF format story
 export const inlineContent = () => {
@@ -38,7 +38,22 @@ export const inlineContent = () => {
           <Input placeholder="Search by name" icon="search" />
         </div>
         <div style={{ width: 'var(--spacing-8)' }} className="ml-4">
-          <Dropdown options={options} placeholder="Sort by" />
+          <Select
+            triggerOptions={{
+              withClearButton: false,
+              placeholder: 'Sort by',
+            }}
+          >
+            <Select.List>
+              {options.map((item, key) => {
+                return (
+                  <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                    {item.label}
+                  </Select.Option>
+                );
+              })}
+            </Select.List>
+          </Select>
         </div>
       </div>
     </Tabs>
@@ -83,7 +98,22 @@ const customCode = `() => {
           <Input placeholder="Search by name" icon="search" />
         </div>
         <div style={{ width: 'var(--spacing-8)' }} className="ml-4">
-          <Dropdown options={options} placeholder="Sort by" />
+          <Select
+            triggerOptions={{ 
+              withClearButton: false,
+              placeholder: 'Sort by',
+            }}
+          >
+            <Select.List>
+              {options.map((item, key) => {
+                return (
+                  <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                    {item.label}
+                  </Select.Option>
+                )
+              })}
+            </Select.List>
+          </Select>
         </div>
       </div>
     </Tabs>

diff --git a/core/components/molecules/tabs/__stories__/TabsWithCount.story.jsx b/core/components/molecules/tabs/__stories__/TabsWithCount.story.jsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { action } from '@/utils/action';
-import { Tabs, Heading, Dropdown, Button, Input, Tab } from '@/index';
+import { Tabs, Heading, Select, Button, Input, Tab } from '@/index';
 
 // CSF format story
 export const tabsWithCount = () => {
@@ -46,7 +46,22 @@ export const tabsWithCount = () => {
               <Input placeholder="Search by name" icon="search" />
             </div>
             <div style={{ width: 'var(--spacing-8)' }} className="ml-4">
-              <Dropdown options={options} placeholder="Sort by" />
+              <Select
+                triggerOptions={{
+                  withClearButton: false,
+                  placeholder: 'Sort by',
+                }}
+              >
+                <Select.List>
+                  {options.map((item, key) => {
+                    return (
+                      <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                        {item.label}
+                      </Select.Option>
+                    );
+                  })}
+                </Select.List>
+              </Select>
             </div>
           </div>
         </Tabs>
@@ -99,7 +114,22 @@ const customCode = `() => {
               <Input placeholder="Search by name" icon="search" />
             </div>
             <div style={{ width: 'var(--spacing-8)' }} className="ml-4">
-              <Dropdown options={options} placeholder="Sort by" />
+              <Select
+                triggerOptions={{ 
+                  withClearButton: false,
+                  placeholder: 'Sort by',
+                }}
+              >
+                <Select.List>
+                  {options.map((item, key) => {
+                    return (
+                      <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                        {item.label}
+                      </Select.Option>
+                    )
+                  })}
+                </Select.List>
+              </Select>
             </div>
           </div>
         </Tabs>