feat(core-bundle): add tabs-primitive

twilio-labs · Jun 1, 2020 · b3b076b · b3b076b · vercel · Jun 1, 2020
1 parent aa2d7cd
commit b3b076b
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 20 deletions.
diff --git a/packages/paste-core/core-bundle/package.json b/packages/paste-core/core-bundle/package.json
@@ -52,6 +52,7 @@
     "@twilio-paste/separator": "^0.1.11",
     "@twilio-paste/spinner": "^1.2.11",
     "@twilio-paste/stack": "^0.1.8",
+    "@twilio-paste/tabs-primitive": "^0.0.0",
     "@twilio-paste/text": "^2.1.9",
     "@twilio-paste/truncate": "^1.0.8"
   },

diff --git a/packages/paste-core/core-bundle/src/index.tsx b/packages/paste-core/core-bundle/src/index.tsx
@@ -23,5 +23,6 @@ export * from '@twilio-paste/screen-reader-only';
 export * from '@twilio-paste/separator';
 export * from '@twilio-paste/spinner';
 export * from '@twilio-paste/stack';
+export * from '@twilio-paste/tabs-primitive';
 export * from '@twilio-paste/text';
 export * from '@twilio-paste/truncate';
diff --git a/packages/paste-core/primitives/tabs/package.json b/packages/paste-core/primitives/tabs/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "category": "interaction",
   "status": "beta",
-  "description": "An unstyled and accessible basis upon which to style a tabbing system.",
+  "description": "An unstyled and accessible basis upon which to style a tabset.",
   "author": "Twilio Inc.",
   "license": "MIT",
   "main:dev": "src/index.tsx",

diff --git a/packages/paste-core/primitives/tabs/stories/index.stories.tsx b/packages/paste-core/primitives/tabs/stories/index.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {Button} from '@twilio-paste/button';
 import {Paragraph} from '@twilio-paste/typography';
-import {Box} from '@twilio-paste/box';
+import {Stack} from '@twilio-paste/stack';
 import {useUID} from 'react-uid';
 import {useTabsPrimitiveState, TabsPrimitive, TabsPrimitiveList, TabsPrimitivePanel} from '../src';
 
@@ -12,25 +12,21 @@ const BaseExample: React.FC<{}> = () => {
   return (
     <>
       <TabsPrimitiveList {...tab} aria-label="My tabs">
-        <Box marginRight="space20" display="inline-block">
+        <Stack orientation="horizontal" spacing="space20">
           <TabsPrimitive as={Button} size="small" {...tab}>
             Tab 1
           </TabsPrimitive>
-        </Box>
-        <Box marginRight="space20" display="inline-block">
           <TabsPrimitive {...tab}>
             {(props: any) => (
               <Button {...props} variant="primary" size="small" disabled>
                 Tab 2 (disabled)
               </Button>
             )}
           </TabsPrimitive>
-        </Box>
-        <Box marginRight="space20" display="inline-block">
           <TabsPrimitive as={Button} size="small" {...tab}>
             Tab 3
           </TabsPrimitive>
-        </Box>
+        </Stack>
       </TabsPrimitiveList>
       <TabsPrimitivePanel {...tab}>Tab 1</TabsPrimitivePanel>
       <TabsPrimitivePanel {...tab}>Tab 2</TabsPrimitivePanel>
@@ -44,21 +40,17 @@ const NoDefaultSelected: React.FC<{}> = () => {
   return (
     <>
       <TabsPrimitiveList {...tab} aria-label="My tabs">
-        <Box marginRight="space20" display="inline-block">
+        <Stack orientation="horizontal" spacing="space20">
           <TabsPrimitive as={Button} size="small" {...tab}>
             Tab 1
           </TabsPrimitive>
-        </Box>
-        <Box marginRight="space20" display="inline-block">
           <TabsPrimitive as={Button} size="small" {...tab}>
             Tab 2
           </TabsPrimitive>
-        </Box>
-        <Box marginRight="space20" display="inline-block">
           <TabsPrimitive as={Button} size="small" {...tab}>
             Tab 3
           </TabsPrimitive>
-        </Box>
+        </Stack>
       </TabsPrimitiveList>
       <TabsPrimitivePanel {...tab}>Tab 1</TabsPrimitivePanel>
       <TabsPrimitivePanel {...tab}>Tab 2</TabsPrimitivePanel>
@@ -78,21 +70,17 @@ const VerticalTabsExample: React.FC<{}> = () => {
           aria-label="My tabs"
           style={{borderRight: '1px solid black', paddingRight: 10, marginRight: 10}}
         >
-          <Box marginBottom="space20">
+          <Stack orientation="vertical" spacing="space20">
             <TabsPrimitive as={Button} size="small" {...tab}>
               Tab 1
             </TabsPrimitive>
-          </Box>
-          <Box marginBottom="space20">
             <TabsPrimitive as={Button} size="small" {...tab}>
               Tab 2
             </TabsPrimitive>
-          </Box>
-          <Box marginBottom="space20">
             <TabsPrimitive as={Button} size="small" {...tab}>
               Tab 3
             </TabsPrimitive>
-          </Box>
+          </Stack>
         </TabsPrimitiveList>
         <TabsPrimitivePanel {...tab}>Tab 1</TabsPrimitivePanel>
         <TabsPrimitivePanel {...tab}>Tab 2</TabsPrimitivePanel>