Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Tabs): add no_border prop
Browse files Browse the repository at this point in the history
thaytharma committed Feb 8, 2022
1 parent b91e745 commit 2161f12
Showing 8 changed files with 49 additions and 1 deletion.
Original file line number Diff line number Diff line change
@@ -316,3 +316,19 @@ const MaxWidth = styled(Wrapper)`
}
} */
`
export const TabsNoBorder = () => (
<Wrapper>
<ComponentBox data-visual-test="tabs-no-border">
{() => /* jsx */ `
<Tabs no_border={true}>
<Tabs.Content title="First">
<H2 top={0} bottom>First</H2>
</Tabs.Content>
<Tabs.Content title="Second">
<H2 top={0} bottom>Second</H2>
</Tabs.Content>
</Tabs>
`}
</ComponentBox>
</Wrapper>
)
Original file line number Diff line number Diff line change
@@ -11,6 +11,7 @@ TabsExampleUsingData,
TabsExampleRightAligned,
TabsExampleReachRouterNavigation,
TabsExampleReactRouterNavigation,
TabsNoBorder,
} from 'Docs/uilib/components/tabs/Examples'

## Demos
@@ -61,6 +62,10 @@ But depending on your setup, you may have to align your Tabs all the way to the
}
```

### Tabs without bottom border

<TabsNoBorder />

### Router navigation with Reach Router

This demo uses `@reach/router`. More [examples on CodeSandbox](https://codesandbox.io/embed/8z8xov7xyj).
Original file line number Diff line number Diff line change
@@ -18,6 +18,7 @@ showTabs: true
| `prerender` | _(optional)_ if set to `true`, the Tabs content will pre-render all contents. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Defaults to `false`. |
| `prevent_rerender` | _(optional)_ if set to `true`, the Tabs content will stay in the DOM. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Similar to `prerender`, but in contrast, the content will render once the user is activating a tab. Defaults to `false`. |
| `scroll` | _(optional)_ if set to `true`, the content will scroll on tab change, until all tabs will be visible on the upper side of the browser window view. Defaults to `false`. |
| `no_border` | _(optional)_ if set to `true`, the default horizontal border line under the tablist will be removed. Defaults to `false`. |
| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. |
| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |

5 changes: 4 additions & 1 deletion packages/dnb-eufemia/src/components/tabs/Tabs.js
Original file line number Diff line number Diff line change
@@ -86,6 +86,7 @@ export default class Tabs extends React.PureComponent {
align: PropTypes.oneOf(['left', 'center', 'right']),
tabs_style: PropTypes.string,
tabs_spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
no_border: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
use_hash: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
prerender: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
prevent_rerender: PropTypes.oneOfType([
@@ -124,6 +125,7 @@ export default class Tabs extends React.PureComponent {
align: 'left',
tabs_style: null,
tabs_spacing: null,
no_border: false,
use_hash: false,
prerender: false,
prevent_rerender: false,
@@ -994,7 +996,7 @@ export default class Tabs extends React.PureComponent {
}

TabsListHandler = ({ children, className, ...rest }) => {
const { align, tabs_style, tabs_spacing } = this.props
const { align, tabs_style, tabs_spacing, no_border } = this.props
const { hasScrollbar, atEdge } = this.state

return (
@@ -1010,6 +1012,7 @@ export default class Tabs extends React.PureComponent {
: null,
hasScrollbar && 'dnb-tabs--has-scrollbar',
atEdge && 'dnb-tabs--at-edge',
no_border && 'dnb-tabs__tabs--no-border',
className
)}
ref={this._tabsRef}
Original file line number Diff line number Diff line change
@@ -47,6 +47,18 @@ describe('Tabs screenshot', () => {
})
expect(screenshot).toMatchImageSnapshot()
})

it('have to match tabs with no bottom border', async () => {
const screenshot = await testPageScreenshot({
style: {
width: '40rem',
height: '10rem',
padding: '0 2rem 4rem 2rem',
},
selector: '[data-visual-test="tabs-no-border"]',
})
expect(screenshot).toMatchImageSnapshot()
})
})

describe('Tabs screenshot', () => {
Original file line number Diff line number Diff line change
@@ -29,6 +29,7 @@ exports[`A single Tab component has to work with "Tabs.Content" from outside 1`]
}
id="linked"
label={null}
no_border={false}
on_change={null}
on_click={null}
on_focus={null}
@@ -551,6 +552,7 @@ exports[`Tabs component have to match snapshot 1`] = `
"data": "data",
"id": "id",
"label": "label",
"no_border": "no_border",
"on_change": [Function],
"on_click": [Function],
"on_focus": [Function],
@@ -608,6 +610,7 @@ exports[`Tabs component have to match snapshot 1`] = `
}
id="id"
label={null}
no_border={false}
on_change={null}
on_click={null}
on_focus={null}
@@ -1342,6 +1345,8 @@ exports[`Tabs scss have to match snapshot 1`] = `
bottom: 0;
width: 100vw;
height: 1px; }
.dnb-tabs__tabs--no-border::before {
content: none; }
.dnb-tabs:not(.dnb-tabs--has-scrollbar) .dnb-tabs__tabs__tablist {
margin-left: -0.5rem;
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions packages/dnb-eufemia/src/components/tabs/style/_tabs.scss
Original file line number Diff line number Diff line change
@@ -53,6 +53,12 @@
width: 100vw;
height: 1px;
}

&--no-border {
&::before {
content: none;
}
}
}

&:not(.dnb-tabs--has-scrollbar) &__tabs__tablist {

0 comments on commit 2161f12

Please sign in to comment.