Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SelectDropdown: cleanup code and migrate CSS to webpack #35086

Merged
merged 29 commits into from
Aug 16, 2019
Merged

SelectDropdown: cleanup code and migrate CSS to webpack #35086

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
95ffe52
SelectDropdown: replace methods bound in constructor with arrow fns
jsnajdr Aug 1, 2019
552c6c3
SelectDropdown: instanceId doesn't need to be in state and be used fo…
jsnajdr Aug 1, 2019
688328a
SelectDropdown: remove props argument of getInitialSelectedItem
jsnajdr Aug 1, 2019
4deb266
SelectDropdown: comment and improve the getInitialSelectedItem logic
jsnajdr Aug 1, 2019
a1eb241
SelectDropdown: toggle visibility of dropdown with visibility: hidden
jsnajdr Aug 2, 2019
f0a736d
SelectDropdown: use arrow functions where appropriate
jsnajdr Aug 2, 2019
461cc13
SelectDropdown: use modern refs for focusing item links
jsnajdr Aug 2, 2019
9295655
SelectDropdown: replace string ref to dropdownContainer with modern one
jsnajdr Aug 2, 2019
e4b2f58
SelectDropdown: replace string itemRefs with modern ones
jsnajdr Aug 2, 2019
6f0f107
SelectDropdown: cloned children don't need a key
jsnajdr Aug 2, 2019
bd515ee
SelectDropdown: only DropdownItem children need to be cloned and amended
jsnajdr Aug 2, 2019
cf37742
SelectDropdown: ignore clicks on Label and Separator, add a11y role
jsnajdr Aug 2, 2019
55bfde9
SelectDropdown: simplify setting initial state
jsnajdr Aug 2, 2019
80c5256
SelectDropdown: remove unneeded componentWillReceiveProps
jsnajdr Aug 2, 2019
6f4a029
SelectDropdown: no need to look at initial selected item in getSelect…
jsnajdr Aug 2, 2019
1e34bbd
SelectDropdown: remove ESLint-offending and non-helpful JSDoc comment
jsnajdr Aug 2, 2019
25fa960
SelectDropdown: fix a11y issues by adding roles and correct ARIA attrs
jsnajdr Aug 2, 2019
b27fa72
SelectDropdown: use the classNames helper better
jsnajdr Aug 2, 2019
9132ff1
SelectDropdown: use Lodash noop for event handler defaults
jsnajdr Aug 2, 2019
fe294bc
SelectDropdown: reorg the code that moves focus, use fewer lodash funcs
jsnajdr Aug 2, 2019
e17e807
SelectDropdown: export Item, Separator and Label as main component fi…
jsnajdr Aug 2, 2019
e258936
SelectDropdown: rework docs and devdocs example to use the SelectDrop…
jsnajdr Aug 2, 2019
7012304
SelectDropdown: migrate CSS to webpack
jsnajdr Aug 2, 2019
72f9842
Update usages of SelectDropdown to use the SelectDropdown.Item conven…
jsnajdr Aug 2, 2019
1f27220
Remove import of SelectDropdown stylesheet from EditorPublishData
jsnajdr Aug 2, 2019
19023f0
SelectDropdown: return undefined from getInitialSelectedItem
jsnajdr Aug 2, 2019
b09fabe
SelectDropdown: update unit tests
jsnajdr Aug 2, 2019
dd17c67
SelectDropdown: disable some ESLint warnings in docs example
jsnajdr Aug 16, 2019
c9b3c11
SelectDropdown: hide the dropdown options when the dropdown is closed
jsnajdr Aug 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion assets/stylesheets/_components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,5 @@
@import 'components/main/style';
@import 'components/popover/style';
@import 'components/segmented-control/style';
@import 'components/select-dropdown/style';
@import 'components/tooltip/style';
@import 'layout/sidebar/style';
5 changes: 2 additions & 3 deletions client/components/section-nav/tabs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import { debounce } from 'lodash';
/**
* Internal Dependencies
*/
import DropdownItem from 'components/select-dropdown/item';
import SelectDropdown from 'components/select-dropdown';
import { getWindowInnerWidth } from 'lib/viewport';
import afterLayoutFlush from 'lib/after-layout-flush';
Expand Down Expand Up @@ -120,9 +119,9 @@ class NavTabs extends Component {
return null;
}
return (
<DropdownItem { ...child.props } key={ 'navTabsDropdown-' + index }>
<SelectDropdown.Item { ...child.props } key={ 'navTabsDropdown-' + index }>
{ child.props.children }
</DropdownItem>
</SelectDropdown.Item>
);
} );

