Skip to content

Commit

Permalink
Components: Start using isToggled prop for all Button components
Browse files Browse the repository at this point in the history
  • Loading branch information
@gziolo
gziolo committed Dec 3, 2019
1 parent 46ec7eb commit 88599b3
Show file tree
Hide file tree
Showing 17 changed files with 36 additions and 97 deletions.
6 changes: 3 additions & 3 deletions packages/base-styles/_z-index.scss
View file
Expand Up @@ -121,9 +121,9 @@ $z-layers: (
// Needs to appear bellow other color circular picker related UI elements.
".components-circular-option-picker__option-wrapper::before": -1,

".components-circular-option-picker__option.is-active": 1,
// Needs to be higher than .components-circular-option-picker__option.is-active.
".components-circular-option-picker__option.is-active + .dashicons-saved": 2
".components-circular-option-picker__option.is-toggled": 1,
// Needs to be higher than .components-circular-option-picker__option.is-toggled.
".components-circular-option-picker__option.is-toggled + .dashicons-saved": 2
);

@function z-index( $key ) {
Expand Down
10 changes: 2 additions & 8 deletions packages/block-editor/src/components/url-input/button.js
View file
@@ -1,8 +1,3 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
Expand Down Expand Up @@ -45,9 +40,8 @@ class URLInputButton extends Component {
icon="admin-links"
label={ buttonLabel }
onClick={ this.toggle }
className={ classnames( 'components-toolbar__control', {
'is-active': url,
} ) }
className="components-toolbar__control"
isToggled={ !! url }
/>
{ expanded &&
<form
Expand Down
8 changes: 4 additions & 4 deletions packages/block-editor/src/components/url-input/test/button.js
View file
Expand Up @@ -20,13 +20,13 @@ describe( 'URLInputButton', () => {
const wrapper = shallow( <URLInputButton /> );
expect( wrapper.hasClass( 'block-editor-url-input__button' ) ).toBe( true );
} );
it( 'should not have is-active class when url prop not defined', () => {
it( 'should have isToggled props set to false when url prop not defined', () => {
const wrapper = shallow( <URLInputButton /> );
expect( wrapper.find( 'ForwardRef(IconButton)' ).hasClass( 'is-active' ) ).toBe( false );
expect( wrapper.find( 'ForwardRef(IconButton)' ).prop( 'isToggled' ) ).toBe( false );
} );
it( 'should have is-active class name if url prop defined', () => {
it( 'should have isToggled prop set to true if url prop defined', () => {
const wrapper = shallow( <URLInputButton url="https://example.com" /> );
expect( wrapper.find( 'ForwardRef(IconButton)' ).hasClass( 'is-active' ) ).toBe( true );
expect( wrapper.find( 'ForwardRef(IconButton)' ).prop( 'isToggled' ) ).toBe( true );
} );
it( 'should have hidden form by default', () => {
const wrapper = shallow( <URLInputButton /> );
Expand Down
54 changes: 0 additions & 54 deletions packages/block-library/src/code/editor.scss
View file
Expand Up @@ -12,57 +12,3 @@
box-shadow: none;
}
}

// We should extract this to a separate components-toolbar
.components-tab-button {
display: inline-flex;
align-items: flex-end;
margin: 0;
padding: 3px;
background: none;
outline: none;
color: $dark-gray-500;
cursor: pointer;
position: relative;
height: $icon-button-size;
font-family: $default-font;
font-size: $default-font-size;
font-weight: 500;
border: 0;

&.is-active,
&.is-active:hover {
color: $white;
}

&:disabled {
cursor: default;
}

& > span {
border: $border-width solid transparent;
padding: 0 6px;
box-sizing: content-box;
height: 28px;
line-height: 28px;
}

&:hover > span,
&:focus > span {
color: $dark-gray-500;
}

&:not(:disabled) {
&.is-active > span,
&:hover > span,
&:focus > span {
border: $border-width solid $dark-gray-500;
}
}

&.is-active > span,
&.is-active:hover > span {
background-color: $dark-gray-500;
color: $white;
}
}
6 changes: 4 additions & 2 deletions packages/block-library/src/html/edit.js
View file
Expand Up @@ -64,13 +64,15 @@ class HTMLEdit extends Component {
<BlockControls>
<ToolbarGroup>
<Button
className={ `components-tab-button ${ ! isPreview ? 'is-active' : '' }` }
className="components-tab-button"
isToggled={ ! isPreview }
onClick={ this.switchToHTML }
>
<span>HTML</span>
</Button>
<Button
className={ `components-tab-button ${ isPreview ? 'is-active' : '' }` }
className="components-tab-button"
isToggled={ isPreview }
onClick={ this.switchToPreview }
>
<span>{ __( 'Preview' ) }</span>
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/image/edit.js
View file
Expand Up @@ -611,7 +611,7 @@ export class ImageEdit extends Component {
<>
<ToolbarGroup>
<IconButton
className={ classnames( 'components-icon-button components-toolbar__control', { 'is-active': this.state.isEditing } ) }
className="components-toolbar__control"
label={ __( 'Edit image' ) }
isToggled={ this.state.isEditing }
onClick={ this.toggleIsEditing }
Expand Down
6 changes: 4 additions & 2 deletions packages/block-library/src/legacy-widget/edit/index.js
View file
Expand Up @@ -99,13 +99,15 @@ class LegacyWidgetEdit extends Component {
{ hasEditForm && (
<>
<Button
className={ `components-tab-button ${ ! isPreview ? 'is-active' : '' }` }
className="components-tab-button"
isToggled={ ! isPreview }
onClick={ this.switchToEdit }
>
<span>{ __( 'Edit' ) }</span>
</Button>
<Button
className={ `components-tab-button ${ isPreview ? 'is-active' : '' }` }
className="components-tab-button"
isToggled={ isPreview }
onClick={ this.switchToPreview }
>
<span>{ __( 'Preview' ) }</span>
Expand Down
3 changes: 1 addition & 2 deletions packages/components/src/circular-option-picker/index.js
View file
Expand Up @@ -19,11 +19,10 @@ function Option( {
} ) {
const optionButton = (
<Button
aria-pressed={ isSelected }
isToggled={ isSelected }
className={ classnames(
className,
'components-circular-option-picker__option',
{ 'is-active': isSelected }
) }
{ ...additionalProps }
/>
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/circular-option-picker/style.scss
View file
Expand Up @@ -61,17 +61,17 @@ $color-palette-circle-spacing: 14px;
@include reduce-motion("transition");
cursor: pointer;

&.is-active {
&.is-toggled {
box-shadow: inset 0 0 0 4px;
position: relative;
z-index: z-index(".components-circular-option-picker__option.is-active");
z-index: z-index(".components-circular-option-picker__option.is-toggled");

& + .dashicons-saved {
position: absolute;
left: 4px;
top: 4px;
border-radius: 50%;
z-index: z-index(".components-circular-option-picker__option.is-active + .dashicons-saved");
z-index: z-index(".components-circular-option-picker__option.is-toggled + .dashicons-saved");
background: $white;
pointer-events: none;
}
Expand Down
10 changes: 5 additions & 5 deletions packages/components/src/color-palette/test/__snapshots__/index.js.snap
View file
Expand Up @@ -285,8 +285,8 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
>
<ForwardRef(Button)
aria-label="Color: red"
aria-pressed={true}
className="components-circular-option-picker__option is-active"
className="components-circular-option-picker__option"
isToggled={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand All @@ -302,7 +302,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
<button
aria-label="Color: red"
aria-pressed={true}
className="components-button components-circular-option-picker__option is-active"
className="components-button components-circular-option-picker__option is-toggled"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -373,8 +373,8 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
>
<ForwardRef(Button)
aria-label="Color: white"
aria-pressed={false}
className="components-circular-option-picker__option"
isToggled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -428,8 +428,8 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
>
<ForwardRef(Button)
aria-label="Color: blue"
aria-pressed={false}
className="components-circular-option-picker__option"
isToggled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/color-palette/test/index.js
View file
Expand Up @@ -29,15 +29,15 @@ describe( 'ColorPalette', () => {
} );

test( 'should call onClick on an active button with undefined', () => {
const activeButton = buttons.findWhere( ( button ) => button.hasClass( 'is-active' ) );
const activeButton = buttons.findWhere( ( button ) => button.hasClass( 'is-toggled' ) );
activeButton.simulate( 'click' );

expect( onChange ).toHaveBeenCalledTimes( 1 );
expect( onChange ).toHaveBeenCalledWith( undefined );
} );

test( 'should call onClick on an inactive button', () => {
const inactiveButton = buttons.findWhere( ( button ) => ! button.hasClass( 'is-active' ) ).first();
const inactiveButton = buttons.findWhere( ( button ) => ! button.hasClass( 'is-toggled' ) ).first();
inactiveButton.simulate( 'click' );

expect( onChange ).toHaveBeenCalledTimes( 1 );
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/primitives/svg/index.native.js
View file
Expand Up @@ -19,7 +19,7 @@ export {
export const SVG = ( { className = '', isToggled, ...props } ) => {
const colorScheme = props.colorScheme || 'light';
const stylesFromClasses = className.split( ' ' ).map( ( element ) => styles[ element ] ).filter( Boolean );
const defaultStyle = isToggled ? styles[ 'is-active' ] : styles[ 'components-toolbar__control-' + colorScheme ];
const defaultStyle = isToggled ? styles[ 'is-toggled' ] : styles[ 'components-toolbar__control-' + colorScheme ];
const styleValues = Object.assign( {}, props.style, defaultStyle, ...stylesFromClasses );

const appliedProps = { ...props, style: styleValues };
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/primitives/svg/style.native.scss
View file
Expand Up @@ -11,7 +11,7 @@
}

.dashicon-active,
.is-active {
.is-toggled {
color: #fff;
fill: currentColor;
}
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/toolbar-button/index.js
View file
Expand Up @@ -48,7 +48,6 @@ function ToolbarButton( {
className={ classnames(
'components-toolbar__control',
className,
{ 'is-active': isActive }
) }
isToggled={ isActive }
disabled={ isDisabled }
Expand Down
7 changes: 3 additions & 4 deletions packages/components/src/toolbar-button/style.scss
View file
Expand Up @@ -18,16 +18,16 @@
bottom: 10px;
}

&:not(:disabled).is-active[data-subscript]::after {
&:not(:disabled).is-toggled[data-subscript]::after {
color: $white;
}

&.is-active {
&.is-toggled {
padding: 3px;
outline: none;
}

&.is-active > svg {
&.is-toggled > svg {
padding: 5px;
border-radius: $radius-round-rectangle;
height: 30px;
Expand All @@ -36,4 +36,3 @@
@include formatting-button-style__active;
}
}

2 changes: 0 additions & 2 deletions packages/edit-post/src/components/header/style.scss
View file
Expand Up @@ -52,8 +52,6 @@
&.is-toggled {
color: $white;
background: $dark-gray-500;
margin: 1px;
padding: 7px;
}

// The !important in this ruleset need to override the pile of :not() selectors used in the icon-button.
Expand Down
4 changes: 2 additions & 2 deletions storybook/test/__snapshots__/index.js.snap
View file
Expand Up @@ -3744,7 +3744,7 @@ exports[`Storyshots Components|ToolbarGroup Default 1`] = `
<button
aria-label="Bold"
aria-pressed={true}
className="components-button components-icon-button components-toolbar__control is-active is-toggled"
className="components-button components-icon-button components-toolbar__control is-toggled"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -3838,7 +3838,7 @@ exports[`Storyshots Components|ToolbarGroup With Controls Prop 1`] = `
<button
aria-label="Bold"
aria-pressed={true}
className="components-button components-icon-button components-toolbar__control is-active is-toggled"
className="components-button components-icon-button components-toolbar__control is-toggled"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down

0 comments on commit 88599b3

Please sign in to comment.