Skip to content

Commit

Permalink
fix(tabs): contained layer tokens (carbon-design-system#17215)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ariellalgilmore
ariellalgilmore authored Aug 22, 2024
1 parent b28a26d commit a773f2e
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 92 deletions.
201 changes: 113 additions & 88 deletions packages/react/src/components/Tabs/Tabs.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import RadioButtonGroup from '../RadioButtonGroup';
import RadioButton from '../RadioButton';
import { Stack } from '../Stack';
import { Grid, Column } from '../Grid';
import { Layer } from '../Layer';
import mdx from './Tabs.mdx';

import TabsSkeleton from './Tabs.Skeleton';
Expand Down Expand Up @@ -374,20 +375,22 @@ export const Contained = () => (
<TabPanels>
<TabPanel>Tab Panel 1</TabPanel>
<TabPanel>
<form style={{ margin: '2em' }}>
<legend className={`cds--label`}>Validation example</legend>
<Checkbox id="cb" labelText="Accept privacy policy" />
<Button
style={{ marginTop: '1rem', marginBottom: '1rem' }}
type="submit">
Submit
</Button>
<TextInput
type="text"
labelText="Text input label"
helperText="Optional help text"
/>
</form>
<Layer>
<form style={{ margin: '2em' }}>
<legend className={`cds--label`}>Validation example</legend>
<Checkbox id="cb" labelText="Accept privacy policy" />
<Button
style={{ marginTop: '1rem', marginBottom: '1rem' }}
type="submit">
Submit
</Button>
<TextInput
type="text"
labelText="Text input label"
helperText="Optional help text"
/>
</form>
</Layer>
</TabPanel>
<TabPanel>Tab Panel 3</TabPanel>
<TabPanel>Tab Panel 4</TabPanel>
Expand All @@ -410,20 +413,22 @@ export const ContainedWithIcons = () => (
<TabPanels>
<TabPanel>Tab Panel 1</TabPanel>
<TabPanel>
<form style={{ margin: '2em' }}>
<legend className={`cds--label`}>Validation example</legend>
<Checkbox id="cb" labelText="Accept privacy policy" />
<Button
style={{ marginTop: '1rem', marginBottom: '1rem' }}
type="submit">
Submit
</Button>
<TextInput
type="text"
labelText="Text input label"
helperText="Optional help text"
/>
</form>
<Layer>
<form style={{ margin: '2em' }}>
<legend className={`cds--label`}>Validation example</legend>
<Checkbox id="cb" labelText="Accept privacy policy" />
<Button
style={{ marginTop: '1rem', marginBottom: '1rem' }}
type="submit">
Submit
</Button>
<TextInput
type="text"
labelText="Text input label"
helperText="Optional help text"
/>
</form>
</Layer>
</TabPanel>
<TabPanel>Tab Panel 3</TabPanel>
<TabPanel>Tab Panel 4</TabPanel>
Expand All @@ -446,20 +451,22 @@ export const ContainedWithSecondaryLabels = () => (
<TabPanels>
<TabPanel>Tab Panel 1</TabPanel>
<TabPanel>
<form style={{ margin: '2em' }}>
<legend className={`cds--label`}>Validation example</legend>
<Checkbox id="cb" labelText="Accept privacy policy" />
<Button
style={{ marginTop: '1rem', marginBottom: '1rem' }}
type="submit">
Submit
</Button>
<TextInput
type="text"
labelText="Text input label"
helperText="Optional help text"
/>
</form>
<Layer>
<form style={{ margin: '2em' }}>
<legend className={`cds--label`}>Validation example</legend>
<Checkbox id="cb" labelText="Accept privacy policy" />
<Button
style={{ marginTop: '1rem', marginBottom: '1rem' }}
type="submit">
Submit
</Button>
<TextInput
type="text"
labelText="Text input label"
helperText="Optional help text"
/>
</form>
</Layer>
</TabPanel>
<TabPanel>Tab Panel 3</TabPanel>
<TabPanel>Tab Panel 4</TabPanel>
Expand Down Expand Up @@ -490,20 +497,22 @@ export const ContainedWithSecondaryLabelsAndIcons = () => (
<TabPanels>
<TabPanel>Tab Panel 1</TabPanel>
<TabPanel>
<form style={{ margin: '2em' }}>
<legend className={`cds--label`}>Validation example</legend>
<Checkbox id="cb" labelText="Accept privacy policy" />
<Button
style={{ marginTop: '1rem', marginBottom: '1rem' }}
type="submit">
Submit
</Button>
<TextInput
type="text"
labelText="Text input label"
helperText="Optional help text"
/>
</form>
<Layer>
<form style={{ margin: '2em' }}>
<legend className={`cds--label`}>Validation example</legend>
<Checkbox id="cb" labelText="Accept privacy policy" />
<Button
style={{ marginTop: '1rem', marginBottom: '1rem' }}
type="submit">
Submit
</Button>
<TextInput
type="text"
labelText="Text input label"
helperText="Optional help text"
/>
</form>
</Layer>
</TabPanel>
<TabPanel>Tab Panel 3</TabPanel>
<TabPanel>Tab Panel 4</TabPanel>
Expand All @@ -529,20 +538,22 @@ export const ContainedFullWidth = () => (
<TabPanels>
<TabPanel>Tab Panel 1</TabPanel>
<TabPanel>
<form>
<legend className={`cds--label`}>Validation example</legend>
<Checkbox id="cb" labelText="Accept privacy policy" />
<Button
style={{ marginTop: '1rem', marginBottom: '1rem' }}
type="submit">
Submit
</Button>
<TextInput
type="text"
labelText="Text input label"
helperText="Optional help text"
/>
</form>
<Layer>
<form style={{ margin: '2em' }}>
<legend className={`cds--label`}>Validation example</legend>
<Checkbox id="cb" labelText="Accept privacy policy" />
<Button
style={{ marginTop: '1rem', marginBottom: '1rem' }}
type="submit">
Submit
</Button>
<TextInput
type="text"
labelText="Text input label"
helperText="Optional help text"
/>
</form>
</Layer>
</TabPanel>
<TabPanel>Tab Panel 3</TabPanel>
<TabPanel>Tab Panel 4</TabPanel>
Expand Down Expand Up @@ -573,24 +584,38 @@ export const Vertical = ({ ...args }) => (
<TabPanels>
<TabPanel>Tab Panel 1</TabPanel>
<TabPanel>
<form style={{ margin: '2em' }}>
<Stack gap={7}>
<TextInput id="one" labelText="First Name" />
<TextInput id="three" labelText="Middle Initial" />
<TextInput id="two" labelText="Last Name" />
<RadioButtonGroup
legendText="Radio button heading"
name="formgroup-default-radio-button-group"
defaultSelected="radio-1">
<RadioButton labelText="Option 1" value="radio-1" id="radio-1" />
<RadioButton labelText="Option 2" value="radio-2" id="radio-2" />
<RadioButton labelText="Option 3" value="radio-3" id="radio-3" />
</RadioButtonGroup>
<Checkbox labelText={`Checkbox one`} id="checkbox-label-1" />
<Checkbox labelText={`Checkbox two`} id="checkbox-label-2" />
<Button>Submit</Button>
</Stack>
</form>
<Layer>
<form style={{ margin: '2em' }}>
<Stack gap={7}>
<TextInput id="one" labelText="First Name" />
<TextInput id="three" labelText="Middle Initial" />
<TextInput id="two" labelText="Last Name" />
<RadioButtonGroup
legendText="Radio button heading"
name="formgroup-default-radio-button-group"
defaultSelected="radio-1">
<RadioButton
labelText="Option 1"
value="radio-1"
id="radio-1"
/>
<RadioButton
labelText="Option 2"
value="radio-2"
id="radio-2"
/>
<RadioButton
labelText="Option 3"
value="radio-3"
id="radio-3"
/>
</RadioButtonGroup>
<Checkbox labelText={`Checkbox one`} id="checkbox-label-1" />
<Checkbox labelText={`Checkbox two`} id="checkbox-label-2" />
<Button>Submit</Button>
</Stack>
</form>
</Layer>
</TabPanel>
<TabPanel>Tab Panel 3</TabPanel>
<TabPanel>Tab Panel 4</TabPanel>
Expand Down
4 changes: 0 additions & 4 deletions packages/styles/scss/components/tabs/_tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -700,10 +700,6 @@

.#{$prefix}--tabs--contained ~ .#{$prefix}--tab-content {
background: $layer;

> * {
@include layer-tokens.emit-layer-tokens(2);
}
}

.#{$prefix}--tabs--vertical ~ .#{$prefix}--tab-content {
Expand Down

0 comments on commit a773f2e

Please sign in to comment.