Expand Down
34 changes: 16 additions & 18 deletions client/components/select-dropdown/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,17 @@ A good example for this case is navigation. Sometimes the option that is selecte
```js
import React from 'react';
import SelectDropdown from 'components/select-dropdown';
import DropdownItem from 'components/select-dropdown/item';

export default class extends React.Component {
// ...

render() {
return (
<SelectDropdown selectedText="Published">
<DropdownItem selected={ true } path="/published">Published</DropdownItem>
<DropdownItem path="/scheduled">Scheduled</DropdownItem>
<DropdownItem path="/drafts">Drafts</DropdownItem>
<DropdownItem path="/trashed">Trashed</DropdownItem>
<SelectDropdown.Item selected path="/published">Published</SelectDropdown.Item>
<SelectDropdown.Item path="/scheduled">Scheduled</SelectDropdown.Item>
<SelectDropdown.Item path="/drafts">Drafts</SelectDropdown.Item>
<SelectDropdown.Item path="/trashed">Trashed</SelectDropdown.Item>
</SelectDropdown>
);
}
Expand Down Expand Up @@ -92,24 +91,22 @@ Optional bool to disable dropdown item.

`onClick`

Optional callback that will be applied when a `DropdownItem` has been clicked. This could be used for updating a parent's state, tracking analytics, etc.
Optional callback that will be applied when a `SelectDropdown.Item` has been clicked. This could be used for updating a parent's state, tracking analytics, etc.

### Label

An item "label" can be added like as a sibling to `DropdownItem`. The purpose
of this `DropdownLabel` component is used to display a static item, for example, to group
An item "label" can be added like as a sibling to `SelectDropdown.Item`. The purpose
of this `SelectDropdown.Label` component is used to display a static item, for example, to group
items.

### Separator

As a sibling to `DropdownItem`, an item "separator" or horizontal line can be used to visually separate items.
As a sibling to `SelectDropdown.Item`, an item "separator" or horizontal line can be used to visually separate items.

![separator example screenshot](https://cldup.com/CWEH2K9PUf.png)

```js
import SelectDropdown from 'components/select-dropdown';
import DropdownItem from 'components/select-dropdown/item';
import DropdownSeparator from 'components/select-dropdown/separator';

