From d002f2cada9a31d1923e6507d2015a06b751be71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Wed, 26 Jan 2022 21:26:36 +0100 Subject: [PATCH] feat(Tabs): Enhance parent width handling and remove auto edge detection --- .../docs/uilib/components/tabs/Examples.js | 153 ++++---- .../src/docs/uilib/components/tabs/demos.md | 31 +- .../docs/uilib/components/tabs/properties.md | 27 +- .../dnb-eufemia/src/components/tabs/Tabs.js | 346 ++++++++---------- .../tabs/__tests__/Tabs.screenshot.test.js | 18 +- .../components/tabs/stories/Tabs.stories.js | 100 ++++- .../src/components/tabs/style/_tabs.scss | 143 +++++--- 7 files changed, 472 insertions(+), 346 deletions(-) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/Examples.js index d1c0186aeab..82ac6f48563 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/Examples.js +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/Examples.js @@ -98,7 +98,7 @@ export const TabsExampleUsingData = () => ( ) export const TabsExampleScrollable = () => ( - + ( `} - + ) export const TabsExampleLeftAligned = () => ( @@ -129,56 +129,97 @@ export const TabsExampleLeftAligned = () => ( ) -export class TabsExampleRightAligned extends React.PureComponent { - state = { activeTabKey: 'second' } - openTab = ({ key }) => { - this.setState({ - activeTabKey: key, - }) - } - isActive(tabKey) { - return this.state.activeTabKey === tabKey - } +export const TabsExampleHorizontalAligned = () => ( + + {() => /* jsx */ ` - render() { - const { activeTabKey } = this.state - const openTab = this.openTab - return ( - - - {() => /* jsx */ ` - { +const FlexWrapper = styled.div\` + display: flex; + flex-direction: row; +\` + +const MaxWidthWrapper = styled.div\` + max-width: 30rem; + background: var(--color-mint-green-12); +\` + +const LeftArea = styled.div\` + /* Ensure no-wrap */ + flex-shrink: 0; +\` +const RightArea = styled.div\` + /* Ensure the tabbar is hidden outside this area */ + overflow: hidden; + + /* Ensure the focus ring is visible! (because of overflow: hidden) */ + margin: -2px; + padding: 2px; +\` + +function TabsHorizontalAligned() { return ( - - - - Active: {activeTabKey} - - - - - + + + + + + + + + + + + ) - }} -> - { exampleContent /* See Example Content below */ } - +} + +render() `} - - - ) - } + +) + +export const TabsExampleMaxWidth = () => ( + + {() => /* jsx */ ` + +const MaxWidthWrapper = styled.div\` + max-width: 30rem; + background: var(--color-mint-green-12); +\` + +function TabsMaxWidth() { + return ( + + + + ) } +render() +`} + +) + export const TabsExampleReactRouterNavigation = () => typeof window === 'undefined' ? null : ( @@ -275,12 +316,6 @@ const exampleContent = { fourth: 'Fourth as a string only', } -const data = [ - { title: 'First', key: 'first' }, - { title: 'Second', key: 'second' }, - { title: 'Third', key: 'third', disabled: true }, - { title: 'Fourth', key: 'fourth' }, -] const manyTabs = [ { title: 'First', key: 'first' }, { title: 'Second', key: 'second' }, @@ -304,18 +339,6 @@ const Wrapper = styled.div` } ` -// The example has a `max-width` of 60rem. -const MaxWidth = styled(Wrapper)` - /* @media screen and (max-width: 40em) { - NB: Now this gets handled automatically - .dnb-tabs .dnb-tabs__tabs { - margin: 0 -4rem; - } - .dnb-tabs .dnb-tabs__tabs__tablist { - padding: 0 4rem; - } - } */ -` export const TabsNoBorder = () => ( @@ -331,4 +354,4 @@ export const TabsNoBorder = () => ( `} -) \ No newline at end of file +) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/demos.md index 0156d342d8c..b0e76a49dac 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/demos.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/demos.md @@ -8,7 +8,8 @@ TabsExampleContentObject, TabsExampleScrollable, TabsExampleLeftAligned, TabsExampleUsingData, -TabsExampleRightAligned, +TabsExampleHorizontalAligned, +TabsExampleMaxWidth, TabsExampleReachRouterNavigation, TabsExampleReactRouterNavigation, TabsNoBorder, @@ -40,31 +41,23 @@ Also, this is an example of how to define a different content background color, -### Right aligned tabs +### Tabs without bottom border + + - +### Tabs optimized for narrow screens -### Tabs optimized for mobile +Navigation buttons will be shown and the tabs-list will be scrollable. -**Notes about the mobile view:** The Tabs component does automatically calculate the remaining spacing once the screen gets under `40em` in width. -But depending on your setup, you may have to align your Tabs all the way to the edge of the browser window. E.g. with a negative margin: - -```css -@media screen and (min-width: 40em) { - .dnb-tabs .dnb-tabs__tabs { - margin: 0 -2rem; - } - .dnb-tabs .dnb-tabs__tabs__tablist { - padding: 0 2rem; - } -} -``` +### Horizontal aligned tabs -### Tabs without bottom border + - +### max-width usage + + ### Router navigation with Reach Router diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/properties.md index 8f9e818744a..9db5ee9bdc2 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/properties.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/tabs/properties.md @@ -4,23 +4,24 @@ showTabs: true ## Properties -| Properties | Description | -| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `selected_key` | _(optional)_ in case one of the tabs should be opened by a `key`. | -| `align` | _(optional)_ to align the tab list on the right side `align="right"`. Default to `left`. | -| `content_style` | _(optional)_ to enable the visual helper `.dnb-section` on to the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`. | +| Properties | Description | +| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `selected_key` | _(optional)_ in case one of the tabs should be opened by a `key`. | +| `align` | _(optional)_ to align the tab list on the right side `align="right"`. Default to `left`. | +| `content_style` | _(optional)_ to enable the visual helper `.dnb-section` on to the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`. | | `content_spacing` | _(optional)_ to modify the `spacing` onto the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `true`. | -| `tabs_style` | _(optional)_ to enable the visual helper `.dnb-section` inside the tabs list. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`. | +| `tabs_style` | _(optional)_ to enable the visual helper `.dnb-section` inside the tabs list. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`. | | `tabs_spacing` | _(optional)_ to modify the `spacing` inside the tab list. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `false`. | -| `tab_element` | _(optional)_ define what HTML element should be used. You can provide e.g. `tab_element={GatsbyLink}` – you may then provide the `to` property inside every entry (`data={[{ to: 'url', ... }]}`). Defaults to `