diff --git a/packages/core/src/components/button/_common.scss b/packages/core/src/components/button/_common.scss index b6316f4d24..3d29e70cc0 100644 --- a/packages/core/src/components/button/_common.scss +++ b/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; } diff --git a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx index 95d5b25278..6278cc4c2f 100644 --- a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx +++ b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx @@ -17,9 +17,9 @@ 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; @@ -27,9 +27,9 @@ export interface IButtonsExampleState { 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 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
Props
- - +
Example
@@ -96,6 +93,8 @@ export class ButtonsExample extends React.PureComponent {!iconOnly && "Click to wiggle"} @@ -111,6 +110,8 @@ export class ButtonsExample extends React.PureComponent diff --git a/packages/docs-app/src/examples/core-examples/common/sizeSelect.tsx b/packages/docs-app/src/examples/core-examples/common/sizeSelect.tsx new file mode 100644 index 0000000000..9085f91cea --- /dev/null +++ b/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 = ({ size, onChange }) => { + const handleSmall = React.useCallback(() => onChange("small"), []); + const handleRegular = React.useCallback(() => onChange("regular"), []); + const handleLarge = React.useCallback(() => onChange("large"), []); + + return ( +