Skip to content

Commit

Permalink
add background, fix coverage and ladle example
Browse files Browse the repository at this point in the history
  • Loading branch information
@jivey
jivey committed Feb 29, 2024
1 parent 0c955c6 commit 261771e
Show file tree
Hide file tree
Showing 4 changed files with 112 additions and 28 deletions.
18 changes: 17 additions & 1 deletion src/components/Tabs.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand Down Expand Up @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions src/components/Tabs.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
3 changes: 2 additions & 1 deletion src/components/Tabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down
114 changes: 90 additions & 24 deletions src/components/__snapshots__/Tabs.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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=""
>
Expand All @@ -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"
>
Expand All @@ -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"
>
Expand All @@ -45,18 +45,18 @@ 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"
>
Last Item
</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"
>
Expand All @@ -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=""
>
Expand All @@ -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"
>
Expand All @@ -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"
>
Expand All @@ -111,18 +111,18 @@ 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"
>
Last Item
</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"
>
Expand All @@ -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=""
>
Expand All @@ -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"
>
Expand All @@ -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"
>
Expand All @@ -177,18 +177,18 @@ 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"
>
Last Item
</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"
>
Expand Down Expand Up @@ -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>
`;

0 comments on commit 261771e

Please sign in to comment.