-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Divider: add styles for `vertical` orientation * Divider: depracate top/bottom margin props in favour of logical start/end margin props * Divider: add Horizontal and Vertical storybook examples * Divider: update example code snippets * Divider: add Props section to README * CHANGELOG * Update snapshots * Remove black border-color override in Storybook * Use `currentColor` for the border color * Update snapshots * Update changelog * Fix comments * Delete deprecated marginTop|Bottom props * Divider: rewrite storybook examples using controls * Divider: add back `border: 0` reset * Update snapshots
- Loading branch information
Showing
9 changed files
with
164 additions
and
71 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,38 +1,64 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { number } from '@storybook/addon-knobs'; | ||
import { css } from '@emotion/react'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import { useCx } from '../../utils'; | ||
import { Text } from '../../text'; | ||
import { Divider } from '..'; | ||
|
||
export default { | ||
component: Divider, | ||
title: 'Components (Experimental)/Divider', | ||
parameters: { | ||
knobs: { disabled: false }, | ||
argTypes: { | ||
margin: { | ||
control: { type: 'number' }, | ||
}, | ||
marginStart: { | ||
control: { type: 'number' }, | ||
}, | ||
marginEnd: { | ||
control: { type: 'number' }, | ||
}, | ||
}, | ||
}; | ||
|
||
const BlackDivider = ( props ) => ( | ||
<Divider { ...props } style={ { borderColor: 'black' } } /> | ||
const HorizontalTemplate = ( args ) => ( | ||
<div> | ||
<Text>Some text before the divider</Text> | ||
<Divider { ...args } /> | ||
<Text>Some text after the divider</Text> | ||
</div> | ||
); | ||
|
||
export const _default = () => { | ||
const props = { | ||
margin: number( 'margin', 0 ), | ||
}; | ||
// make the border color black to give higher contrast and help it appear in storybook better | ||
return <BlackDivider { ...props } />; | ||
const VerticalTemplate = ( args ) => { | ||
const cx = useCx(); | ||
const wrapperClassName = cx( css` | ||
display: flex; | ||
align-items: stretch; | ||
justify-content: start; | ||
` ); | ||
|
||
return ( | ||
<div className={ wrapperClassName }> | ||
<Text>Some text before the divider</Text> | ||
<Divider orientation="vertical" { ...args } /> | ||
<Text>Some text after the divider</Text> | ||
</div> | ||
); | ||
}; | ||
|
||
export const splitMargins = () => { | ||
const props = { | ||
marginTop: number( 'marginTop', 0 ), | ||
marginBottom: number( 'marginBottom', 0 ), | ||
}; | ||
export const Horizontal = HorizontalTemplate.bind( {} ); | ||
Horizontal.args = { | ||
margin: 2, | ||
marginStart: undefined, | ||
marginEnd: undefined, | ||
}; | ||
|
||
return <BlackDivider { ...props } />; | ||
export const Vertical = VerticalTemplate.bind( {} ); | ||
Vertical.args = { | ||
...Horizontal.args, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters