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

fix(tabs): match default spacing to spec #4487

Merged
merged 8 commits into from
Nov 19, 2019
Merged

fix(tabs): match default spacing to spec #4487

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
05f618f
docs(tabs): adjust alignment
emyarod Oct 29, 2019
920c8f5
fix(tabs): match default spacing to spec
emyarod Nov 1, 2019
9977487
docs(tabs): update docs examples
emyarod Nov 1, 2019
901246f
docs(Tabs): add Carbon tab content class to render prop example
emyarod Nov 8, 2019
2c8bd50
docs(Tabs): remove fixed tabs inline padding style
emyarod Nov 8, 2019
32a71d7
docs(tabs): match React story markup
emyarod Nov 8, 2019
efb4f2e
Merge branch 'master' into 4437-tabs-spacing-and-type
joshblack Nov 18, 2019
39f817d
Merge branch 'master' into 4437-tabs-spacing-and-type
asudoh Nov 19, 2019
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
9 changes: 2 additions & 7 deletions packages/components/demo/js/components/ComponentExample/component-overrides.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,20 +151,15 @@
margin-right: 0;
}

& .tabs {
& > div {
.tabs {
> div {
min-width: 100%;

@include breakpoint('42rem') {
min-width: 720px;
}
}

.bx--tabs + div {
Copy link
Contributor

Choose a reason for hiding this comment

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

Would we want to keep this in but add a note to remove in v11? This seems like it could break certain layouts that may rely on this behavior currently.

Copy link
Member Author

Choose a reason for hiding this comment

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

this should be demo only code, unless you are referring to something else?

padding: 0 !important;
margin-top: 2rem;
}

.bx--tabs.bx--tabs--fixed + div {
margin-top: 0;
}
Expand Down
7 changes: 7 additions & 0 deletions packages/components/src/components/tabs/_tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -397,6 +397,13 @@
color: $text-02;
}

//-----------------------------
// Tab Content Container
//-----------------------------
.#{$prefix}--tab-content {
padding: $carbon--spacing-05;
}

//-----------------------------
// Skeleton state
//-----------------------------
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/components/tabs/tabs.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@
</ul>
</div>
<!-- The markup below is for demonstration purposes only -->
<div>
<div class="{{@root.prefix}}--tab-content">
{{#each items}}
<div id="{{panelId}}" class="{{panelClass}}" role="tabpanel" aria-labelledby="{{linkId}}"
aria-hidden="{{not selected}}" {{#if (not selected)}} hidden{{/if}}>
<p style="padding: 0 1rem; font-size: 14px; font-weight: 600;">{{panelContent}}</p>
<div>{{panelContent}}</div>
</div>
{{/each}}
</div>
</div>
21 changes: 18 additions & 3 deletions packages/react/src/components/TabContent/TabContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,33 @@

import PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
import { settings } from 'carbon-components';

const TabContent = props => {
const { selected, children, ...other } = props;
const { prefix } = settings;

const TabContent = props => {
const { className, selected, children, ...other } = props;
const tabContentClasses = classNames(`${prefix}--tab-content`, {
[className]: className,
});
return (
<div {...other} selected={selected} hidden={!selected}>
<div
{...other}
className={tabContentClasses}
selected={selected}
hidden={!selected}>
{children}
</div>
);
};

TabContent.propTypes = {
/**
* Provide a className for the tab content container
*/
className: PropTypes.string,

/**
* Specify whether the TabContent is selected
*/
Expand Down
50 changes: 22 additions & 28 deletions packages/react/src/components/Tabs/Tabs-story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,15 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import './Tabs-story.scss';

import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
import { settings } from 'carbon-components';
import classNames from 'classnames';
import './Tabs-story.scss';
import Tabs from '../Tabs';
import Tab from '../Tab';
import TabsSkeleton from '../Tabs/Tabs.Skeleton';

const { prefix } = settings;
const props = {
tabs: () => ({
className: 'some-class',
Expand Down Expand Up @@ -49,9 +51,17 @@ const props = {

const CustomLabel = ({ text }) => <>{text}</>;

const TabContentRenderedOnlyWhenSelected = ({ selected, children, ...other }) =>
const TabContentRenderedOnlyWhenSelected = ({
selected,
children,
className,
...other
}) =>
!selected ? null : (
<div {...other} selected={selected}>
<div
{...other}
className={classNames(className, `${prefix}--tab-content`)}
selected={selected}>
{children}
</div>
);
Expand All @@ -63,27 +73,19 @@ storiesOf('Tabs', module)
() => (
<Tabs {...props.tabs()}>
<Tab {...props.tab()} label="Tab label 1">
<div className="some-content" style={{ paddingLeft: 16 }}>
Content for first tab goes here.
</div>
<div className="some-content">Content for first tab goes here.</div>
</Tab>
<Tab {...props.tab()} label="Tab label 2">
<div className="some-content" style={{ paddingLeft: 16 }}>
Content for second tab goes here.
</div>
<div className="some-content">Content for second tab goes here.</div>
</Tab>
<Tab
{...props.tab()}
label="Tab label 3"
renderContent={TabContentRenderedOnlyWhenSelected}>
<div className="some-content" style={{ paddingLeft: 16 }}>
Content for third tab goes here.
</div>
<div className="some-content">Content for third tab goes here.</div>
</Tab>
<Tab {...props.tab()} label={<CustomLabel text="Custom Label" />}>
<div className="some-content" style={{ paddingLeft: 16 }}>
Content for fourth tab goes here.
</div>
<div className="some-content">Content for fourth tab goes here.</div>
</Tab>
</Tabs>
),
Expand All @@ -101,27 +103,19 @@ storiesOf('Tabs', module)
() => (
<Tabs type="fixed" {...props.tabs()}>
<Tab {...props.tab()} label="Tab label 1">
<div className="some-content" style={{ paddingLeft: 16 }}>
Content for first tab goes here.
</div>
<div className="some-content">Content for first tab goes here.</div>
</Tab>
<Tab {...props.tab()} label="Tab label 2">
<div className="some-content" style={{ paddingLeft: 16 }}>
Content for second tab goes here.
</div>
<div className="some-content">Content for second tab goes here.</div>
</Tab>
<Tab
{...props.tab()}
label="Tab label 3"
renderContent={TabContentRenderedOnlyWhenSelected}>
<div className="some-content" style={{ paddingLeft: 16 }}>
Content for third tab goes here.
</div>
<div className="some-content">Content for third tab goes here.</div>
</Tab>
<Tab {...props.tab()} label={<CustomLabel text="Custom Label" />}>
<div className="some-content" style={{ paddingLeft: 16 }}>
Content for fourth tab goes here.
</div>
<div className="some-content">Content for fourth tab goes here.</div>
</Tab>
</Tabs>
),
Expand Down