Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Create OrderSelect and Label components #905

Merged
merged 9 commits into from Aug 23, 2019
Merged

Create OrderSelect and Label components #905

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
aa1c300
Create Label and OrderSelect components
Aljullu Aug 23, 2019
e14f574
Update review list item so it uses 'classnames'
Aljullu Aug 23, 2019
a457fa1
Split review order select styles from generic component
Aljullu Aug 23, 2019
0751dbf
Update snapshots
Aljullu Aug 23, 2019
d398806
Refactor Label so we don't need to check Symbol
Aljullu Aug 23, 2019
b7ed466
Add description to Label and OrderSelect components
Aljullu Aug 23, 2019
850dc62
Use prop-types instead of prop-types-elementtype
Aljullu Aug 23, 2019
1fcd28a
Simplify Label propTypes
Aljullu Aug 23, 2019
672a99c
Update package-lock
Aljullu Aug 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
43 changes: 24 additions & 19 deletions assets/js/base/components/label/index.js
View file
Open in desktop
Expand Up @@ -2,28 +2,19 @@
* External dependencies
*/
import PropTypes from 'prop-types';
import elementType from 'prop-types-elementtype';
import { Fragment } from 'react';
import classNames from 'classnames';

const Label = ( { label, screenReaderLabel, wrapperElement: Wrapper, wrapperProps } ) => {
if ( label && screenReaderLabel && label !== screenReaderLabel ) {
return (
<Wrapper { ...wrapperProps }>
<span aria-hidden>
{ label }
</span>
<span className="screen-reader-text">
{ screenReaderLabel }
</span>
</Wrapper>
);
}
/**
* Component used to render an accessible text given a label and/or a
* screenReaderLabel. The wrapper element and wrapper props can also be
* specified via props.
*/
const Label = ( { label, screenReaderLabel, wrapperElement, wrapperProps } ) => {
let Wrapper;

if ( ! label && screenReaderLabel ) {
if ( typeof Wrapper === 'symbol' && Symbol.keyFor( Wrapper ) === 'react.fragment' ) {
Wrapper = 'span';
}
Wrapper = wrapperElement || 'span';
wrapperProps = {
...wrapperProps,
className: classNames( wrapperProps.className, 'screen-reader-text' ),
Expand All @@ -36,6 +27,21 @@ const Label = ( { label, screenReaderLabel, wrapperElement: Wrapper, wrapperProp
);
}

Wrapper = wrapperElement || Fragment;

if ( label && screenReaderLabel && label !== screenReaderLabel ) {
return (
<Wrapper { ...wrapperProps }>
<span aria-hidden>
{ label }
</span>
<span className="screen-reader-text">
{ screenReaderLabel }
</span>
</Wrapper>
);
}

return (
<Wrapper { ...wrapperProps }>
{ label }
Expand All @@ -48,13 +54,12 @@ Label.propTypes = {
screenReaderLabel: PropTypes.string,
wrapperElement: PropTypes.oneOfType( [
PropTypes.string,
elementType,
PropTypes.elementType,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking into this, it looks like under the hood, PropTypes.elementType is using react-is. So this type also validates string elements (like 'div', 'span' etc). So it should be safe to just remove the PropTypes.string here and only validate PropTypes.elementType.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch! Changed in 1fcd28a.

] ),
wrapperProps: PropTypes.object,
};

Label.defaultProps = {
wrapperElement: Fragment,
wrapperProps: {},
};

Expand Down
4 changes: 4 additions & 0 deletions assets/js/base/components/order-select/index.js
View file
Open in desktop
Expand Up @@ -10,6 +10,10 @@ import classNames from 'classnames';
import Label from '../label';
import './style.scss';

/**
* Component used for 'Order by' selectors, which renders a label
* and a <select> with the options provided in the props.
*/
const OrderSelect = ( { className, componentId, defaultValue, label, onChange, options, screenReaderLabel, readOnly, value } ) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is OrderSelect? I think it would be helpful to include some doc block here explaining what the OrderSelect component is used for.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done in b7ed466.

const selectId = `wc-block-order-select__select-${ componentId }`;

Expand Down
1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Expand Up @@ -86,7 +86,6 @@
"postcss-loader": "3.0.0",
"progress-bar-webpack-plugin": "1.12.1",
"promptly": "3.0.3",
"prop-types-elementtype": "^1.0.0",
"react-test-renderer": "16.8.6",
"request-promise": "4.2.4",
"rimraf": "2.7.1",
Expand Down