Merge pull request #10588 from storybookjs/fix/add-identifiers-to-pan…

…el-components
storybookjs · Apr 30, 2020 · 11ad35d · 11ad35d
2 parents 613a539 + 4f0762e
commit 11ad35d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 17 deletions.
diff --git a/lib/components/package.json b/lib/components/package.json
@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@storybook/client-logger": "6.0.0-beta.0",
+    "@storybook/csf": "0.0.1",
     "@storybook/theming": "6.0.0-beta.0",
     "@types/overlayscrollbars": "^1.9.0",
     "@types/react-color": "^3.0.1",

diff --git a/lib/components/src/tabs/tabs.tsx b/lib/components/src/tabs/tabs.tsx
@@ -8,6 +8,7 @@ import React, {
   ReactNode,
 } from 'react';
 import { styled } from '@storybook/theming';
+import { sanitize } from '@storybook/csf';
 
 import { Placeholder } from '../placeholder/placeholder';
 import { FlexBar } from '../bar/bar';
@@ -158,26 +159,30 @@ export const Tabs: FunctionComponent<TabsProps> = memo(
       <Wrapper absolute={absolute} bordered={bordered} id={htmlId}>
         <FlexBar border backgroundColor={backgroundColor}>
           <TabBar role="tablist">
-            {list.map(({ title, id, active, color }) => (
-              <TabButton
-                type="button"
-                key={id}
-                active={active}
-                textColor={color}
-                onClick={(e: MouseEvent) => {
-                  e.preventDefault();
-                  actions.onSelect(id);
-                }}
-                role="tab"
-                className={`tabbutton ${active ? 'tabbutton-active' : ''}`}
-              >
-                {typeof title === 'function' ? title() : title}
-              </TabButton>
-            ))}
+            {list.map(({ title, id, active, color }) => {
+              const tabTitle = typeof title === 'function' ? title() : title;
+              return (
+                <TabButton
+                  id={`tabbutton-${sanitize(tabTitle)}`}
+                  className={`tabbutton ${active ? 'tabbutton-active' : ''}`}
+                  type="button"
+                  key={id}
+                  active={active}
+                  textColor={color}
+                  onClick={(e: MouseEvent) => {
+                    e.preventDefault();
+                    actions.onSelect(id);
+                  }}
+                  role="tab"
+                >
+                  {tabTitle}
+                </TabButton>
+              );
+            })}
           </TabBar>
           {tools ? <Fragment>{tools}</Fragment> : null}
         </FlexBar>
-        <Content bordered={bordered} absolute={absolute} tabIndex={0}>
+        <Content id="panel-tab-content" bordered={bordered} absolute={absolute} tabIndex={0}>
           {list.map(({ id, active, render }) => render({ key: id, active }))}
         </Content>
       </Wrapper>