Skip to content

Commit 8e2c9ce

Browse files
ggdouglasggdouglas
authored
[docs] Update Control Card Examples (#7110)
1 parent 1a8607c commit 8e2c9ce

File tree

7 files changed

+296
-328
lines changed

7 files changed

+296
-328
lines changed

‎packages/docs-app/src/examples/core-examples/checkboxCardExample.tsx‎

Lines changed: 68 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Copyright 2023 Palantir Technologies, Inc. All rights reserved.
2+
* Copyright 2024 Palantir Technologies, Inc. All rights reserved.
33
*
44
* Licensed under the Apache License, Version 2.0 (the "License");
55
* you may not use this file except in compliance with the License.
@@ -18,7 +18,7 @@ import classNames from "classnames";
1818
import * as React from "react";
1919

2020
import {
21-
type Alignment,
21+
Alignment,
2222
CheckboxCard,
2323
type CheckboxCardProps,
2424
Classes,
@@ -33,98 +33,80 @@ import { PropCodeTooltip } from "../../common/propCodeTooltip";
3333

3434
import { AlignmentSelect } from "./common/alignmentSelect";
3535

36-
interface CheckboxCardExampleState
37-
extends Pick<CheckboxCardProps, "alignIndicator" | "compact" | "disabled" | "showAsSelectedWhenChecked"> {
38-
showSubtext: boolean;
39-
}
36+
export const CheckboxCardExample: React.FC<ExampleProps> = props => {
37+
const [alignIndicator, setAlignIndicator] = React.useState<Alignment>(Alignment.LEFT);
38+
const [compact, setCompact] = React.useState(false);
39+
const [disabled, setDisabled] = React.useState(false);
40+
const [showAsSelectedWhenChecked, setShowAsSelectedWhenChecked] = React.useState(true);
41+
const [showSubtext, setShowSubtext] = React.useState(true);
4042

41-
export class CheckboxCardExample extends React.PureComponent<ExampleProps, CheckboxCardExampleState> {
42-
public state: CheckboxCardExampleState = {
43-
alignIndicator: "left",
44-
compact: false,
45-
disabled: false,
46-
showAsSelectedWhenChecked: true,
47-
showSubtext: true,
48-
};
49-
50-
public render() {
51-
const { showSubtext, ...checkboxCardProps } = this.state;
52-
return (
53-
<Example options={this.renderOptions()} {...this.props}>
54-
<FormGroup
55-
className="docs-control-card-group"
56-
contentClassName="docs-control-card-group-row"
57-
label={<H5>Lunch Special</H5>}
58-
>
59-
<CheckboxCard {...checkboxCardProps}>
60-
Soup
61-
{showSubtext && <Subtext>Tomato Basil or Broccoli Cheddar</Subtext>}
62-
</CheckboxCard>
63-
<CheckboxCard {...checkboxCardProps}>
64-
Salad
65-
{showSubtext && <Subtext>Caesar, Caprese, or Fresh fruit</Subtext>}
66-
</CheckboxCard>
67-
<CheckboxCard {...checkboxCardProps}>
68-
Sandwich
69-
{showSubtext && <Subtext>Chicken, Turkey, or Vegetable</Subtext>}
70-
</CheckboxCard>
71-
</FormGroup>
72-
</Example>
73-
);
74-
}
75-
76-
private renderOptions() {
77-
const { alignIndicator, compact, disabled, showAsSelectedWhenChecked, showSubtext } = this.state;
78-
return (
79-
<>
80-
<H5>Props</H5>
81-
<Switch checked={compact} label="Compact" onChange={this.toggleCompact} />
82-
<Switch checked={disabled} label="Disabled" onChange={this.toggleDisabled} />
83-
<PropCodeTooltip snippet={`showAsSelectedWhenChecked={${showAsSelectedWhenChecked}}`}>
84-
<Switch
85-
checked={showAsSelectedWhenChecked}
86-
labelElement={
87-
<span>
88-
Show as selected <br />
89-
when checked
90-
</span>
91-
}
92-
onChange={this.toggleShowAsSelected}
93-
/>
94-
</PropCodeTooltip>
95-
<Divider />
96-
<PropCodeTooltip snippet={`alignIndicator="${alignIndicator}"`}>
97-
<AlignmentSelect
98-
align={alignIndicator}
99-
allowCenter={false}
100-
label="Align control indicator"
101-
onChange={this.handleAlignChange}
102-
/>
103-
</PropCodeTooltip>
104-
<H5>Content</H5>
105-
<Switch checked={showSubtext} label="Show sub text" onChange={this.toggleShowSubtext} />
106-
</>
107-
);
108-
}
109-
110-
private handleAlignChange = (alignIndicator: Alignment) => this.setState({ alignIndicator });
111-
112-
private toggleCompact = handleBooleanChange(compact => this.setState({ compact }));
43+
const options = (
44+
<>
45+
<H5>Props</H5>
46+
<Switch checked={compact} label="Compact" onChange={handleBooleanChange(setCompact)} />
47+
<Switch checked={disabled} label="Disabled" onChange={handleBooleanChange(setDisabled)} />
48+
<PropCodeTooltip snippet={`showAsSelectedWhenChecked={${showAsSelectedWhenChecked}}`}>
49+
<Switch
50+
checked={showAsSelectedWhenChecked}
51+
labelElement={
52+
<span>
53+
Show as selected <br />
54+
when checked
55+
</span>
56+
}
57+
onChange={handleBooleanChange(setShowAsSelectedWhenChecked)}
58+
/>
59+
</PropCodeTooltip>
60+
<Divider />
61+
<PropCodeTooltip snippet={`alignIndicator="${alignIndicator}"`}>
62+
<AlignmentSelect
63+
align={alignIndicator}
64+
allowCenter={false}
65+
label="Align control indicator"
66+
onChange={setAlignIndicator}
67+
/>
68+
</PropCodeTooltip>
69+
<H5>Content</H5>
70+
<Switch checked={showSubtext} label="Show sub text" onChange={handleBooleanChange(setShowSubtext)} />
71+
</>
72+
);
11373

114-
private toggleDisabled = handleBooleanChange(disabled => this.setState({ disabled }));
74+
const checkboxCardProps: CheckboxCardProps = {
75+
alignIndicator,
76+
compact,
77+
disabled,
78+
showAsSelectedWhenChecked,
79+
};
11580

116-
private toggleShowAsSelected = handleBooleanChange(showAsSelectedWhenChecked =>
117-
this.setState({ showAsSelectedWhenChecked }),
81+
return (
82+
<Example options={options} {...props}>
83+
<FormGroup
84+
className="docs-control-card-group"
85+
contentClassName="docs-control-card-group-row"
86+
label={<H5>Lunch Special</H5>}
87+
>
88+
<CheckboxCard {...checkboxCardProps}>
89+
Soup
90+
{showSubtext && <Subtext>Tomato Basil or Broccoli Cheddar</Subtext>}
91+
</CheckboxCard>
92+
<CheckboxCard {...checkboxCardProps}>
93+
Salad
94+
{showSubtext && <Subtext>Caesar, Caprese, or Fresh fruit</Subtext>}
95+
</CheckboxCard>
96+
<CheckboxCard {...checkboxCardProps}>
97+
Sandwich
98+
{showSubtext && <Subtext>Chicken, Turkey, or Vegetable</Subtext>}
99+
</CheckboxCard>
100+
</FormGroup>
101+
</Example>
118102
);
103+
};
119104

120-
private toggleShowSubtext = handleBooleanChange(showSubtext => this.setState({ showSubtext }));
121-
}
122-
123-
function Subtext(props: { children: React.ReactNode }) {
105+
const Subtext = (props: React.PropsWithChildren<object>) => {
124106
return (
125107
<>
126108
<br />
127109
<span className={classNames(Classes.TEXT_MUTED, Classes.TEXT_SMALL)}>{props.children}</span>
128110
</>
129111
);
130-
}
112+
};

‎packages/docs-app/src/examples/core-examples/checkboxExample.tsx‎

Lines changed: 33 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Copyright 2016 Palantir Technologies, Inc. All rights reserved.
2+
* Copyright 2024 Palantir Technologies, Inc. All rights reserved.
33
*
44
* Licensed under the Apache License, Version 2.0 (the "License");
55
* you may not use this file except in compliance with the License.
@@ -16,68 +16,43 @@
1616

1717
import * as React from "react";
1818

19-
import { Alignment, Card, Checkbox, FormGroup, H5, Switch } from "@blueprintjs/core";
19+
import { Alignment, Card, Checkbox, type CheckboxProps, FormGroup, H5, Switch } from "@blueprintjs/core";
2020
import { Example, type ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
2121

2222
import { AlignmentSelect } from "./common/alignmentSelect";
2323

24-
export interface CheckboxExampleState {
25-
alignIndicator: Alignment;
26-
disabled: boolean;
27-
inline: boolean;
28-
large: boolean;
29-
value?: string;
30-
}
31-
32-
export class CheckboxExample extends React.PureComponent<ExampleProps, CheckboxExampleState> {
33-
public state: CheckboxExampleState = {
34-
alignIndicator: Alignment.LEFT,
35-
disabled: false,
36-
inline: false,
37-
large: false,
38-
};
39-
40-
public render() {
41-
const options = (
42-
<>
43-
<H5>Props</H5>
44-
<Switch checked={this.state.disabled} label="Disabled" onChange={this.handleDisabledChange} />
45-
<Switch checked={this.state.inline} label="Inline" onChange={this.handleInlineChange} />
46-
<Switch checked={this.state.large} label="Large" onChange={this.handleLargeChange} />
47-
<AlignmentSelect
48-
align={this.state.alignIndicator}
49-
allowCenter={false}
50-
label="Align indicator"
51-
onChange={this.handleAlignChange}
52-
/>
53-
</>
54-
);
55-
56-
return (
57-
<Example options={options} {...this.props}>
58-
{this.renderExample()}
59-
</Example>
60-
);
61-
}
62-
63-
protected renderExample() {
64-
return (
24+
export const CheckboxExample: React.FC<ExampleProps> = props => {
25+
const [alignIndicator, setAlignIndicator] = React.useState<Alignment>(Alignment.LEFT);
26+
const [disabled, setDisabled] = React.useState(false);
27+
const [inline, setInline] = React.useState(false);
28+
const [large, setLarge] = React.useState(false);
29+
30+
const options = (
31+
<>
32+
<H5>Props</H5>
33+
<Switch checked={disabled} label="Disabled" onChange={handleBooleanChange(setDisabled)} />
34+
<Switch checked={inline} label="Inline" onChange={handleBooleanChange(setInline)} />
35+
<Switch checked={large} label="Large" onChange={handleBooleanChange(setLarge)} />
36+
<AlignmentSelect
37+
align={alignIndicator}
38+
allowCenter={false}
39+
label="Align indicator"
40+
onChange={setAlignIndicator}
41+
/>
42+
</>
43+
);
44+
45+
const checkboxProps: CheckboxProps = { alignIndicator, disabled, inline, large };
46+
47+
return (
48+
<Example options={options} {...props}>
6549
<Card>
6650
<FormGroup label="Lunch special">
67-
<Checkbox {...this.state} label="Soup" defaultIndeterminate={true} />
68-
<Checkbox {...this.state} label="Salad" />
69-
<Checkbox {...this.state} label="Sandwich" />
51+
<Checkbox {...checkboxProps} label="Soup" defaultIndeterminate={true} />
52+
<Checkbox {...checkboxProps} label="Salad" />
53+
<Checkbox {...checkboxProps} label="Sandwich" />
7054
</FormGroup>
7155
</Card>
72-
);
73-
}
74-
75-
// eslint-disable @typescript-eslint/member-ordering
76-
private handleAlignChange = (alignIndicator: Alignment) => this.setState({ alignIndicator });
77-
78-
private handleDisabledChange = handleBooleanChange(disabled => this.setState({ disabled }));
79-
80-
private handleInlineChange = handleBooleanChange(inline => this.setState({ inline }));
81-
82-
private handleLargeChange = handleBooleanChange(large => this.setState({ large }));
83-
}
56+
</Example>
57+
);
58+
};

0 commit comments

Comments
 (0)