feat(Tabs): Remove icon prop

Author: Barsnes

packages/react/src/components/Tabs/Tab/Tab.tsx

@@ -10,15 +10,11 @@ import { useTabItem } from './useTab';
 export type TabProps = {
   /** Value that will be set in the `Tabs` components state when the tab is activated*/
   value: string;
-  /** Icon to display
-   * @deprecated This will be removed in the future, icons will be passed as children
-   */
-  icon?: React.ReactNode;
 } & Omit<HTMLAttributes<HTMLButtonElement>, 'value'>;
 
 export const Tab = forwardRef<HTMLButtonElement, TabProps>((props, ref) => {
   const { children, className, ...rest } = props;
-  const { active, size = 'medium', icon, ...useTabRest } = useTabItem(props);
+  const { active, size = 'medium', ...useTabRest } = useTabItem(props);
 
   return (
     <RovingTabindexItem
@@ -33,7 +29,6 @@ export const Tab = forwardRef<HTMLButtonElement, TabProps>((props, ref) => {
       ref={ref}
       {...rest}
     >
-      {icon}
       {children}
     </RovingTabindexItem>
   );

packages/react/src/components/Tabs/Tab/useTab.ts

@@ -11,8 +11,7 @@ type UseTab = (props: TabProps) => {
 } & Pick<
   HTMLAttributes<HTMLButtonElement>,
   'id' | 'aria-selected' | 'role' | 'onClick'
-> &
-  Pick<TabProps, 'icon'>;
+>;
 
 /** Handles props for `Tab` in context with `Tabs` */
 export const useTabItem: UseTab = (props: TabProps) => {

packages/react/src/components/Tabs/Tabs.stories.tsx

@@ -52,18 +52,15 @@ Preview.args = {
 export const IconsOnly: StoryFn<typeof Tabs> = () => (
   <Tabs defaultValue='value1'>
     <Tabs.List>
-      <Tabs.Tab
-        value='value1'
-        icon={<AkselIcon title='Airplane' />}
-      />
-      <Tabs.Tab
-        value='value2'
-        icon={<AkselIcon2 title='Newspaper' />}
-      />
-      <Tabs.Tab
-        value='value3'
-        icon={<AkselIcon3 title='Dog' />}
-      />
+      <Tabs.Tab value='value1'>
+        <AkselIcon title='Airplane' />
+      </Tabs.Tab>
+      <Tabs.Tab value='value2'>
+        <AkselIcon2 title='Newspaper' />
+      </Tabs.Tab>
+      <Tabs.Tab value='value3'>
+        <AkselIcon3 title='Dog' />
+      </Tabs.Tab>
     </Tabs.List>
     <Tabs.Content value='value1'>content 1</Tabs.Content>
     <Tabs.Content value='value2'>content 2</Tabs.Content>
@@ -88,22 +85,16 @@ export const Controlled: StoryFn<typeof Tabs> = () => {
         onChange={setValue}
       >
         <Tabs.List>
-          <Tabs.Tab
-            value='value1'
-            icon={icon}
-          >
+          <Tabs.Tab value='value1'>
+            {icon}
             Tab 1
           </Tabs.Tab>
-          <Tabs.Tab
-            value='value2'
-            icon={<AkselIcon2 />}
-          >
+          <Tabs.Tab value='value2'>
+            <AkselIcon2 />
             Tab 2
           </Tabs.Tab>
-          <Tabs.Tab
-            value='value3'
-            icon={<AkselIcon4 />}
-          >
+          <Tabs.Tab value='value3'>
+            <AkselIcon4 />
             Tab 3
           </Tabs.Tab>
         </Tabs.List>