Update buttons and icons buttons size and consistency (#19058)

packages/base-styles/_z-index.scss

@@ -35,7 +35,7 @@ $z-layers: (
 	".wp-block-site-title__save-button": 1,
 
 	// Active pill button
-	".components-button.is-button {:focus or .is-primary}": 1,
+	".components-button {:focus or .is-primary}": 1,
 
 	// The draggable element should show up above the entire UI
 	".components-draggable__clone": 1000000000,

packages/block-editor/src/components/block-compare/block-view.js

@@ -19,7 +19,7 @@ const BlockView = ( { title, rawContent, renderedContent, action, actionText, cl
 			</div>
 
 			<div className="block-editor-block-compare__action">
-				<Button isLarge tabIndex="0" onClick={ action }>{ actionText }</Button>
+				<Button isSecondary tabIndex="0" onClick={ action }>{ actionText }</Button>
 			</div>
 		</div>
 	);

packages/block-editor/src/components/block-compare/test/__snapshots__/block-view.js.snap

@@ -27,7 +27,7 @@ exports[`BlockView should match snapshot 1`] = `
     className="block-editor-block-compare__action"
   >
     <ForwardRef(Button)
-      isLarge={true}
+      isSecondary={true}
       onClick={[Function]}
       tabIndex="0"
     >

packages/block-editor/src/components/block-list/block-invalid-warning.js

@@ -48,14 +48,14 @@ export class BlockInvalidWarning extends Component {
 			<>
 				<Warning
 					actions={ [
-						<Button key="convert" onClick={ this.onCompare } isLarge isPrimary={ ! hasHTMLBlock }>
+						<Button key="convert" onClick={ this.onCompare } isSecondary={ hasHTMLBlock } isPrimary={ ! hasHTMLBlock }>
 							{
 								// translators: Button to fix block content
 								_x( 'Resolve', 'imperative verb' )
 							}
 						</Button>,
 						hasHTMLBlock && (
-							<Button key="edit" onClick={ convertToHTML } isLarge isPrimary>
+							<Button key="edit" onClick={ convertToHTML } isPrimary>
 								{ __( 'Convert to HTML' ) }
 							</Button>
 						),

packages/block-editor/src/components/block-mover/style.scss

@@ -79,7 +79,7 @@
 	@include break-small() {
 		color: $dark-opacity-300;
 
-		&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
+		&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover {
 			background-color: transparent;
 			box-shadow: none;
 		}
@@ -97,15 +97,15 @@
 	fill: currentColor;
 
 	&,
-	&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover,
-	&:not(:disabled):not([aria-disabled="true"]):not(.is-default):active,
-	&:not(:disabled):not([aria-disabled="true"]):not(.is-default):focus {
+	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover,
+	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):active,
+	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):focus {
 		box-shadow: none;
 		background: none;
 		color: $dark-opacity-500;
 	}
 
-	&:not(:disabled):not([aria-disabled="true"]):not(.is-default):active {
+	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):active {
 		cursor: grabbing;
 	}
 }

packages/block-editor/src/components/block-pattern-picker/index.js

@@ -39,7 +39,7 @@ function BlockPatternPicker( {
 				{ patterns.map( ( pattern ) => (
 					<li key={ pattern.name }>
 						<IconButton
-							isLarge
+							isSecondary
 							icon={ pattern.icon }
 							size={ 48 }
 							onClick={ () => onSelect( pattern ) }

packages/block-editor/src/components/block-pattern-picker/style.scss

@@ -46,7 +46,7 @@
 		// icon horizontally.
 		justify-content: center;
 
-		&.is-default {
+		&.is-secondary {
 			background-color: $white;
 		}
 	}

packages/block-editor/src/components/default-block-appender/style.scss

@@ -87,7 +87,7 @@
 
 		// Hide the box shadow that appears on hover.
 		// All the :not() rules are needed to override default iconButton styles.
-		&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
+		&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover {
 			box-shadow: none;
 		}
 	}

packages/block-editor/src/components/inserter-list-item/style.scss

@@ -22,6 +22,7 @@
 	transition: all 0.05s ease-in-out;
 	@include reduce-motion("transition");
 	position: relative;
+	height: auto;
 
 	&:disabled {
 		@include block-style__disabled();

packages/block-editor/src/components/link-control/index.js

@@ -225,7 +225,7 @@ function LinkControl( {
 									<span className="block-editor-link-control__search-item-info">{ filterURLForDisplay( safeDecodeURI( currentLink.url ) ) || '' }</span>
 								</span>
 
-								<Button isDefault onClick={ setMode( MODE_EDIT ) } className="block-editor-link-control__search-item-action block-editor-link-control__search-item-action--edit">
+								<Button isSecondary onClick={ setMode( MODE_EDIT ) } className="block-editor-link-control__search-item-action block-editor-link-control__search-item-action--edit">
 									{ __( 'Change' ) }
 								</Button>
 							</div>

packages/block-editor/src/components/link-control/style.scss

@@ -90,6 +90,7 @@
 	text-align: left;
 	padding: 10px 15px;
 	border-radius: 5px;
+	height: auto;
 
 	&:hover,
 	&:focus {

packages/block-editor/src/components/media-placeholder/index.js

@@ -272,7 +272,7 @@ export class MediaPlaceholder extends Component {
 					className="block-editor-media-placeholder__button"
 					onClick={ this.openURLInput }
 					isPressed={ isURLInputVisible }
-					isLarge
+					isSecondary
 				>
 					{ __( 'Insert from URL' ) }
 				</Button>
@@ -315,7 +315,7 @@ export class MediaPlaceholder extends Component {
 				render={ ( { open } ) => {
 					return (
 						<Button
-							isLarge
+							isSecondary
 							onClick={ ( event ) => {
 								event.stopPropagation();
 								open();
@@ -340,7 +340,7 @@ export class MediaPlaceholder extends Component {
 							const content = (
 								<>
 									<IconButton
-										isLarge
+										isSecondary
 										className={ classnames(
 											'block-editor-media-placeholder__button',
 											'block-editor-media-placeholder__upload-button'
@@ -366,7 +366,7 @@ export class MediaPlaceholder extends Component {
 				<>
 					{ this.renderDropZone() }
 					<FormFileUpload
-						isLarge
+						isSecondary
 						className={ classnames(
 							'block-editor-media-placeholder__button',
 							'block-editor-media-placeholder__upload-button'

packages/block-editor/src/components/media-replace-flow/style.scss

@@ -56,7 +56,7 @@
 				width: 30px;
 			}
 
-			&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
+			&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover {
 				box-shadow: none;
 
 				> svg {

packages/block-editor/src/components/skip-to-selected-block/index.js

@@ -18,7 +18,7 @@ const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
 
 	return (
 		selectedBlockClientId &&
-		<Button isDefault className="block-editor-skip-to-selected-block" onClick={ onClick }>
+		<Button isSecondary className="block-editor-skip-to-selected-block" onClick={ onClick }>
 			{ __( 'Skip to the selected block' ) }
 		</Button>
 	);

packages/block-editor/src/components/url-popover/style.scss

@@ -2,7 +2,7 @@
 	border-top: $border-width solid $light-gray-500;
 }
 
-.block-editor-url-popover__additional-controls > div[role="menu"] .components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default) > svg {
+.block-editor-url-popover__additional-controls > div[role="menu"] .components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) > svg {
 	box-shadow: none;
 }
 
@@ -31,7 +31,7 @@
 		width: 30px;
 	}
 
-	&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
+	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover {
 		box-shadow: none;
 
 		> svg {

packages/block-library/src/block/edit-panel/index.js

@@ -64,7 +64,7 @@ class ReusableBlockEditPanel extends Component {
 						</b>
 						<Button
 							ref={ this.editButton }
-							isLarge
+							isSecondary
 							className="reusable-block-edit-panel__button"
 							disabled={ isEditDisabled }
 							onClick={ onEdit }
@@ -93,7 +93,7 @@ class ReusableBlockEditPanel extends Component {
 						/>
 						<Button
 							type="submit"
-							isLarge
+							isSecondary
 							isBusy={ isSaving }
 							disabled={ ! title || isSaving }
 							className="reusable-block-edit-panel__button"

packages/block-library/src/cover/edit.js

@@ -359,7 +359,7 @@ function CoverEdit( {
 						) }
 						<PanelRow>
 							<Button
-								isDefault
+								isSecondary
 								isSmall
 								className="block-library-cover__reset-button"
 								onClick={ () => setAttributes( {

packages/block-library/src/embed/embed-placeholder.js

@@ -23,14 +23,15 @@ const EmbedPlaceholder = ( props ) => {
 					placeholder={ __( 'Enter URL to embed here…' ) }
 					onChange={ onChange } />
 				<Button
-					isLarge
-					type="submit">
+					isSecondary
+					type="submit"
+				>
 					{ _x( 'Embed', 'button label' ) }
 				</Button>
 				{ cannotEmbed &&
 					<p className="components-placeholder__error">
 						{ __( 'Sorry, this content could not be embedded.' ) }<br />
-						<Button isLarge onClick={ tryAgain }>{ _x( 'Try again', 'button label' ) }</Button> <Button isLarge onClick={ fallback }>{ _x( 'Convert to link', 'button label' ) }</Button>
+						<Button isSecondary onClick={ tryAgain }>{ _x( 'Try again', 'button label' ) }</Button> <Button isSecondary onClick={ fallback }>{ _x( 'Convert to link', 'button label' ) }</Button>
 					</p>
 				}
 			</form>

packages/block-library/src/embed/test/__snapshots__/index.js.snap

@@ -44,7 +44,7 @@ exports[`core/embed block edit matches snapshot 1`] = `
         value=""
       />
       <button
-        class="components-button is-button is-default is-large"
+        class="components-button is-secondary"
         type="submit"
       >
         Embed

packages/block-library/src/file/edit.js

@@ -235,7 +235,7 @@ class FileEdit extends Component {
 							</div>
 							{ isSelected &&
 								<ClipboardButton
-									isDefault
+									isSecondary
 									text={ href }
 									className={ 'wp-block-file__copy-url-button' }
 									onCopy={ this.confirmCopyURL }

packages/block-library/src/gallery/editor.scss

@@ -57,7 +57,7 @@ figure.wp-block-gallery {
 			height: $icon-button-size-small;
 
 			// Remove hover box shadows, since they clash with the container.
-			&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
+			&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover {
 				box-shadow: none;
 			}
 

packages/block-library/src/navigation/edit.js

@@ -124,7 +124,7 @@ function Navigation( {
 				>
 					<div className="wp-block-navigation-placeholder__buttons">
 						<Button
-							isDefault
+							isSecondary
 							className="wp-block-navigation-placeholder__button"
 							onClick={ handleCreateFromExistingPages }
 							disabled={ ! hasPages }

packages/block-library/src/rss/edit.js

@@ -78,7 +78,7 @@ class RSSEdit extends Component {
 							onChange={ ( value ) => setAttributes( { feedURL: value } ) }
 							className={ 'components-placeholder__input' }
 						/>
-						<Button isLarge type="submit">
+						<Button isSecondary type="submit">
 							{ __( 'Use URL' ) }
 						</Button>
 					</form>

packages/block-library/src/table/edit.js

@@ -521,7 +521,7 @@ export class TableEdit extends Component {
 							min="1"
 							className="wp-block-table__placeholder-input"
 						/>
-						<Button className="wp-block-table__placeholder-button" isDefault type="submit">{ __( 'Create Table' ) }</Button>
+						<Button className="wp-block-table__placeholder-button" isSecondary type="submit">{ __( 'Create Table' ) }</Button>
 					</form>
 				</Placeholder>
 			);

packages/block-library/src/video/edit.js

@@ -213,7 +213,7 @@ class VideoEdit extends Component {
 									allowedTypes={ VIDEO_POSTER_ALLOWED_MEDIA_TYPES }
 									render={ ( { open } ) => (
 										<Button
-											isDefault
+											isSecondary
 											onClick={ open }
 											ref={ this.posterImageButton }
 											aria-describedby={ videoPosterDescription }

packages/components/CHANGELOG.md

@@ -1,9 +1,19 @@
-# 8.3.0 (Unreleased)
+## Master
 
 ### New Features
 
 - Added a new `Guide` component which allows developers to easily present a user guide.
 
+### Breaking Change
+
+- `is-button` classname has been removed from the Button component.
+- The `is-default` classname is not applied automatically anymore.
+- By default Button components come with a fixed height and hover styles.
+
+### Deprecations
+
+- `isDefault` prop in `Button` has been deprecated. Consider using `isSecondary` instead. 
+
 ## 8.2.0 (2019-08-29)
 
 ### New Features

packages/components/src/button-group/style.scss

@@ -1,11 +1,11 @@
 .components-button-group {
 	display: inline-block;
 
-	.components-button.is-button {
+	.components-button {
 		border-radius: 0;
 		display: inline-flex;
 
-		& + .components-button.is-button {
+		& + .components-button {
 			margin-left: -1px;
 		}
 
@@ -22,7 +22,7 @@
 		&:focus,
 		&.is-primary {
 			position: relative;
-			z-index: z-index(".components-button.is-button {:focus or .is-primary}");
+			z-index: z-index(".components-button {:focus or .is-primary}");
 		}
 
 		// The active button should look pressed.

packages/components/src/button/README.md

@@ -112,7 +112,7 @@ Renders a button with default style.
 import { Button } from "@wordpress/components";
 
 const MyButton = () => (
-	<Button isDefault>
+	<Button isSecondary>
 		Click me!
 	</Button>
 );
@@ -128,7 +128,7 @@ Name | Type | Default | Description
 --- | --- | --- | ---
 `disabled` | `bool` | `false` | Whether the button is disabled. If `true`, this will force a `button` element to be rendered.
 `href` | `string` | `undefined` | If provided, renders `a` instead of `button`.
-`isDefault` | `bool` | `false` | Renders a default button style.
+`isSecondary` | `bool` | `false` | Renders a default button style.
 `isPrimary` | `bool` | `false` | Renders a primary button style.
 `isTertiary` | `bool` | `false` | Renders a text-based button style.
 `isDestructive` | `bool` | `false` | Renders a red text-based button style to indicate destructive behavior.