diff --git a/packages/carbon-react/src/components/Dropdown/Dropdown.stories.js b/packages/carbon-react/src/components/Dropdown/Dropdown.stories.js
index 06fb5251c320..92ae3ab55f0d 100644
--- a/packages/carbon-react/src/components/Dropdown/Dropdown.stories.js
+++ b/packages/carbon-react/src/components/Dropdown/Dropdown.stories.js
@@ -7,6 +7,7 @@
import React from 'react';
import { Dropdown, DropdownSkeleton } from 'carbon-components-react';
+import { Layer } from '../Layer';
const items = [
{
@@ -73,6 +74,72 @@ export const Inline = () => (
);
+export const withLayer = () => (
+
+ (item ? item.text : '')}
+ />
+
+ (item ? item.text : '')}
+ />
+
+ (item ? item.text : '')}
+ />
+
+
+
+);
+
+export const InlineWithLayer = () => (
+
+ (item ? item.text : '')}
+ />
+
+ (item ? item.text : '')}
+ />
+
+ (item ? item.text : '')}
+ />
+
+
+
+);
+
export const Skeleton = () => (
diff --git a/packages/carbon-react/src/components/MultiSelect/MultiSelect.stories.js b/packages/carbon-react/src/components/MultiSelect/MultiSelect.stories.js
index 70b0afc23cb2..ee8df2d982fd 100644
--- a/packages/carbon-react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/carbon-react/src/components/MultiSelect/MultiSelect.stories.js
@@ -7,6 +7,7 @@
import React from 'react';
import { MultiSelect } from 'carbon-components-react';
+import { Layer } from '../Layer';
const items = [
{
@@ -94,3 +95,79 @@ export const _Filterable = () => {
);
};
+
+export const withLayer = () => {
+ return (
+
+ (item ? item.text : '')}
+ selectionFeedback="top-after-reopen"
+ />
+
+ (item ? item.text : '')}
+ selectionFeedback="top-after-reopen"
+ />
+
+ (item ? item.text : '')}
+ selectionFeedback="top-after-reopen"
+ />
+
+
+
+ );
+};
+
+export const _FilterableWithLayer = () => {
+ return (
+
+ (item ? item.text : '')}
+ placeholder="Filter"
+ selectionFeedback="top-after-reopen"
+ />
+
+ (item ? item.text : '')}
+ placeholder="Filter"
+ selectionFeedback="top-after-reopen"
+ />
+
+ (item ? item.text : '')}
+ placeholder="Filter"
+ selectionFeedback="top-after-reopen"
+ />
+
+
+
+ );
+};
diff --git a/packages/carbon-react/src/components/NumberInput/NumberInput.stories.js b/packages/carbon-react/src/components/NumberInput/NumberInput.stories.js
index b403c8622861..8109f350e78a 100644
--- a/packages/carbon-react/src/components/NumberInput/NumberInput.stories.js
+++ b/packages/carbon-react/src/components/NumberInput/NumberInput.stories.js
@@ -7,6 +7,7 @@
import React from 'react';
import { NumberInput, NumberInputSkeleton } from 'carbon-components-react';
+import { Layer } from '../Layer';
export default {
title: 'Components/NumberInput',
@@ -33,6 +34,20 @@ export const Default = () => {
return ;
};
+export const withLayer = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+ );
+};
+
export const Skeleton = () => (
diff --git a/packages/carbon-react/src/components/Overflow/OverflowMenu.stories.js b/packages/carbon-react/src/components/Overflow/OverflowMenu.stories.js
index 53d22796348d..b0b46cbf9538 100644
--- a/packages/carbon-react/src/components/Overflow/OverflowMenu.stories.js
+++ b/packages/carbon-react/src/components/Overflow/OverflowMenu.stories.js
@@ -7,6 +7,7 @@
import { OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
import React from 'react';
+import { Layer } from '../Layer';
export default {
title: 'Components/OverflowMenu',
@@ -23,3 +24,35 @@ export const Default = () => {
);
};
+
+export const withLayer = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/carbon-react/src/components/Search/Search.stories.js b/packages/carbon-react/src/components/Search/Search.stories.js
index aca667e6aa2e..a99ab03d57d0 100644
--- a/packages/carbon-react/src/components/Search/Search.stories.js
+++ b/packages/carbon-react/src/components/Search/Search.stories.js
@@ -7,6 +7,7 @@
import { Search, ExpandableSearch } from 'carbon-components-react';
import React from 'react';
+import { Layer } from '../Layer';
export default { title: 'Components/Search' };
@@ -32,3 +33,76 @@ export const Expandable = () => (
onKeyDown={() => {}}
/>
);
+
+export const withLayer = () => {
+ return (
+ <>
+
{}}
+ onKeyDown={() => {}}
+ />
+
+ {}}
+ onKeyDown={() => {}}
+ />
+
+ {}}
+ onKeyDown={() => {}}
+ />
+
+
+
+ );
+};
+
+export const ExpandableWithLayer = () => {
+ return (
+ <>
+ {}}
+ onKeyDown={() => {}}
+ />
+
+ {}}
+ onKeyDown={() => {}}
+ />
+
+ {}}
+ onKeyDown={() => {}}
+ />
+
+
+
+ );
+};
diff --git a/packages/carbon-react/src/components/Slider/Slider.stories.js b/packages/carbon-react/src/components/Slider/Slider.stories.js
index b968c3d39bc5..802a63d55843 100644
--- a/packages/carbon-react/src/components/Slider/Slider.stories.js
+++ b/packages/carbon-react/src/components/Slider/Slider.stories.js
@@ -11,6 +11,7 @@ import React, { useState } from 'react';
// import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
import { Slider, SliderSkeleton } from '.';
// import { sliderValuePropSync } from '../../../../react/src/internal/FeatureFlags';
+import { Layer } from '../Layer';
import mdx from './Slider.mdx';
export default {
@@ -63,4 +64,90 @@ export const ControlledSlider = () => {
);
};
+export const withLayer = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+ );
+};
+
+export const ControlledSliderWithLayer = () => {
+ const [val, setVal] = useState(87);
+ return (
+ <>
+
+ setVal(value)}
+ />
+ {val}
+
+
+ setVal(value)}
+ />
+ {val}
+
+
+ setVal(value)}
+ />
+ {val}
+
+
+
+ );
+};
+
export const Skeleton = () => ;
diff --git a/packages/carbon-react/src/components/Tabs/Tabs.stories.js b/packages/carbon-react/src/components/Tabs/Tabs.stories.js
index 08482fdb9108..1c04f224b089 100644
--- a/packages/carbon-react/src/components/Tabs/Tabs.stories.js
+++ b/packages/carbon-react/src/components/Tabs/Tabs.stories.js
@@ -7,6 +7,7 @@
import React from 'react';
import { Button, Tab, Tabs, TabsSkeleton } from '../Tabs';
+import { Layer } from '../Layer';
export default {
title: 'Components/Tabs',
@@ -42,3 +43,77 @@ export const Default = () => (
);
+
+export const withLayer = () => {
+ return (
+ <>
+
+
+ First Layer. Content for first tab goes here.
+
+
+ Content for second tab goes here.
+
+
+
+ Content for third tab goes here.
+
+
+ Content for fourth tab goes here.
+
+ Custom Label }>
+ Content for fifth tab goes here.
+
+
+
+
+
+ Second Layer. Content for first tab goes here.
+
+
+ Content for second tab goes here.
+
+
+
+ Content for third tab goes here.
+
+
+ Content for fourth tab goes here.
+
+ Custom Label}>
+ Content for fifth tab goes here.
+
+
+
+
+
+ Third Layer. Content for first tab goes here.
+
+
+ Content for second tab goes here.
+
+
+
+ Content for third tab goes here.
+
+
+ Content for fourth tab goes here.
+
+ Custom Label}>
+ Content for fifth tab goes here.
+
+
+
+
+
+ );
+};