From 4f0762ebf3da10a424e812b1d383843463108dfb Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 29 Apr 2020 16:57:34 +0200
Subject: [PATCH] feat(components): add ids to panels tab and content

- Makes it easier to select when needed (e.g. e2e tests)
- Add @storybook/csf in the dependency list as well
---
 lib/components/package.json      |  1 +
 lib/components/src/tabs/tabs.tsx | 39 ++++++++++++++++++--------------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/lib/components/package.json b/lib/components/package.json
index 7e2c62125497..35d59ea8e2e9 100644
--- 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
index 51903767e9eb..b5b820037c5a 100644
--- 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>