Improve button styles when multi-selected

WordPress · Jul 12, 2019 · 92861a6 · 92861a6
1 parent 4d4f20d
commit 92861a6
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
@@ -41,6 +41,8 @@ import {
 	toggleSection,
 	isEmptyTableSection,
 	isCellInMultiSelection,
+	isRowSelected,
+	isColumnSelected,
 	getCellAbove,
 	getCellBelow,
 	getCellToRight,
@@ -409,15 +411,20 @@ export class TableEdit extends Component {
 								>
 									{ showBlockSelectionControls && rowIndex === 0 && columnIndex === 0 && (
 										<IconButton
-											className="wp-block-table__table-selection-button"
+											className={ classnames( 'wp-block-table__table-selection-button', {
+												'is-selected': isInMultiCellSelection && selection.type === 'table',
+											} ) }
 											label={ __( 'Select all' ) }
 											icon="grid-view"
 											onClick={ () => this.setState( { selection: { type: 'table' } } ) }
+											aria-pressed={ isInMultiCellSelection && selection.type === 'table' }
 										/>
 									) }
 									{ columnIndex === 0 && (
 										<IconButton
-											className="wp-block-table__row-selection-button"
+											className={ classnames( 'wp-block-table__row-selection-button', {
+												'is-selected': isInMultiCellSelection && isRowSelected( cellLocation, selection ),
+											} ) }
 											label={ __( 'Select row' ) }
 											icon="arrow-right"
 											onClick={ () => this.setState( {
@@ -427,11 +434,14 @@ export class TableEdit extends Component {
 													rowIndex,
 												},
 											} ) }
+											aria-pressed={ isInMultiCellSelection && isRowSelected( cellLocation, selection ) }
 										/>
 									) }
 									{ showBlockSelectionControls && rowIndex === 0 && (
 										<IconButton
-											className="wp-block-table__column-selection-button"
+											className={ classnames( 'wp-block-table__column-selection-button', {
+												'is-selected': isInMultiCellSelection && isColumnSelected( cellLocation, selection ),
+											} ) }
 											label={ __( 'Select column' ) }
 											icon="arrow-down"
 											onClick={ () => this.setState( {
@@ -440,6 +450,7 @@ export class TableEdit extends Component {
 													columnIndex,
 												},
 											} ) }
+											aria-pressed={ isInMultiCellSelection && isColumnSelected( cellLocation, selection ) }
 										/>
 									) }
 									<RichText

diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss
@@ -111,11 +111,20 @@
 	&__row-selection-button,
 	&__column-selection-button {
 		position: absolute;
+		border-radius: 0;
 
 		// Ensure the icon is centered, even when the button is very narrow.
 		padding: 0;
 		justify-content: center;
 
+		&.is-selected,
+		&.is-selected:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover,
+		&.is-selected:focus,
+		&.is-selected:not(:disabled):not([aria-disabled="true"]):not(.is-default):active {
+			background: $blue-medium-500;
+			color: $white;
+		}
+
 		.dashicon {
 			margin: 0 auto;
 		}