Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(react): add IconTab component with size prop #10301

Merged
merged 17 commits into from
Jan 14, 2022
Merged

feat(react): add IconTab component with size prop #10301

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
571e2e8
chore check in progress
abbeyhrt Dec 9, 2021
b3cb6da
chore: check in progress
abbeyhrt Dec 14, 2021
77596b8
feat(react): add size prop and IconTab
abbeyhrt Dec 15, 2021
32aee4a
fix(react): update class names and story for icon tabs
abbeyhrt Dec 15, 2021
09ae596
test(react): update snapshots
abbeyhrt Dec 15, 2021
7ca5232
Merge branch 'main' into feat/add-size-tabs
abbeyhrt Dec 16, 2021
573ad8e
chore: merge in master
abbeyhrt Jan 6, 2022
6613f80
fix(react): use scss variable to declare icon tab height/width
abbeyhrt Jan 10, 2022
eee6072
Merge branch 'feat/add-size-tabs' of github.com:abbeyhrt/my-carbon-fo…
abbeyhrt Jan 10, 2022
fd992e0
chore(react): fix typo
abbeyhrt Jan 10, 2022
1d70d01
Merge branch 'main' into feat/add-size-tabs
abbeyhrt Jan 10, 2022
a7658c9
fix(react): update iconSize prop and snapshots
abbeyhrt Jan 11, 2022
3b1d051
Merge branch 'feat/add-size-tabs' of github.com:abbeyhrt/my-carbon-fo…
abbeyhrt Jan 11, 2022
cd8a5cd
fix(react): add support for contained icon tabs
abbeyhrt Jan 12, 2022
02a9f75
feat(react): add tooltip to icon tab
abbeyhrt Jan 12, 2022
30429c2
fix(react): update snapshots
abbeyhrt Jan 12, 2022
cd2612c
Merge branch 'main' into feat/add-size-tabs
abbeyhrt Jan 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5765,6 +5765,31 @@ Map {
},
"render": [Function],
},
"unstable_IconTab" => Object {
"$$typeof": Symbol(react.forward_ref),
"defaultProps": Object {
"size": "default",
},
"propTypes": Object {
"children": Object {
"type": "node",
},
"className": Object {
"type": "string",
},
"size": Object {
"args": Array [
Array [
"default",
"lg",
],
],
"type": "oneOf",
},
},
"render": [Function],
},
"Tag" => Object {
"SideNavSwitcher" => Object {
"$$typeof": Symbol(react.forward_ref),
"propTypes": Object {
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/__tests__/index-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,7 @@ Array [
"unstable_HStack",
"unstable_Heading",
"unstable_IconButton",
"unstable_IconTab",
"unstable_Layer",
"unstable_Menu",
"unstable_MenuDivider",
Expand Down
10 changes: 8 additions & 2 deletions packages/react/src/components/Tabs/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,13 @@
*/

import * as FeatureFlags from '@carbon/feature-flags';
import { Tabs as TabsNext, TabPanel, TabPanels, TabList } from './next/Tabs';
import {
Tabs as TabsNext,
TabPanel,
TabPanels,
TabList,
IconTab,
} from './next/Tabs';
import { default as TabsClassic } from './Tabs';
import { default as TabsSkeletonClassic } from './Tabs.Skeleton';
import { default as TabsSkeletonNext } from './next/Tabs.Skeleton';
Expand All @@ -19,6 +25,6 @@ const TabsSkeleton = FeatureFlags.enabled('enable-v11-release')
? TabsSkeletonNext
: TabsSkeletonClassic;

export { TabsSkeleton, TabPanels, TabPanel, TabList };
export { TabsSkeleton, TabPanels, TabPanel, TabList, IconTab };

export default Tabs;
34 changes: 33 additions & 1 deletion packages/react/src/components/Tabs/next/Tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@ function TabList({
light,
scrollIntoView,
contained = false,
iconSize,
...rest
}) {
const {
Expand All @@ -138,6 +139,8 @@ function TabList({
const className = cx(`${prefix}--tabs`, customClassName, {
[`${prefix}--tabs--contained`]: contained,
[`${prefix}--tabs--light`]: light,
[`${prefix}--tabs__icon--default`]: iconSize === '16',
[`${prefix}--tabs__icon--lg`]: iconSize === '20',
});

const tabs = [];
Expand Down Expand Up @@ -242,6 +245,10 @@ TabList.propTypes = {
*/

contained: PropTypes.bool,
/**
* If using `IconTab`, specify the size of the icon being used.
*/
iconSize: PropTypes.oneOf(['16', '20']),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
iconSize: PropTypes.oneOf(['16', '20']),
iconSize: PropTypes.oneOf(['default', 'lg']),

I believe we should use the size names from other components to match convention there, let me know if I'm off 👍

/**
* Specify whether or not to use the light component variant
*/
Expand Down Expand Up @@ -343,6 +350,31 @@ Tab.propTypes = {
renderButton: PropTypes.func,
};

const IconTab = React.forwardRef(function IconTab(
{ children, className: customClassName, ...rest },
ref
) {
const prefix = usePrefix();

const classNames = cx(`${prefix}--tabs__nav-item--icon`, customClassName);
return (
<Tab className={classNames} ref={ref} {...rest}>
{children}
</Tab>
);
});

IconTab.propTypes = {
/**
* Provide an icon to be rendered inside of `IconTab` as the visual label for Tab.
*/
children: PropTypes.node,
/**
* Specify an optional className to be added to your Tab
*/
className: PropTypes.string,
};

const TabPanel = React.forwardRef(function TabPanel(
{ children, className: customClassName, ...rest },
forwardRef
Expand Down Expand Up @@ -407,7 +439,7 @@ TabPanels.propTypes = {
children: PropTypes.node,
};

export { Tabs, Tab, TabPanel, TabPanels, TabList };
export { Tabs, Tab, IconTab, TabPanel, TabPanels, TabList };

// TO DO: implement horizontal scroll and the following props:
// leftOverflowButtonProps
Expand Down
48 changes: 38 additions & 10 deletions packages/react/src/components/Tabs/next/Tabs.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,18 @@
*/

import React from 'react';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from './Tabs';
import { Tabs, TabList, Tab, TabPanels, TabPanel, IconTab } from './Tabs';
import Button from '../../Button';

import TabsSkeleton from './Tabs.Skeleton';
import { Monster20, Corn20, Bat20 } from '@carbon/icons-react';
import {
Monster20,
Corn20,
Bat20,
Monster16,
Corn16,
Bat16,
} from '@carbon/icons-react';

import { unstable_FeatureFlags as FeatureFlags } from 'carbon-components-react';

Expand Down Expand Up @@ -55,18 +62,39 @@ export const Default = () => (
</Tabs>
);

export const IconOnly = () => (
export const Icon20Only = () => (
<Tabs>
<TabList aria-label="List of tabs">
<Tab disabled>
<TabList iconSize="20" aria-label="List of tabs">
<IconTab disabled>
<Monster20 />
</Tab>
<Tab>
</IconTab>
<IconTab>
<Corn20 />
</Tab>
<Tab>
</IconTab>
<IconTab>
<Bat20 />
</Tab>
</IconTab>
</TabList>
<TabPanels>
<TabPanel>Tab Panel 1</TabPanel>
<TabPanel>Tab Panel 2</TabPanel>
<TabPanel>Tab Panel 3</TabPanel>
</TabPanels>
</Tabs>
);

export const IconOnly = () => (
<Tabs>
<TabList iconSize="16" aria-label="List of tabs">
<IconTab disabled>
<Monster16 />
</IconTab>
<IconTab>
<Corn16 />
</IconTab>
<IconTab>
<Bat16 />
</IconTab>
</TabList>
<TabPanels>
<TabPanel>Tab Panel 1</TabPanel>
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,7 @@ export {
TabPanel as unstable_TabPanel,
TabPanels as unstable_TabPanels,
TabList as unstable_TabList,
IconTab as unstable_IconTab,
} from './components/Tabs';
export { usePrefix as unstable_usePrefix } from './internal/usePrefix';
export {
Expand Down
20 changes: 20 additions & 0 deletions packages/styles/scss/components/tabs/_tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,15 @@
@use '../../utilities/rotate' as *;
@use '../../utilities/box-shadow' as *;
@use '../../utilities/component-tokens' as *;
@use '../../utilities/custom-property';
@use '../../utilities/skeleton' as *;
@use '../../utilities/visually-hidden' as *;
@use '../../utilities/button-reset';
@use '../../utilities/high-contrast-mode' as *;
@use '../../utilities/convert' as *;

$icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));

/// Tabs styles
/// @access public
/// @group tabs
Expand Down Expand Up @@ -244,6 +247,23 @@
text-align: left;
}

//-----------------------------
// Icon Item
//-----------------------------

.#{$prefix}--tabs__nav-item--icon {
display: flex;
width: $icon-tab-size;
height: $icon-tab-size;
align-items: center;
justify-content: center;
padding: 0;
}

&.#{$prefix}--tabs__icon--lg {
@include custom-property.declaration('icon-tab-size', rem(48px));
}

//-----------------------------
// Item Hover
//-----------------------------
Expand Down