This repository has been archived by the owner on May 24, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 167
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[terra-dropdown-button] Add support for icons in split button
- Loading branch information
Showing
24 changed files
with
376 additions
and
10 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
61 changes: 61 additions & 0 deletions
61
packages/terra-core-docs/src/terra-dev-site/doc/dropdown-button/example/IconSplitButton.jsx
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 |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import React from 'react'; | ||
import { Item, SplitButton } from 'terra-dropdown-button'; | ||
import { IconFeaturedOutlineYellow } from 'terra-icon'; | ||
|
||
import classNames from 'classnames/bind'; | ||
import styles from './IconSplitButton.module.scss'; | ||
|
||
const cx = classNames.bind(styles); | ||
|
||
const Example = () => { | ||
return ( | ||
<> | ||
<SplitButton | ||
primaryOptionLabel="Reply" | ||
icon={<IconFeaturedOutlineYellow />} | ||
onSelect={() => setMessage('Reply clicked')} | ||
buttonAttrs={{ | ||
'aria-label': 'icon split', | ||
}} | ||
className={cx('icon-button')} | ||
> | ||
<Item label="Reply All" onSelect={() => setMessage('Reply All clicked')} /> | ||
<Item label="Forward" onSelect={() => setMessage('Forward clicked')} /> | ||
<Item label="Reply in 10 minutes" onSelect={() => setMessage('Reply in 10 minutes clicked')} /> | ||
<Item label="Selective Reply" onSelect={() => setMessage('Selective Reply clicked')} /> | ||
</SplitButton> | ||
<SplitButton | ||
primaryOptionLabel="Reply" | ||
icon={<IconFeaturedOutlineYellow />} | ||
isReversed | ||
onSelect={() => setMessage('Reply clicked')} | ||
buttonAttrs={{ | ||
'aria-label': 'reverse icon split', | ||
}} | ||
className={cx('icon-button')} | ||
> | ||
<Item label="Reply All" onSelect={() => setMessage('Reply All clicked')} /> | ||
<Item label="Forward" onSelect={() => setMessage('Forward clicked')} /> | ||
<Item label="Reply in 10 minutes" onSelect={() => setMessage('Reply in 10 minutes clicked')} /> | ||
<Item label="Selective Reply" onSelect={() => setMessage('Selective Reply clicked')} /> | ||
</SplitButton> | ||
<SplitButton | ||
primaryOptionLabel="Reply" | ||
icon={<IconFeaturedOutlineYellow />} | ||
isIconOnly | ||
onSelect={() => setMessage('Reply clicked')} | ||
buttonAttrs={{ | ||
'aria-label': 'icon only split', | ||
}} | ||
className={cx('icon-button')} | ||
> | ||
<Item label="Reply All" onSelect={() => setMessage('Reply All clicked')} /> | ||
<Item label="Forward" onSelect={() => setMessage('Forward clicked')} /> | ||
<Item label="Reply in 10 minutes" onSelect={() => setMessage('Reply in 10 minutes clicked')} /> | ||
<Item label="Selective Reply" onSelect={() => setMessage('Selective Reply clicked')} /> | ||
</SplitButton> | ||
</> | ||
); | ||
}; | ||
|
||
export default Example; |
5 changes: 5 additions & 0 deletions
5
...erra-core-docs/src/terra-dev-site/doc/dropdown-button/example/IconSplitButton.module.scss
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 |
---|---|---|
@@ -0,0 +1,5 @@ | ||
:local { | ||
.icon-button { | ||
margin: 5px; | ||
} | ||
} |
34 changes: 34 additions & 0 deletions
34
...ages/terra-core-docs/src/terra-dev-site/test/dropdown-button/IconOnlySplitButton.test.jsx
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 |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import React, { useState } from 'react'; | ||
import classnames from 'classnames/bind'; | ||
import { SplitButton, Item } from 'terra-dropdown-button'; | ||
import { IconFeaturedOutlineYellow } from 'terra-icon'; | ||
import styles from './ExtraSpacing.module.scss'; | ||
|
||
const cx = classnames.bind(styles); | ||
|
||
const IconOnlySplitButton = () => { | ||
const [message, setMessage] = useState(' No option clicked'); | ||
|
||
return ( | ||
<div className={cx('container-spacing-wrapper')}> | ||
<SplitButton | ||
primaryOptionLabel="Split" | ||
icon={<IconFeaturedOutlineYellow />} | ||
isIconOnly | ||
metaData={{ key: 'primary-button' }} | ||
onSelect={(event, metaData) => { setMessage(` ${metaData.key}`); }} | ||
id="split" | ||
> | ||
<Item id="opt1" label="1st" metaData={{ key: '1st Option' }} onSelect={(event, metaData) => { setMessage(` ${metaData.key}`); }} /> | ||
<Item id="opt2" label="2nd" metaData={{ key: '2nd Option' }} onSelect={(event, metaData) => { setMessage(` ${metaData.key}`); }} /> | ||
<Item id="opt3" label="3rd" metaData={{ key: '3rd Option' }} onSelect={(event, metaData) => { setMessage(` ${metaData.key}`); }} /> | ||
</SplitButton> | ||
<p> | ||
MetaData of : | ||
{message} | ||
</p> | ||
</div> | ||
); | ||
}; | ||
|
||
export default IconOnlySplitButton; |
33 changes: 33 additions & 0 deletions
33
...ages/terra-core-docs/src/terra-dev-site/test/dropdown-button/LeftIconSplitButton.test.jsx
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 |
---|---|---|
@@ -0,0 +1,33 @@ | ||
import React, { useState } from 'react'; | ||
import classnames from 'classnames/bind'; | ||
import { SplitButton, Item } from 'terra-dropdown-button'; | ||
import { IconFeaturedOutlineYellow } from 'terra-icon'; | ||
import styles from './ExtraSpacing.module.scss'; | ||
|
||
const cx = classnames.bind(styles); | ||
|
||
const LeftIconSplitButton = () => { | ||
const [message, setMessage] = useState(' No option clicked'); | ||
|
||
return ( | ||
<div className={cx('container-spacing-wrapper')}> | ||
<SplitButton | ||
primaryOptionLabel="Split" | ||
icon={<IconFeaturedOutlineYellow />} | ||
metaData={{ key: 'primary-button' }} | ||
onSelect={(event, metaData) => { setMessage(` ${metaData.key}`); }} | ||
id="split" | ||
> | ||
<Item id="opt1" label="1st" metaData={{ key: '1st Option' }} onSelect={(event, metaData) => { setMessage(` ${metaData.key}`); }} /> | ||
<Item id="opt2" label="2nd" metaData={{ key: '2nd Option' }} onSelect={(event, metaData) => { setMessage(` ${metaData.key}`); }} /> | ||
<Item id="opt3" label="3rd" metaData={{ key: '3rd Option' }} onSelect={(event, metaData) => { setMessage(` ${metaData.key}`); }} /> | ||
</SplitButton> | ||
<p> | ||
MetaData of : | ||
{message} | ||
</p> | ||
</div> | ||
); | ||
}; | ||
|
||
export default LeftIconSplitButton; |
34 changes: 34 additions & 0 deletions
34
...ges/terra-core-docs/src/terra-dev-site/test/dropdown-button/RightIconSplitButton.test.jsx
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 |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import React, { useState } from 'react'; | ||
import classnames from 'classnames/bind'; | ||
import { SplitButton, Item } from 'terra-dropdown-button'; | ||
import { IconFeaturedOutlineYellow } from 'terra-icon'; | ||
import styles from './ExtraSpacing.module.scss'; | ||
|
||
const cx = classnames.bind(styles); | ||
|
||
const RightIconSplitButton = () => { | ||
const [message, setMessage] = useState(' No option clicked'); | ||
|
||
return ( | ||
<div className={cx('container-spacing-wrapper')}> | ||
<SplitButton | ||
primaryOptionLabel="Split" | ||
icon={<IconFeaturedOutlineYellow />} | ||
isReversed | ||
metaData={{ key: 'primary-button' }} | ||
onSelect={(event, metaData) => { setMessage(` ${metaData.key}`); }} | ||
id="split" | ||
> | ||
<Item id="opt1" label="1st" metaData={{ key: '1st Option' }} onSelect={(event, metaData) => { setMessage(` ${metaData.key}`); }} /> | ||
<Item id="opt2" label="2nd" metaData={{ key: '2nd Option' }} onSelect={(event, metaData) => { setMessage(` ${metaData.key}`); }} /> | ||
<Item id="opt3" label="3rd" metaData={{ key: '3rd Option' }} onSelect={(event, metaData) => { setMessage(` ${metaData.key}`); }} /> | ||
</SplitButton> | ||
<p> | ||
MetaData of : | ||
{message} | ||
</p> | ||
</div> | ||
); | ||
}; | ||
|
||
export default RightIconSplitButton; |
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 |
---|---|---|
|
@@ -57,5 +57,8 @@ | |
"LICENSE", | ||
"NOTICE", | ||
"README.md" | ||
] | ||
], | ||
"devDependencies": { | ||
"terra-icon": "^3.60.0" | ||
} | ||
} |
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
Oops, something went wrong.