export default class extends React.Component {

Expand All @@ -118,12 +115,12 @@ export default class extends React.Component {
render() {
return (
<SelectDropdown selectedText="Published">
<DropdownLabel><em>Post status<em></DropdownLabel>
<DropdownItem selected={ true } path="/published">Published</DropdownItem>
<DropdownItem path="/scheduled">Scheduled</DropdownItem>
<DropdownItem path="/drafts">Drafts</DropdownItem>
<DropdownSeparator />
<DropdownItem path="/trashed">Trashed</DropdownItem>
<SelectDropdown.Label><em>Post status<em></SelectDropdown.Label>
<SelectDropdown.Item selected path="/published">Published</SelectDropdown.Item>
<SelectDropdown.Item path="/scheduled">Scheduled</SelectDropdown.Item>
<SelectDropdown.Item path="/drafts">Drafts</SelectDropdown.Item>
<SelectDropdown.Separator />
<SelectDropdown.Item path="/trashed">Trashed</SelectDropdown.Item>
</SelectDropdown>
);
}
Expand All @@ -142,6 +139,7 @@ A good example for this case is a form element. You don't want to have to write

```js
import SelectDropdown from 'components/select-dropdown';

var options = [
{ label: 'Post status', isLabel: true },
{ value: 'published', label: 'Published' },
Expand Down Expand Up @@ -203,7 +201,7 @@ Optional callback that will be run after the dropdown is opened or closed. An ev

### Label

Adding `isLabel` key set to `true` into the item object will create a `DropdownLabel` component.
Adding `isLabel` key set to `true` into the item object will create a `SelectDropdown.Label` component.

```js
var options = [
Expand Down
89 changes: 41 additions & 48 deletions client/components/select-dropdown/docs/example.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,6 @@ import Gridicon from 'gridicons';
* Internal dependencies
*/
import SelectDropdown from 'components/select-dropdown';
import DropdownItem from 'components/select-dropdown/item';
import DropdownLabel from 'components/select-dropdown/label';
import DropdownSeparator from 'components/select-dropdown/separator';

class SelectDropdownExample extends React.PureComponent {
static displayName = 'SelectDropdownExample';
Expand All @@ -29,18 +26,12 @@ class SelectDropdownExample extends React.PureComponent {
],
};

constructor( props ) {
super( props );

const initialState = {
childSelected: 'Published',
selectedCount: 10,
compactButtons: false,
selectedIcon: <Gridicon icon="align-image-left" size={ 18 } />,
};

this.state = initialState;
}
state = {
childSelected: 'Published',
selectedCount: 10,
compactButtons: false,
selectedIcon: <Gridicon icon="align-image-left" size={ 18 } />,
};

toggleButtons = () => {
this.setState( { compactButtons: ! this.state.compactButtons } );
Expand All @@ -51,9 +42,9 @@ class SelectDropdownExample extends React.PureComponent {

return (
<div className="docs__select-dropdown-container">
<a className="docs__design-toggle button" onClick={ this.toggleButtons }>
<button className="docs__design-toggle button" onClick={ this.toggleButtons }>
{ toggleButtonsText }
</a>
</button>

<h3>Items passed as options prop</h3>
<SelectDropdown
Expand All @@ -69,43 +60,43 @@ class SelectDropdownExample extends React.PureComponent {
selectedText={ this.state.childSelected }
selectedCount={ this.state.selectedCount }
>
<DropdownLabel>
<SelectDropdown.Label>
<strong>Statuses</strong>
</DropdownLabel>
</SelectDropdown.Label>

<DropdownItem
<SelectDropdown.Item
count={ 10 }
selected={ this.state.childSelected === 'Published' }
onClick={ this.getSelectItemHandler( 'Published', 10 ) }
>
Published
</DropdownItem>
</SelectDropdown.Item>

<DropdownItem
<SelectDropdown.Item
count={ 4 }
selected={ this.state.childSelected === 'Scheduled' }
onClick={ this.getSelectItemHandler( 'Scheduled', 4 ) }
>
Scheduled
</DropdownItem>
</SelectDropdown.Item>

<DropdownItem
<SelectDropdown.Item
count={ 3343 }
selected={ this.state.childSelected === 'Drafts' }
onClick={ this.getSelectItemHandler( 'Drafts', 3343 ) }
>
Drafts
</DropdownItem>
</SelectDropdown.Item>

<DropdownSeparator />
<SelectDropdown.Separator />

<DropdownItem
<SelectDropdown.Item
count={ 3 }
selected={ this.state.childSelected === 'Trashed' }
onClick={ this.getSelectItemHandler( 'Trashed', 3 ) }
>
Trashed
</DropdownItem>
</SelectDropdown.Item>
</SelectDropdown>

<h3 style={ { marginTop: 20 } }>With Icons in Items Passed as Options</h3>
Expand Down Expand Up @@ -143,11 +134,11 @@ class SelectDropdownExample extends React.PureComponent {
selectedText={ this.state.childSelected }
selectedIcon={ this.state.selectedIcon }
>
<DropdownLabel>
<SelectDropdown.Label>
<strong>Statuses</strong>
</DropdownLabel>
</SelectDropdown.Label>

<DropdownItem
<SelectDropdown.Item
selected={ this.state.childSelected === 'Published' }
icon={ <Gridicon icon="align-image-left" size={ 18 } /> }
onClick={ this.getSelectItemHandler(
Expand All @@ -157,9 +148,9 @@ class SelectDropdownExample extends React.PureComponent {
) }
>
Published
</DropdownItem>
</SelectDropdown.Item>

<DropdownItem
<SelectDropdown.Item
selected={ this.state.childSelected === 'Scheduled' }
icon={ <Gridicon icon="calendar" size={ 18 } /> }
onClick={ this.getSelectItemHandler(
Expand All @@ -169,9 +160,9 @@ class SelectDropdownExample extends React.PureComponent {
) }
>
Scheduled
</DropdownItem>
</SelectDropdown.Item>

<DropdownItem
<SelectDropdown.Item
selected={ this.state.childSelected === 'Drafts' }
icon={ <Gridicon icon="create" size={ 18 } /> }
onClick={ this.getSelectItemHandler(
Expand All @@ -181,11 +172,11 @@ class SelectDropdownExample extends React.PureComponent {
) }
>
Drafts
</DropdownItem>
</SelectDropdown.Item>

<DropdownSeparator />
<SelectDropdown.Separator />

<DropdownItem
<SelectDropdown.Item
selected={ this.state.childSelected === 'Trashed' }
icon={ <Gridicon icon="trash" size={ 18 } /> }
onClick={ this.getSelectItemHandler(
Expand All @@ -195,7 +186,7 @@ class SelectDropdownExample extends React.PureComponent {
) }
>
Trashed
</DropdownItem>
</SelectDropdown.Item>
</SelectDropdown>

<h3 style={ { marginTop: 20 } }>max-width: 220px;</h3>
Expand All @@ -206,17 +197,17 @@ class SelectDropdownExample extends React.PureComponent {
selectedText="Published publish publish publish"
selectedCount={ 10 }
>
<DropdownLabel>
<SelectDropdown.Label>
<strong>Statuses</strong>
</DropdownLabel>
<DropdownItem count={ 10 } selected={ true }>
</SelectDropdown.Label>
<SelectDropdown.Item count={ 10 } selected={ true }>
Published publish publish publish
</DropdownItem>
<DropdownItem count={ 4 }> Scheduled scheduled</DropdownItem>
<DropdownItem count={ 3343 }>Drafts</DropdownItem>
<DropdownItem disabled={ true }>Disabled Item</DropdownItem>
<DropdownSeparator />
<DropdownItem count={ 3 }>Trashed</DropdownItem>
</SelectDropdown.Item>
<SelectDropdown.Item count={ 4 }> Scheduled scheduled</SelectDropdown.Item>
<SelectDropdown.Item count={ 3343 }>Drafts</SelectDropdown.Item>
<SelectDropdown.Item disabled={ true }>Disabled Item</SelectDropdown.Item>
<SelectDropdown.Separator />
<SelectDropdown.Item count={ 3 }>Trashed</SelectDropdown.Item>
</SelectDropdown>

<h3 style={ { marginTop: 20 } }>Disabled State</h3>
Expand Down Expand Up @@ -244,10 +235,12 @@ class SelectDropdownExample extends React.PureComponent {
selectedIcon: icon,
} );

// eslint-disable-next-line no-console
console.log( 'Select Dropdown Item (selected):', childSelected );
};

onDropdownSelect( option ) {
// eslint-disable-next-line no-console
console.log( 'Select Dropdown (selected):', option );
}
}
Expand Down
Loading