[core] fix(Button): use 12px font in small buttons

packages/core/src/components/button/_common.scss

@@ -130,6 +130,7 @@ $button-intents: (
 
 @mixin pt-button-height-small() {
   @include pt-button-height($pt-button-height-small);
+  font-size: $pt-font-size-small;
   padding: $button-padding-small;
 }
 

packages/docs-app/src/examples/core-examples/buttonsExample.tsx

@@ -17,19 +17,19 @@
 import * as React from "react";
 
 import { AnchorButton, Button, Code, H5, Intent, Switch } from "@blueprintjs/core";
-import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleBooleanChange, IExampleProps } from "@blueprintjs/docs-theme";
 
-import { IntentSelect } from "./common/intentSelect";
+import { Size, SizeSelect } from "./common/sizeSelect";
 
 export interface IButtonsExampleState {
     active: boolean;
     disabled: boolean;
     iconOnly: boolean;
     intent: Intent;
     loading: boolean;
-    large: boolean;
     minimal: boolean;
     outlined: boolean;
+    size: Size;
     wiggling: boolean;
 }
 
@@ -39,10 +39,10 @@ export class ButtonsExample extends React.PureComponent<IExampleProps, IButtonsE
         disabled: false,
         iconOnly: false,
         intent: Intent.NONE,
-        large: false,
         loading: false,
         minimal: false,
         outlined: false,
+        size: "regular",
         wiggling: false,
     };
 
@@ -52,15 +52,13 @@ export class ButtonsExample extends React.PureComponent<IExampleProps, IButtonsE
 
     private handleIconOnlyChange = handleBooleanChange(iconOnly => this.setState({ iconOnly }));
 
-    private handleLargeChange = handleBooleanChange(large => this.setState({ large }));
-
     private handleLoadingChange = handleBooleanChange(loading => this.setState({ loading }));
 
     private handleMinimalChange = handleBooleanChange(minimal => this.setState({ minimal }));
 
     private handleOutlinedChange = handleBooleanChange(outlined => this.setState({ outlined }));
 
-    private handleIntentChange = handleStringChange(intent => this.setState({ intent: intent as Intent }));
+    private handleSizeChange = (size: Size) => this.setState({ size });
 
     private wiggleTimeoutId: number;
 
@@ -69,18 +67,17 @@ export class ButtonsExample extends React.PureComponent<IExampleProps, IButtonsE
     }
 
     public render() {
-        const { iconOnly, wiggling, ...buttonProps } = this.state;
+        const { iconOnly, wiggling, size, ...buttonProps } = this.state;
 
         const options = (
             <>
                 <H5>Props</H5>
                 <Switch label="Active" checked={this.state.active} onChange={this.handleActiveChange} />
                 <Switch label="Disabled" checked={this.state.disabled} onChange={this.handleDisabledChange} />
-                <Switch label="Large" checked={this.state.large} onChange={this.handleLargeChange} />
                 <Switch label="Loading" checked={this.state.loading} onChange={this.handleLoadingChange} />
                 <Switch label="Minimal" checked={this.state.minimal} onChange={this.handleMinimalChange} />
                 <Switch label="Outlined" checked={this.state.outlined} onChange={this.handleOutlinedChange} />
-                <IntentSelect intent={this.state.intent} onChange={this.handleIntentChange} />
+                <SizeSelect size={this.state.size} onChange={this.handleSizeChange} />
                 <H5>Example</H5>
                 <Switch label="Icons only" checked={this.state.iconOnly} onChange={this.handleIconOnlyChange} />
             </>
@@ -96,6 +93,8 @@ export class ButtonsExample extends React.PureComponent<IExampleProps, IButtonsE
                         className={this.state.wiggling ? "docs-wiggle" : ""}
                         icon="refresh"
                         onClick={this.beginWiggling}
+                        small={size === "small"}
+                        large={size === "large"}
                         {...buttonProps}
                     >
                         {!iconOnly && "Click to wiggle"}
@@ -111,6 +110,8 @@ export class ButtonsExample extends React.PureComponent<IExampleProps, IButtonsE
                         rightIcon="share"
                         target="_blank"
                         text={iconOnly ? undefined : "Duplicate this page"}
+                        small={size === "small"}
+                        large={size === "large"}
                         {...buttonProps}
                     />
                 </div>

packages/docs-app/src/examples/core-examples/common/sizeSelect.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2021 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+
+import { Button, ButtonGroup, Label } from "@blueprintjs/core";
+
+export type Size = "small" | "regular" | "large";
+
+export interface SizeSelectProps {
+    size: Size;
+    onChange: (size: Size) => void;
+}
+
+export const SizeSelect: React.FC<SizeSelectProps> = ({ size, onChange }) => {
+    const handleSmall = React.useCallback(() => onChange("small"), []);
+    const handleRegular = React.useCallback(() => onChange("regular"), []);
+    const handleLarge = React.useCallback(() => onChange("large"), []);
+
+    return (
+        <Label>
+            Size
+            <ButtonGroup fill={true} style={{ marginTop: 5 }}>
+                <Button active={size === "small"} text="Small" onClick={handleSmall} />
+                <Button active={size === "regular"} text="Regular" onClick={handleRegular} />
+                <Button active={size === "large"} text="Large" onClick={handleLarge} />
+            </ButtonGroup>
+        </Label>
+    );
+};