@workday/canvas-kit-docs 7.0.0-alpha.92-next.19 → 7.0.0-alpha.94-next.20

package/dist/mdx/7.0-MIGRATION-GUIDE.mdx

@@ -11,6 +11,7 @@ any questions about the update.
 - [Buttons](#buttons)
 - [Segmented Control](#segmented-control)
 - [Side Panel](#side-panel)
+- [Tabs](#tabs)
 - [Icons](#icons)
 - [ActionBar Component Updates](#actionbar-component-updates)
 - [Status Indicator Width](#status-indicator-width)
@@ -414,6 +415,20 @@ Two props where added to the `SidePanel.ToggleButton`:
   tooltipTextCollapse?: string;
 ```
 
+## Tabs
+
+We've updated the `name` attribute of list items. This effects `Tabs.Item`, `Tabs.Panel`, and
+`Tabs.Menu.Item`. The attribute changed from `name` to `data-id`. We did this to not interfere with
+the HTML `name` attribute.
+
+### Breaking Change
+
+🤖 The codemod will handle all these changes automatically:
+
+- `<Tabs.Item name=` becomes `<Tabs.Item data-id=`
+- `<Tabs.Panel name=` becomes `<Tabs.Panel data-id=`
+- `<Tabs.Menu.Item name=` becomes `<Tabs.Menu.Item data-id=`
+
 ## Icons
 
 We've updated our lower level icon components such as `AccentIcon`, `AppletIcon`, `Graphic`, `Icon`,
@@ -426,7 +441,7 @@ which allows us to `forwardRef`.
 This is a breaking change since we've removed `iconRef`. You can now just pass a `ref` to the
 element.
 
-🤖 The codemod will handle all these changes automatically:\
+🤖 The codemod will handle all these changes automatically:
 
 - `iconRef` becomes `ref`
 

package/dist/mdx/COMPOUND_COMPONENTS.mdx

@@ -205,8 +205,8 @@ const MyComponent = () => {
   return (
     <Tabs shouldSelect={shouldSelect} onSelect={onSelect}>
       <Tabs.List>
-        <Tabs.Item name="first">First</Tabs.Item>
-        <Tabs.Item name="second">Second</Tabs.Item>
+        <Tabs.Item data-id="first">First</Tabs.Item>
+        <Tabs.Item data-id="second">Second</Tabs.Item>
       </Tabs.List>
     </Tabs>
   );

package/dist/mdx/react/tabs/Tabs.mdx

@@ -180,11 +180,11 @@ Undocumented props are spread to the underlying `<div>` element.
 #### Usage
 
 `Tabs.Item` is a `<button role="tab">` element. Each `Tabs.Item` is associated with a `Tabs.Panel`
-either by a `name` attribute or by the position in the list. If a `name` is provided, it must match
-the name passed to the corresponding `Tabs.Panel` component.
+either by a `data-id` attribute or by the position in the list. If a `data-id` is provided, it must
+match the `data-id` passed to the corresponding `Tabs.Panel` component.
 
 ```tsx
-<Tabs.Item name="first">First Tab</Tabs.Item>
+<Tabs.Item data-id="first">First Tab</Tabs.Item>
 ```
 
 #### Props
@@ -198,11 +198,12 @@ Undocumented props are spread to the underlying `button` element.
 #### Usage
 
 `Tabs.Panel` is a `<div role="tabpanel">` element. It is focusable by default. Each `Tabs.Panel` is
-controlled by a `Tabs.Item` either by a `name` attribute or by the position in the list. If a `name`
-is provided, it must match the name passed to the corresponding `Tabs.Item` component.
+controlled by a `Tabs.Item` either by a `data-id` attribute or by the position in the list. If a
+`data-id` is provided, it must match the `data-id` passed to the corresponding `Tabs.Item`
+component.
 
 ```tsx
-<Tabs.Panel name="first">{/* Contents of the tab panel */}</Tabs.Panel>
+<Tabs.Panel data-id="first">{/* Contents of the tab panel */}</Tabs.Panel>
 ```
 
 #### Props

package/dist/mdx/react/tabs/examples/DynamicTabs.tsx

@@ -77,7 +77,7 @@ export default () => {
     <Tabs model={model}>
       <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
         {(item: Tab) => (
-          <Tabs.Item name={item.id} onKeyDown={onKeyDown(item.id)} onClick={onClick(item.id)}>
+          <Tabs.Item onKeyDown={onKeyDown(item.id)} onClick={onClick(item.id)}>
             {item.tab}
           </Tabs.Item>
         )}
@@ -85,16 +85,12 @@ export default () => {
       <Tabs.Menu.Popper>
         <Tabs.Menu.Card maxWidth={300} maxHeight={200}>
           <Tabs.Menu.List>
-            {(item: Tab) => <Tabs.Menu.Item name={item.id}>{item.tab}</Tabs.Menu.Item>}
+            {(item: Tab) => <Tabs.Menu.Item>{item.tab}</Tabs.Menu.Item>}
           </Tabs.Menu.List>
         </Tabs.Menu.Card>
       </Tabs.Menu.Popper>
       <Tabs.Panels>
-        {(item: Tab) => (
-          <Tabs.Panel marginTop="m" data-id={item.id}>
-            Contents of {item.tab}
-          </Tabs.Panel>
-        )}
+        {(item: Tab) => <Tabs.Panel marginTop="m">Contents of {item.tab}</Tabs.Panel>}
       </Tabs.Panels>
     </Tabs>
   );

package/dist/mdx/react/tabs/examples/OverflowTabs.tsx

@@ -28,21 +28,17 @@ export default () => {
     <div style={{width: containerWidth}}>
       <Tabs model={model}>
         <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
-          {(item: MyTabItem) => <Tabs.Item data-id={item.id}>{item.text}</Tabs.Item>}
+          {(item: MyTabItem) => <Tabs.Item>{item.text}</Tabs.Item>}
         </Tabs.List>
         <Tabs.Menu.Popper>
           <Tabs.Menu.Card maxWidth={300} maxHeight={200}>
             <Tabs.Menu.List>
-              {(item: MyTabItem) => <Tabs.Menu.Item name={item.id}>{item.text}</Tabs.Menu.Item>}
+              {(item: MyTabItem) => <Tabs.Menu.Item>{item.text}</Tabs.Menu.Item>}
             </Tabs.Menu.List>
           </Tabs.Menu.Card>
         </Tabs.Menu.Popper>
         <Tabs.Panels>
-          {(item: MyTabItem) => (
-            <Tabs.Panel marginTop="m" data-id={item.id}>
-              {item.contents}
-            </Tabs.Panel>
-          )}
+          {(item: MyTabItem) => <Tabs.Panel marginTop="m">{item.contents}</Tabs.Panel>}
         </Tabs.Panels>
       </Tabs>
       <hr />

package/dist/mdx/react/tabs/examples/SinglePanel.tsx

@@ -23,13 +23,13 @@ export default () => {
   return (
     <Tabs model={model}>
       <Tabs.List>
-        <Tabs.Item name="first" aria-controls="mytab-panel">
+        <Tabs.Item data-id="first" aria-controls="mytab-panel">
           First Tab
         </Tabs.Item>
-        <Tabs.Item name="second" aria-controls="mytab-panel">
+        <Tabs.Item data-id="second" aria-controls="mytab-panel">
           Second Tab
         </Tabs.Item>
-        <Tabs.Item name="third" aria-controls="mytab-panel">
+        <Tabs.Item data-id="third" aria-controls="mytab-panel">
           Third Tab
         </Tabs.Item>
       </Tabs.List>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "7.0.0-alpha.92-next.19+e2cad878",
+  "version": "7.0.0-alpha.94-next.20+52c47b8b",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -41,7 +41,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^7.0.0-alpha.92-next.19+e2cad878"
+    "@workday/canvas-kit-react": "^7.0.0-alpha.94-next.20+52c47b8b"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -49,5 +49,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "e2cad87834c40633618cb65a95a0271b1256e214"
+  "gitHead": "52c47b8bab9c662b97dd1895d23f55af197538ae"
 }