Callout buttons

assets/js/googlesitekit/components-gm2/Button.js

@@ -55,6 +55,8 @@ const Button = forwardRef(
 			hideTooltipTitle = false,
 			tooltipEnterDelayInMS = 100,
 			tertiary = false,
+			callout,
+			calloutStyle,
 			...extraProps
 		},
 		ref
@@ -96,10 +98,15 @@ const Button = forwardRef(
 		const ButtonComponent = (
 			<SemanticButton
 				className={ classnames( 'mdc-button', className, {
-					'mdc-button--raised': ! text && ! tertiary,
+					'mdc-button--raised': ! text && ! tertiary && ! callout,
 					'mdc-button--danger': danger,
 					'mdc-button--inverse': inverse,
 					'mdc-button--tertiary': tertiary,
+					'mdc-button--callout': callout,
+					'mdc-button--callout-primary':
+						callout || calloutStyle === 'primary',
+					'mdc-button--callout-warning': calloutStyle === 'warning',
+					'mdc-button--callout-error': calloutStyle === 'error',
 				} ) }
 				href={ disabled ? undefined : href }
 				ref={ mergedRefs }
@@ -157,6 +164,8 @@ Button.propTypes = {
 	tooltip: PropTypes.bool,
 	inverse: PropTypes.bool,
 	hideTooltipTitle: PropTypes.bool,
+	callout: PropTypes.bool,
+	calloutStyle: PropTypes.oneOf( [ 'primary', 'warning', 'error' ] ),
 };
 
 Button.defaultProps = {
@@ -172,6 +181,8 @@ Button.defaultProps = {
 	customizedTooltip: null,
 	tooltip: false,
 	inverse: false,
+	calloutStyle: null,
+	callout: null,
 };
 
 export default Button;

assets/js/googlesitekit/components-gm2/Button.stories.js

@@ -76,6 +76,55 @@ IconButton.args = {
 	className: 'googlesitekit-button--icon',
 };
 
+export const CalloutButton = Template.bind( {} );
+CalloutButton.storyName = 'Callout Button';
+CalloutButton.args = {
+	children: 'Callout Button',
+	callout: true,
+};
+
+export const DisabledCalloutButton = Template.bind( {} );
+DisabledCalloutButton.storyName = 'Disabled Callout Button';
+DisabledCalloutButton.args = {
+	children: 'Disabled Callout Button',
+	callout: true,
+	disabled: true,
+};
+
+export const CalloutWarningButton = Template.bind( {} );
+CalloutWarningButton.storyName = 'Callout Warning Button';
+CalloutWarningButton.args = {
+	children: 'Callout Warning',
+	callout: true,
+	calloutStyle: 'warning',
+};
+
+export const DisabledCalloutWarningButton = Template.bind( {} );
+DisabledCalloutWarningButton.storyName = 'Disabled Callout Warning Button';
+DisabledCalloutWarningButton.args = {
+	children: 'Disabled Warning Callout Button',
+	callout: true,
+	calloutStyle: 'warning',
+	disabled: true,
+};
+
+export const CalloutErrorButton = Template.bind( {} );
+CalloutErrorButton.storyName = 'Callout Error Button';
+CalloutErrorButton.args = {
+	children: 'Callout Error Button',
+	callout: true,
+	calloutStyle: 'error',
+};
+
+export const DisabledCalloutErrorButton = Template.bind( {} );
+DisabledCalloutErrorButton.storyName = 'Disabled Callout Error Button';
+DisabledCalloutErrorButton.args = {
+	children: 'Disabled Error Callout Button',
+	callout: true,
+	calloutStyle: 'error',
+	disabled: true,
+};
+
 export function VRTStory() {
 	return (
 		<div>
@@ -94,6 +143,28 @@ export function VRTStory() {
 			<p>
 				<TertiaryButton { ...TertiaryButton.args } />
 			</p>
+			<p>
+				<CalloutButton { ...CalloutButton.args } />
+			</p>
+			<p>
+				<CalloutWarningButton { ...CalloutWarningButton.args } />
+			</p>
+			<p>
+				<CalloutErrorButton { ...CalloutErrorButton.args } />
+			</p>
+			<p>
+				<DisabledCalloutButton { ...DisabledCalloutButton.args } />
+			</p>
+			<p>
+				<DisabledCalloutWarningButton
+					{ ...DisabledCalloutWarningButton.args }
+				/>
+			</p>
+			<p>
+				<DisabledCalloutErrorButton
+					{ ...DisabledCalloutErrorButton.args }
+				/>
+			</p>
 			<p>
 				<IconButton { ...IconButton.args } />
 			</p>

assets/sass/config/_variables-mui3.scss

@@ -187,6 +187,15 @@ $c-interactive-secondary-press: rgba($c-neutral-n-900, 0.24);
 $c-interactive-tertiary-hover: rgba($c-neutral-n-900, 0.08);
 $c-interactive-tertiary-focus: rgba($c-neutral-n-900, 0.26);
 $c-interactive-tertiary-press: rgba($c-neutral-n-900, 0.16);
+$c-interactive-callout-primary-hover: rgba($c-site-kit-sk-200, 0.6);
+$c-interactive-callout-primary-focus: $c-site-kit-sk-200;
+$c-interactive-callout-primary-disabled: rgba($c-site-kit-sk-600, 0.4);
+$c-interactive-callout-warning-hover: rgba($c-yellow-y-200, 0.6);
+$c-interactive-callout-warning-focus: $c-yellow-y-200;
+$c-interactive-callout-warning-disabled: rgba($c-yellow-y-700, 0.4);
+$c-interactive-callout-error-hover: rgba($c-red-r-100, 0.6);
+$c-interactive-callout-error-focus: $c-red-r-100;
+$c-interactive-callout-error-disabled: rgba($c-red-r-700, 0.4);
 
 // Custom color not from palette.
 $c-content-primary-hover: #2e5f41;

assets/sass/config/_variables.scss

@@ -299,6 +299,7 @@ $mdc-layout-grid-breakpoints: (
 /* stylelint-enable */
 
 $mdc-button-min-height: 40px;
+$mdc-button-callout-min-height: 32px;
 $mdc-typography-font-family: $f-primary;
 $mdc-typography-styles-subtitle1: (
 	font-size: $fs-body-md,

assets/sass/vendor/_mdc-button.scss

@@ -138,4 +138,91 @@
 			outline: none;
 		}
 	}
+
+	.mdc-button--callout {
+		font-family: $f-primary;
+		font-weight: $fw-medium;
+		height: auto;
+		letter-spacing: normal;
+		min-height: $mdc-button-callout-min-height;
+		padding: 6px 16px;
+
+		&.mdc-button--callout-primary {
+
+			@include mdc-button-ink-color( $c-content-on-primary-container );
+
+			&:hover {
+
+				@include mdc-button-filled-accessible( $c-interactive-callout-primary-hover );
+				@include mdc-button-ink-color( $c-content-on-primary-container );
+
+				text-decoration: none;
+			}
+
+			&:active,
+			&:focus {
+
+				@include mdc-button-filled-accessible( $c-interactive-callout-primary-focus );
+				@include mdc-button-ink-color( $c-content-on-primary-container );
+
+				outline: none;
+			}
+
+			&:disabled {
+				color: $c-interactive-callout-primary-disabled;
+			}
+		}
+
+		&.mdc-button--callout-warning {
+
+			@include mdc-button-ink-color( $c-utility-on-warning-container );
+
+			&:hover {
+
+				@include mdc-button-filled-accessible( $c-interactive-callout-warning-hover );
+				@include mdc-button-ink-color( $c-utility-on-warning-container );
+
+				text-decoration: none;
+			}
+
+			&:active,
+			&:focus {
+
+				@include mdc-button-filled-accessible( $c-interactive-callout-warning-focus );
+				@include mdc-button-ink-color( $c-utility-on-warning-container );
+
+				outline: none;
+			}
+
+			&:disabled {
+				color: $c-interactive-callout-warning-disabled;
+			}
+		}
+
+		&.mdc-button--callout-error {
+
+			@include mdc-button-ink-color( $c-utility-on-error-container );
+
+			&:hover {
+
+				@include mdc-button-filled-accessible( $c-interactive-callout-error-hover );
+				@include mdc-button-ink-color( $c-utility-on-error-container );
+
+				text-decoration: none;
+			}
+
+			&:active,
+			&:focus {
+
+				@include mdc-button-filled-accessible( $c-interactive-callout-error-focus );
+				@include mdc-button-ink-color( $c-utility-on-error-container );
+
+				outline: none;
+			}
+
+			&:disabled {
+				color: $c-interactive-callout-error-disabled;
+			}
+		}
+	}
 }