From 261771edc7beb023e14029cffe65b8a2e78746e0 Mon Sep 17 00:00:00 2001
From: Josiah Ivey <josiah.ivey@gmail.com>
Date: Wed, 28 Feb 2024 19:57:07 -0800
Subject: [PATCH] add background, fix coverage and ladle example

---
 src/components/Tabs.spec.tsx                  |  18 ++-
 src/components/Tabs.stories.tsx               |   5 +-
 src/components/Tabs.tsx                       |   3 +-
 .../__snapshots__/Tabs.spec.tsx.snap          | 114 ++++++++++++++----
 4 files changed, 112 insertions(+), 28 deletions(-)

diff --git a/src/components/Tabs.spec.tsx b/src/components/Tabs.spec.tsx
index afed40f09..de19d2fec 100644
--- a/src/components/Tabs.spec.tsx
+++ b/src/components/Tabs.spec.tsx
@@ -34,6 +34,22 @@ describe("Tabs component", () => {
       );
       expect(asFragment()).toMatchSnapshot();
     });
+
+    it("renders large size", () => {
+      const { asFragment } = render(
+        <Tabs size="large">
+          <TabList aria-label="Items">
+            <Tab id="one">First Item</Tab>
+            <Tab id="two">Second Item</Tab>
+            <Tab id="three">Last Item</Tab>
+          </TabList>
+          <TabPanel id="one">First Content Panel</TabPanel>
+          <TabPanel id="two">Second Content Panel</TabPanel>
+          <TabPanel id="three">Third Content Panel</TabPanel>
+        </Tabs>,
+      );
+      expect(asFragment()).toMatchSnapshot();
+    });
   });
 
   describe("button-bar styling", () => {
@@ -71,7 +87,7 @@ describe("Tabs component", () => {
 
     it("renders large size", () => {
       const { asFragment } = render(
-        <Tabs size="large">
+        <Tabs size="large" variant="button-bar">
           <TabList aria-label="Items">
             <Tab id="one">First Item</Tab>
             <Tab id="two">Second Item</Tab>
diff --git a/src/components/Tabs.stories.tsx b/src/components/Tabs.stories.tsx
index 03268a3e4..be43650d5 100644
--- a/src/components/Tabs.stories.tsx
+++ b/src/components/Tabs.stories.tsx
@@ -29,8 +29,9 @@ export const Examples = () => {
   return <Wrapper>
     <label>
       <b>Size</b><br/>
-      <select onChange={handleSetSize}>
-        {['large', 'medium', 'small'].map((v) => <option value={v} selected={size === v}>{v}</option>)}
+      <select onChange={handleSetSize} defaultValue={size}>
+        {['large', 'medium', 'small'].map((v) =>
+          <option key={v}>{v}</option>)}
       </select>
     </label>
     <Tabs size={size}>
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
index a1dfa0385..a40f6a665 100644
--- a/src/components/Tabs.tsx
+++ b/src/components/Tabs.tsx
@@ -20,7 +20,8 @@ const buttonBarCss = css`
   .react-aria-Tab {
     padding: 0 1.6rem;
     min-height: ${({ size }: TabsProps) =>
-      size === 'small' ? '2.8' : '4.8'}rem;
+      size === 'small' ? '2.8' : ( size === 'large' ? '4.8' : '4.0')}rem;
+    background: #fff;
 
     &[data-selected] {
       background: ${colors.palette.neutralLight};
diff --git a/src/components/__snapshots__/Tabs.spec.tsx.snap b/src/components/__snapshots__/Tabs.spec.tsx.snap
index ffd70067e..854f470a7 100644
--- a/src/components/__snapshots__/Tabs.spec.tsx.snap
+++ b/src/components/__snapshots__/Tabs.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Tabs component button-bar styling renders correctly with button-bar variant 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bczRLJ ksbCMq"
+    class="sc-bczRLJ iogQAy"
     data-orientation="horizontal"
     data-rac=""
   >
@@ -13,17 +13,17 @@ exports[`Tabs component button-bar styling renders correctly with button-bar var
       class="react-aria-TabList"
       data-orientation="horizontal"
       data-rac=""
-      id="react-aria-3"
+      id="react-aria-4"
       role="tablist"
     >
       <div
-        aria-controls="react-aria-3-tabpanel-one"
+        aria-controls="react-aria-4-tabpanel-one"
         aria-selected="true"
         class="react-aria-Tab"
         data-key="one"
         data-rac=""
         data-selected="true"
-        id="react-aria-3-tab-one"
+        id="react-aria-4-tab-one"
         role="tab"
         tabindex="0"
       >
@@ -34,7 +34,7 @@ exports[`Tabs component button-bar styling renders correctly with button-bar var
         class="react-aria-Tab"
         data-key="two"
         data-rac=""
-        id="react-aria-3-tab-two"
+        id="react-aria-4-tab-two"
         role="tab"
         tabindex="-1"
       >
@@ -45,7 +45,7 @@ exports[`Tabs component button-bar styling renders correctly with button-bar var
         class="react-aria-Tab"
         data-key="three"
         data-rac=""
-        id="react-aria-3-tab-three"
+        id="react-aria-4-tab-three"
         role="tab"
         tabindex="-1"
       >
@@ -53,10 +53,10 @@ exports[`Tabs component button-bar styling renders correctly with button-bar var
       </div>
     </div>
     <div
-      aria-labelledby="react-aria-3-tab-one"
+      aria-labelledby="react-aria-4-tab-one"
       class="react-aria-TabPanel"
       data-rac=""
-      id="react-aria-3-tabpanel-one"
+      id="react-aria-4-tabpanel-one"
       role="tabpanel"
       tabindex="0"
     >
@@ -69,7 +69,7 @@ exports[`Tabs component button-bar styling renders correctly with button-bar var
 exports[`Tabs component button-bar styling renders correctly with button-bar variant and small size 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bczRLJ ijWZwy"
+    class="sc-bczRLJ fXicUi"
     data-orientation="horizontal"
     data-rac=""
   >
@@ -79,17 +79,17 @@ exports[`Tabs component button-bar styling renders correctly with button-bar var
       class="react-aria-TabList"
       data-orientation="horizontal"
       data-rac=""
-      id="react-aria-4"
+      id="react-aria-5"
       role="tablist"
     >
       <div
-        aria-controls="react-aria-4-tabpanel-one"
+        aria-controls="react-aria-5-tabpanel-one"
         aria-selected="true"
         class="react-aria-Tab"
         data-key="one"
         data-rac=""
         data-selected="true"
-        id="react-aria-4-tab-one"
+        id="react-aria-5-tab-one"
         role="tab"
         tabindex="0"
       >
@@ -100,7 +100,7 @@ exports[`Tabs component button-bar styling renders correctly with button-bar var
         class="react-aria-Tab"
         data-key="two"
         data-rac=""
-        id="react-aria-4-tab-two"
+        id="react-aria-5-tab-two"
         role="tab"
         tabindex="-1"
       >
@@ -111,7 +111,7 @@ exports[`Tabs component button-bar styling renders correctly with button-bar var
         class="react-aria-Tab"
         data-key="three"
         data-rac=""
-        id="react-aria-4-tab-three"
+        id="react-aria-5-tab-three"
         role="tab"
         tabindex="-1"
       >
@@ -119,10 +119,10 @@ exports[`Tabs component button-bar styling renders correctly with button-bar var
       </div>
     </div>
     <div
-      aria-labelledby="react-aria-4-tab-one"
+      aria-labelledby="react-aria-5-tab-one"
       class="react-aria-TabPanel"
       data-rac=""
-      id="react-aria-4-tabpanel-one"
+      id="react-aria-5-tabpanel-one"
       role="tabpanel"
       tabindex="0"
     >
@@ -135,7 +135,7 @@ exports[`Tabs component button-bar styling renders correctly with button-bar var
 exports[`Tabs component button-bar styling renders large size 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bczRLJ bgDxaZ"
+    class="sc-bczRLJ hFsbZB"
     data-orientation="horizontal"
     data-rac=""
   >
@@ -145,17 +145,17 @@ exports[`Tabs component button-bar styling renders large size 1`] = `
       class="react-aria-TabList"
       data-orientation="horizontal"
       data-rac=""
-      id="react-aria-5"
+      id="react-aria-6"
       role="tablist"
     >
       <div
-        aria-controls="react-aria-5-tabpanel-one"
+        aria-controls="react-aria-6-tabpanel-one"
         aria-selected="true"
         class="react-aria-Tab"
         data-key="one"
         data-rac=""
         data-selected="true"
-        id="react-aria-5-tab-one"
+        id="react-aria-6-tab-one"
         role="tab"
         tabindex="0"
       >
@@ -166,7 +166,7 @@ exports[`Tabs component button-bar styling renders large size 1`] = `
         class="react-aria-Tab"
         data-key="two"
         data-rac=""
-        id="react-aria-5-tab-two"
+        id="react-aria-6-tab-two"
         role="tab"
         tabindex="-1"
       >
@@ -177,7 +177,7 @@ exports[`Tabs component button-bar styling renders large size 1`] = `
         class="react-aria-Tab"
         data-key="three"
         data-rac=""
-        id="react-aria-5-tab-three"
+        id="react-aria-6-tab-three"
         role="tab"
         tabindex="-1"
       >
@@ -185,10 +185,10 @@ exports[`Tabs component button-bar styling renders large size 1`] = `
       </div>
     </div>
     <div
-      aria-labelledby="react-aria-5-tab-one"
+      aria-labelledby="react-aria-6-tab-one"
       class="react-aria-TabPanel"
       data-rac=""
-      id="react-aria-5-tabpanel-one"
+      id="react-aria-6-tabpanel-one"
       role="tabpanel"
       tabindex="0"
     >
@@ -329,3 +329,69 @@ exports[`Tabs component normal styling renders correctly with small size 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Tabs component normal styling renders large size 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-bczRLJ bgDxaZ"
+    data-orientation="horizontal"
+    data-rac=""
+  >
+    <div
+      aria-label="Items"
+      aria-orientation="horizontal"
+      class="react-aria-TabList"
+      data-orientation="horizontal"
+      data-rac=""
+      id="react-aria-3"
+      role="tablist"
+    >
+      <div
+        aria-controls="react-aria-3-tabpanel-one"
+        aria-selected="true"
+        class="react-aria-Tab"
+        data-key="one"
+        data-rac=""
+        data-selected="true"
+        id="react-aria-3-tab-one"
+        role="tab"
+        tabindex="0"
+      >
+        First Item
+      </div>
+      <div
+        aria-selected="false"
+        class="react-aria-Tab"
+        data-key="two"
+        data-rac=""
+        id="react-aria-3-tab-two"
+        role="tab"
+        tabindex="-1"
+      >
+        Second Item
+      </div>
+      <div
+        aria-selected="false"
+        class="react-aria-Tab"
+        data-key="three"
+        data-rac=""
+        id="react-aria-3-tab-three"
+        role="tab"
+        tabindex="-1"
+      >
+        Last Item
+      </div>
+    </div>
+    <div
+      aria-labelledby="react-aria-3-tab-one"
+      class="react-aria-TabPanel"
+      data-rac=""
+      id="react-aria-3-tabpanel-one"
+      role="tabpanel"
+      tabindex="0"
+    >
+      First Content Panel
+    </div>
+  </div>
+</DocumentFragment>
+`;