fixup! Feat(web-react): Add spacing property to Tabs component #DS-1315

lmc-eu · Aug 6, 2024 · daed9e2 · daed9e2
1 parent 92ef7a2
commit daed9e2
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/packages/web-react/src/components/Stack/useStackStyleProps.ts b/packages/web-react/src/components/Stack/useStackStyleProps.ts
@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import { CSSProperties, ElementType } from 'react';
-import { useClassNamePrefix } from '../../hooks';
-import { useSpacingStyle } from '../../hooks/useSpacingStyle';
+import { useClassNamePrefix, useSpacingStyle } from '../../hooks';
 import { SpiritStackProps } from '../../types';
 
 interface StackCSSProperties extends CSSProperties {

diff --git a/packages/web-react/src/components/Tabs/stories/UncontrolledTabs.stories.tsx b/packages/web-react/src/components/Tabs/stories/UncontrolledTabs.stories.tsx
@@ -11,6 +11,16 @@ const meta: Meta<typeof UncontrolledTabs> = {
         type: 'number',
       },
     },
+    spacing: {
+      control: 'object',
+    },
+  },
+  args: {
+    spacing: {
+      desktop: 'space-700',
+      mobile: 'space-500',
+      tablet: 'space-600',
+    },
   },
 };
 

diff --git a/packages/web-react/src/components/Tabs/useTabsStyleProps.ts b/packages/web-react/src/components/Tabs/useTabsStyleProps.ts
@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import { CSSProperties } from 'react';
-import { useClassNamePrefix } from '../../hooks';
-import { useSpacingStyle } from '../../hooks/useSpacingStyle';
+import { useClassNamePrefix, useSpacingStyle } from '../../hooks';
 import { SpiritTabsProps } from '../../types';
 import { useTabContext } from './TabContext';
 

diff --git a/packages/web-react/src/hooks/index.ts b/packages/web-react/src/hooks/index.ts
@@ -8,4 +8,5 @@ export * from './useIcon';
 export * from './useIsomorphicLayoutEffect';
 export * from './useLastActiveFocus';
 export * from './useScrollControl';
+export * from './useSpacingStyle';
 export * from './useToggle';