Skip to content

Commit

Permalink
Merge pull request #495 from influxdata/disabled-dropdown-items
Browse files Browse the repository at this point in the history 
Add optional "disabled" prop to DropdownItem
  • Loading branch information
@alexpaxton
alexpaxton authored Apr 30, 2020
2 parents 68c7ecf + 37957f0 commit 9e57eef
Show file tree
Hide file tree
Showing 5 changed files with 152 additions and 189 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
#### 2.1.1 (Unreleased)

- [#497](https://github.com/influxdata/clockface/pull/497): Add `CATLinkButton` component as composed variant of `LinkButton`
- [#496](https://github.com/influxdata/clockface/pull/496): Add optional `htmlFor` prop to `FormElement` and `FormValidationElement` that, if true, will render the components with `<label />` instead of `<div />`
- [#496](https://github.com/influxdata/clockface/pull/496): Add optional `htmlFor` prop to `FormElement` and `FormValidationElement` that, if true, will render the components with `<label />` instead of `<div />`
- [#495](https://github.com/influxdata/clockface/pull/495): Add optional `disabled` prop to `DropdownItem` and `DropdownLinkItem`
- [#493](https://github.com/influxdata/clockface/pull/493): Add testIDs to `Notification` dismiss button and child wrapper for easy testing

#### 2.1.0 [2020-04-16]
Expand Down
304 changes: 119 additions & 185 deletions src/Components/Dropdowns/Documentation/Dropdowns.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,7 @@ dropdownFamilyStories.add(
select('type', mapEnumKeys(DropdownItemType), 'None')
]
}
disabled={boolean('disabled', false)}
>
{text('children (text)', 'I am a dropdown item!')}
</Dropdown.Item>
Expand Down Expand Up @@ -293,6 +294,7 @@ dropdownFamilyStories.add(
select('type', mapEnumKeys(DropdownItemType), 'None')
]
}
disabled={boolean('disabled', false)}
>
<a
href={text('link target', 'http://www.influxdata.com')}
Expand All @@ -314,6 +316,11 @@ dropdownFamilyStories.add(
}
)

interface ExampleDropdownItem {
type: 'item' | 'divider'
text: string
}

dropdownFamilyStories.add(
'DropdownMenu',
() => {
Expand All @@ -329,194 +336,121 @@ dropdownFamilyStories.add(
/* eslint-enable */
}

const exampleItems: ExampleDropdownItem[] = [
{
type: 'divider',
text: 'Domestic Fruits',
},
{
type: 'item',
text: 'Banana',
},
{
type: 'item',
text: 'Kiwi',
},
{
type: 'item',
text: 'Lemon',
},
{
type: 'item',
text: 'Apple',
},
{
type: 'item',
text: 'Orange',
},
{
type: 'item',
text: 'Grapefruit',
},
{
type: 'item',
text: 'Pear',
},
{
type: 'divider',
text: 'Imported Fruits',
},
{
type: 'item',
text: 'Dragonfruit',
},
{
type: 'item',
text: 'Yuzu',
},
{
type: 'item',
text: 'Mango',
},
{
type: 'item',
text: 'Lychee',
},
{
type: 'item',
text: 'Passionfruit',
},
{
type: 'item',
text: 'Guava',
},
{
type: 'divider',
text: 'Testing Only',
},
{
type: 'item',
text: 'This dropdown item text is much longer to test text wrapping',
},
]

const selectedItems = array('Selected Items', ['Yuzu', 'Banana'])
const disabledItems = array('Disabled Items', ['Passionfruit'])

const menuStyle = {width: '250px'}

return (
<div className="story--example">
<div style={{width: '200px'}}>
<Dropdown.Menu
ref={dropdownMenuRef}
contentsRef={dropdownMenuContentsRef}
theme={
DropdownMenuTheme[
select('theme', mapEnumKeys(DropdownMenuTheme), 'Onyx')
]
<Dropdown.Menu
ref={dropdownMenuRef}
style={object('style', menuStyle)}
contentsRef={dropdownMenuContentsRef}
theme={
DropdownMenuTheme[
select('theme', mapEnumKeys(DropdownMenuTheme), 'Onyx')
]
}
maxHeight={number('maxHeight', 250)}
noScrollX={boolean('noScrollX', true)}
noScrollY={boolean('noScrollY', false)}
scrollToSelected={boolean('scrollToSelected', true)}
>
{exampleItems.map(item => {
if (item.type === 'divider') {
return <Dropdown.Divider key={item.text} text={item.text} />
}
maxHeight={number('maxHeight', 250)}
noScrollX={boolean('noScrollX', true)}
noScrollY={boolean('noScrollY', false)}
scrollToSelected={boolean('scrollToSelected', true)}
>
<Dropdown.Divider text="Domestic Fruits" />
<Dropdown.Item
wrapText={boolean('item wrapText', false)}
value="Banana"
selected={false}
type={
DropdownItemType[
select('item type', mapEnumKeys(DropdownItemType), 'None')
]
}
>
Banana
</Dropdown.Item>
<Dropdown.Item
wrapText={boolean('item wrapText', false)}
value="Kiwi"
selected={true}
type={
DropdownItemType[
select('item type', mapEnumKeys(DropdownItemType), 'None')
]
}
>
Kiwi
</Dropdown.Item>
<Dropdown.Item
wrapText={boolean('item wrapText', false)}
value="Lemon"
selected={false}
type={
DropdownItemType[
select('item type', mapEnumKeys(DropdownItemType), 'None')
]
}
>
Lemon
</Dropdown.Item>
<Dropdown.Item
wrapText={boolean('item wrapText', false)}
value="custom"
selected={false}
type={
DropdownItemType[
select('item type', mapEnumKeys(DropdownItemType), 'None')
]
}
>
This dropdown item text is much longer to test text wrapping
</Dropdown.Item>
<Dropdown.Item
wrapText={boolean('item wrapText', false)}
value="Apple"
selected={false}
type={
DropdownItemType[
select('item type', mapEnumKeys(DropdownItemType), 'None')
]
}
>
Apple
</Dropdown.Item>
<Dropdown.Item
wrapText={boolean('item wrapText', false)}
value="Orange"
selected={false}
type={
DropdownItemType[
select('item type', mapEnumKeys(DropdownItemType), 'None')
]
}
>
Orange
</Dropdown.Item>
<Dropdown.Item
wrapText={boolean('item wrapText', false)}
value="Grapefruit"
selected={false}
type={
DropdownItemType[
select('item type', mapEnumKeys(DropdownItemType), 'None')
]
}
>
Grapefruit
</Dropdown.Item>
<Dropdown.Item
wrapText={boolean('item wrapText', false)}
value="Pear"
selected={false}
type={
DropdownItemType[
select('item type', mapEnumKeys(DropdownItemType), 'None')
]
}
>
Pear
</Dropdown.Item>
<Dropdown.Divider text="Imported Fruits" />
<Dropdown.Item
wrapText={boolean('item wrapText', false)}
value="Dragonfruit"
selected={false}
type={
DropdownItemType[
select('item type', mapEnumKeys(DropdownItemType), 'None')
]
}
>
Dragonfruit
</Dropdown.Item>
<Dropdown.Item
wrapText={boolean('item wrapText', false)}
value="Yuzu"
selected={false}
type={
DropdownItemType[
select('item type', mapEnumKeys(DropdownItemType), 'None')
]
}
>
Yuzu
</Dropdown.Item>
<Dropdown.Item
wrapText={boolean('item wrapText', false)}
value="Mango"
selected={false}
type={
DropdownItemType[
select('item type', mapEnumKeys(DropdownItemType), 'None')
]
}
>
Mango
</Dropdown.Item>
<Dropdown.Item
wrapText={boolean('item wrapText', false)}
value="Lychee"
selected={false}
type={
DropdownItemType[
select('item type', mapEnumKeys(DropdownItemType), 'None')
]
}
>
Lychee
</Dropdown.Item>
<Dropdown.Item
wrapText={boolean('item wrapText', false)}
value="Passionfruit"
selected={false}
type={
DropdownItemType[
select('item type', mapEnumKeys(DropdownItemType), 'None')
]
}
>
Passionfruit
</Dropdown.Item>
<Dropdown.Item
wrapText={boolean('item wrapText', false)}
value="Guava"
selected={false}
type={
DropdownItemType[
select('item type', mapEnumKeys(DropdownItemType), 'None')
]
}
>
Guava
</Dropdown.Item>
</Dropdown.Menu>
</div>

return (
<Dropdown.Item
key={item.text}
wrapText={boolean('item wrapText', false)}
value={item.text}
selected={selectedItems.includes(item.text)}
disabled={disabledItems.includes(item.text)}
type={
DropdownItemType[
select('item type', mapEnumKeys(DropdownItemType), 'None')
]
}
>
{item.text}
</Dropdown.Item>
)
})}
</Dropdown.Menu>
<div className="story--test-buttons">
<button onClick={logRef}>Log Ref</button>
</div>
Expand Down
24 changes: 22 additions & 2 deletions src/Components/Dropdowns/Dropdown.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,23 @@ $dropdown-item--padding-v: $cf-marg-a + $cf-border;
}
}

/*
Dropdown Item (Disabled State)
------------------------------------------------------------------------------
*/

.cf-dropdown-item__disabled,
.cf-dropdown-item__disabled:hover,
.cf-dropdown-link-item.cf-dropdown-item__disabled a,
.cf-dropdown-link-item.cf-dropdown-item__disabled a:link,
.cf-dropdown-link-item.cf-dropdown-item__disabled a:visited,
.cf-dropdown-link-item.cf-dropdown-item__disabled a:active,
.cf-dropdown-link-item.cf-dropdown-item__disabled a:hover {
color: rgba($g20-white, 0.45);
font-style: italic;
cursor: default;
}

/*
Dropdown Empty Item
------------------------------------------------------------------------------
Expand Down Expand Up @@ -242,8 +259,8 @@ $dropdown-item--padding-v: $cf-marg-a + $cf-border;
) {
@include gradient-h($backgroundA, $backgroundB);

.cf-dropdown-item:hover,
.cf-dropdown-item.active {
.cf-dropdown-item:not(.cf-dropdown-item__disabled):hover,
.cf-dropdown-item.active:not(.cf-dropdown-item__disabled) {
@include gradient-h($hoverA, $hoverB);
}
.cf-dropdown-divider {
Expand All @@ -253,6 +270,9 @@ $dropdown-item--padding-v: $cf-marg-a + $cf-border;
.cf-dropdown-item--checkbox {
background-color: $dividerA;
}
.cf-dropdown-item__disabled .cf-dropdown-item--checkbox {
background-color: mix($backgroundA, $dividerA);
}
.cf-dropdown-item--checkbox:after {
background-color: $checkbox;
}
Expand Down
Loading

0 comments on commit 9e57eef

Please # to comment.