-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Split Button - initial concept. Includes Docs update. (#1193)
* Split Button - initial concept. Includes Docs update. Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * WIP SplitButton w/ Popover wrapper and dropdown list Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Style primary control w/ hairline separator Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Hairline Styling -- more Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Setup SplitButton doc Basic/States Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Convert SplitButton to React FC Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Set correct SplitButton doc Basic,States Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * SplitButton tests and updated docs Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Cleanup test and doc lint Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Changelog SplitButton Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Automate CSS Y-axis with buttons in tandem. Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * SplitButton handle keyboard control. Unify CSS automation. Allow onClick/href for each option item. Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * SplitButton popover correct keyboard interaction Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Border and hairline colors corrected. Popover styling and keyboard control corrected. Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * many many nits. code cleanup. propagate optional props into their target components recover Change Demo doc. Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * lint fixes and test cleanup. Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> * Copyright Headers Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com> --------- Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
- Loading branch information
1 parent
6ef0c94
commit eac077e
Showing
19 changed files
with
7,039 additions
and
41 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
/* | ||
* copyright opensearch contributors | ||
* spdx-license-identifier: apache-2.0 | ||
*/ | ||
|
||
import React from 'react'; | ||
|
||
import { OuiSplitButton } from '../../../../src/components'; | ||
|
||
export default () => { | ||
const options = [ | ||
{ id: '1', display: 'Option 1', href: '#' }, | ||
{ | ||
id: '2', | ||
display: 'Option 2', | ||
onClick: () => console.log('Option 2 clicked'), | ||
}, | ||
]; | ||
|
||
const primaryClick = () => console.log('Primary clicked'); | ||
|
||
return ( | ||
<OuiSplitButton options={options} onClick={primaryClick}> | ||
Basic Split Button | ||
</OuiSplitButton> | ||
); | ||
}; |
58 changes: 58 additions & 0 deletions
58
src-docs/src/views/split_button/split_button_change_demo.js
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,58 @@ | ||
/* | ||
* Copyright OpenSearch Contributors | ||
* SPDX-License-Identifier: Apache-2.0 | ||
*/ | ||
|
||
import React, { Fragment, useState } from 'react'; | ||
|
||
import { OuiSplitButton, OuiText } from '../../../../src/components'; | ||
|
||
export default () => { | ||
const [selectedIndex, setSelectedIndex] = useState(0); | ||
|
||
const options = [ | ||
{ | ||
display: ( | ||
<Fragment> | ||
<strong>Option one</strong> | ||
<OuiText disabled size="s" color="subdued"> | ||
Has a short description giving more detail to the option. | ||
</OuiText> | ||
</Fragment> | ||
), | ||
button: 'Option one', | ||
onClick: () => setSelectedIndex(0), | ||
onButtonClick: () => console.log('Option one clicked'), | ||
}, | ||
{ | ||
display: ( | ||
<Fragment> | ||
<strong>Option two</strong> | ||
<OuiText size="s" color="subdued"> | ||
Has a short description giving more detail to the option. | ||
</OuiText> | ||
</Fragment> | ||
), | ||
button: 'Option two', | ||
onClick: () => setSelectedIndex(1), | ||
onButtonClick: () => console.log('Option two clicked'), | ||
}, | ||
{ | ||
display: 'Just some Text', | ||
button: 'Option three', | ||
onClick: () => setSelectedIndex(2), | ||
onButtonClick: () => console.log('Option three clicked'), | ||
}, | ||
]; | ||
|
||
return ( | ||
<OuiSplitButton | ||
options={options} | ||
selectedIndex={selectedIndex} | ||
onClick={options[selectedIndex].onButtonClick} | ||
hasDividers | ||
optionProps={{ textAlign: 'left' }}> | ||
{options[selectedIndex].button} | ||
</OuiSplitButton> | ||
); | ||
}; |
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,49 @@ | ||
/* | ||
* Copyright OpenSearch Contributors | ||
* SPDX-License-Identifier: Apache-2.0 | ||
*/ | ||
|
||
import React, { Fragment } from 'react'; | ||
|
||
import { OuiSplitButton, OuiText } from '../../../../src/components'; | ||
|
||
export default () => { | ||
const options = [ | ||
{ | ||
display: ( | ||
<Fragment> | ||
<strong>Option one</strong> | ||
<OuiText disabled size="s" color="subdued"> | ||
Has a short description giving more detail to the option. | ||
</OuiText> | ||
</Fragment> | ||
), | ||
onClick: () => console.log('Option one clicked'), | ||
}, | ||
{ | ||
display: ( | ||
<Fragment> | ||
<strong>Option two</strong> | ||
<OuiText size="s" color="subdued"> | ||
Has a short description giving more detail to the option. | ||
</OuiText> | ||
</Fragment> | ||
), | ||
onClick: () => console.log('Option 2 clicked'), | ||
}, | ||
{ | ||
display: 'Just some Text', | ||
onClick: () => console.log('Option 3 Clicked'), | ||
}, | ||
]; | ||
|
||
return ( | ||
<OuiSplitButton | ||
options={options} | ||
selectedIndex={1} | ||
hasDividers | ||
optionProps={{ textAlign: 'left' }}> | ||
Complex Selections | ||
</OuiSplitButton> | ||
); | ||
}; |
Oops, something went wrong.