Skip to content

Commit 7e24cee

Browse files
laraharrowLuke Bowerman
laraharrow
and
Luke Bowerman
authored
creating vertical Divider (#1335)
* creating vertical Divider * not quite working * Divider suppor orientation * update after review. * Divider vertial updated for position * fixing ts bug * Code review conversation notes * created DividerVertical component * update decs * updating tests * update after review * update after review * creating vertical Divider * not quite working * Divider suppor orientation * update after review. * Divider vertial updated for position * fixing ts bug * Code review conversation notes * created DividerVertical component * update decs * updating tests * update after review * update after review * updating esling error * es lint error fixes. * updates to fix lint:css * update after review Co-authored-by: Luke Bowerman <[email protected]>
1 parent ab4fde2 commit 7e24cee

File tree

8 files changed

+131
-11
lines changed

8 files changed

+131
-11
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
99

1010
### Added
1111

12-
- `Select` option icons
12+
-`DividerVertical` component
13+
1314
- Added `Lqa` icon artwork
15+
- `Select` option icons
1416

1517
### Fixed
1618

@@ -34,6 +36,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
3436

3537
### Added
3638

39+
- Divider now supports orientation.
3740
- "MenuItem`now supports`Tooltip`
3841
- `Tabs` updated for keyboard shortcut for accessibility
3942

‎packages/components/src/Divider/Divider.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,9 @@ export interface DividerProps
4040
extends CompatibleHTMLProps<HTMLHRElement>,
4141
PositionProps,
4242
SpaceProps {
43-
size?: string | number
44-
customColor?: string
4543
appearance?: 'default' | 'light' | 'dark' | 'onDark'
44+
customColor?: string
45+
size?: string | number
4646
}
4747

4848
const appearanceVariant = variant({
@@ -63,17 +63,21 @@ const appearanceVariant = variant({
6363
},
6464
})
6565

66-
export const Divider = styled.hr.attrs((props: DividerProps) => ({
66+
export const DividerBase = styled.hr.attrs((props: DividerProps) => ({
67+
appearance: props.appearance || 'default',
6768
bg: props.customColor,
69+
size: props.size || '1px',
6870
}))<DividerProps>`
6971
${reset}
7072
${position}
7173
${space}
7274
7375
border: none;
74-
height: ${(props) => props.size};
75-
width: 100%;
76-
${(props) => (props.customColor ? color : appearanceVariant)}
76+
77+
${({ customColor }) => (customColor ? color : appearanceVariant)}
7778
`
7879

79-
Divider.defaultProps = { appearance: 'default', size: '1px' }
80+
export const Divider = styled(DividerBase)`
81+
height: ${({ size }) => size};
82+
width: 100%;
83+
`

‎packages/components/src/Divider/DividerVertical.test.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/*
2+
3+
MIT License
4+
5+
Copyright (c) 2020 Looker Data Sciences, Inc.
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy
8+
of this software and associated documentation files (the "Software"), to deal
9+
in the Software without restriction, including without limitation the rights
10+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
copies of the Software, and to permit persons to whom the Software is
12+
furnished to do so, subject to the following conditions:
13+
14+
The above copyright notice and this permission notice shall be included in all
15+
copies or substantial portions of the Software.
16+
17+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23+
SOFTWARE.
24+
25+
*/
26+
27+
import 'jest-styled-components'
28+
import React from 'react'
29+
import { renderWithTheme } from '@looker/components-test-utils'
30+
import { DividerVertical } from './DividerVertical'
31+
32+
test('render Default DividerVertical', () => {
33+
const { getByTestId } = renderWithTheme(<DividerVertical />)
34+
expect(getByTestId('DividerVertical')).toBeInTheDocument()
35+
})

‎packages/components/src/Divider/DividerVertical.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/*
2+
3+
MIT License
4+
5+
Copyright (c) 2020 Looker Data Sciences, Inc.
6+
7+
Permission is hereby granted, free of charge, to any person obtaining a copy
8+
of this software and associated documentation files (the "Software"), to deal
9+
in the Software without restriction, including without limitation the rights
10+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
copies of the Software, and to permit persons to whom the Software is
12+
furnished to do so, subject to the following conditions:
13+
14+
The above copyright notice and this permission notice shall be included in all
15+
copies or substantial portions of the Software.
16+
17+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23+
SOFTWARE.
24+
25+
*/
26+
27+
import styled from 'styled-components'
28+
import { DividerBase, DividerProps } from './Divider'
29+
30+
export interface DividerVerticalProps extends DividerProps {
31+
height?: number | string
32+
stretch?: boolean
33+
}
34+
35+
export const DividerVertical = styled(DividerBase).attrs(
36+
(props: DividerVerticalProps) => {
37+
if (props.height && props.stretch) {
38+
// eslint-disable-next-line no-console
39+
console.warn(
40+
'When using DividerVertical, the props height and stretch are incompatible. The stretch value will be discarded'
41+
)
42+
}
43+
return { 'data-testid': 'DividerVertical', height: props.height || '1rem' }
44+
}
45+
)<DividerVerticalProps>`
46+
display: inline-block;
47+
margin-left: ${({ theme }) => theme.space.xsmall};
48+
margin-right: ${({ theme }) => theme.space.xsmall};
49+
width: ${({ size }) => size};
50+
${({ height, stretch }) =>
51+
stretch ? `align-self: stretch;` : `height: ${height};`}
52+
`

‎packages/components/src/Divider/__snapshots__/Divider.test.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
exports[`A custom Divider 1`] = `
44
.c0 {
55
border: none;
6+
background-color: turquoise;
67
height: 20px;
78
width: 100%;
8-
background-color: turquoise;
99
}
1010
1111
<hr
@@ -17,9 +17,9 @@ exports[`A custom Divider 1`] = `
1717
exports[`Default Divider 1`] = `
1818
.c0 {
1919
border: none;
20+
background-color: #C1C6CC;
2021
height: 1px;
2122
width: 100%;
22-
background-color: #C1C6CC;
2323
}
2424
2525
<hr
@@ -31,9 +31,9 @@ exports[`Default Divider 1`] = `
3131
exports[`Divider with a variant 1`] = `
3232
.c0 {
3333
border: none;
34+
background-color: #707781;
3435
height: 1px;
3536
width: 100%;
36-
background-color: #707781;
3737
}
3838
3939
<hr

‎packages/components/src/Divider/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,4 @@
2525
*/
2626

2727
export * from './Divider'
28+
export * from './DividerVertical'

‎www/src/MDX/Pre/allComponents.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ import {
6464
DialogHeader,
6565
DialogManager,
6666
Divider,
67+
DividerVertical,
6768
FieldCheckbox,
6869
FieldCheckboxGroup,
6970
FieldChips,
@@ -232,6 +233,7 @@ export const allComponents = {
232233
DialogHeader,
233234
DialogManager,
234235
Divider,
236+
DividerVertical,
235237
FieldCheckbox,
236238
FieldCheckboxGroup,
237239
FieldChips,

‎www/src/documentation/components/content/divider.mdx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,29 @@ There are three divider appearances `light`, `dark` and `onDark`.
4545
</Space>
4646
```
4747

48+
## DividerVertical
49+
50+
`<DividerVertical />` has a default height of 1rem. That can be changed by using the prop `height` or `stretch`. Do not use both props.
51+
52+
```jsx
53+
<Flex alignItems="center">
54+
<Icon name="Clock" />
55+
<DividerVertical/>
56+
<Text>2:45PM</Text>
57+
</Flex>
58+
<Flex alignItems="center">
59+
<Icon name="Clock" />
60+
<DividerVertical height="3rem"/>
61+
<Text>2:45PM</Text>
62+
</Flex>
63+
<Flex alignItems="center">
64+
<Icon name="Clock" size="xxlarge"/>
65+
<DividerVertical stretch/>
66+
<Text pl="large" fontSize="xxxxlarge">2:45PM</Text>
67+
</Flex>
68+
69+
```
70+
4871
## Custom Divider
4972

5073
You can adjust the dividers height and supply a custom color if needed

0 commit comments

Comments
 (0)