Skip to content

Commit

Permalink
[docs] Update Control Card Examples (#7110)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ggdouglas
ggdouglas authored Dec 5, 2024
1 parent 1a8607c commit 8e2c9ce
Show file tree
Hide file tree
Showing 7 changed files with 296 additions and 328 deletions.
154 changes: 68 additions & 86 deletions packages/docs-app/src/examples/core-examples/checkboxCardExample.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* Copyright 2023 Palantir Technologies, Inc. All rights reserved.
* Copyright 2024 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.
Expand All @@ -18,7 +18,7 @@ import classNames from "classnames";
import * as React from "react";

import {
type Alignment,
Alignment,
CheckboxCard,
type CheckboxCardProps,
Classes,
Expand All @@ -33,98 +33,80 @@ import { PropCodeTooltip } from "../../common/propCodeTooltip";

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

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

export class CheckboxCardExample extends React.PureComponent<ExampleProps, CheckboxCardExampleState> {
public state: CheckboxCardExampleState = {
alignIndicator: "left",
compact: false,
disabled: false,
showAsSelectedWhenChecked: true,
showSubtext: true,
};

public render() {
const { showSubtext, ...checkboxCardProps } = this.state;
return (
<Example options={this.renderOptions()} {...this.props}>
<FormGroup
className="docs-control-card-group"
contentClassName="docs-control-card-group-row"
label={<H5>Lunch Special</H5>}
>
<CheckboxCard {...checkboxCardProps}>
Soup
{showSubtext && <Subtext>Tomato Basil or Broccoli Cheddar</Subtext>}
</CheckboxCard>
<CheckboxCard {...checkboxCardProps}>
Salad
{showSubtext && <Subtext>Caesar, Caprese, or Fresh fruit</Subtext>}
</CheckboxCard>
<CheckboxCard {...checkboxCardProps}>
Sandwich
{showSubtext && <Subtext>Chicken, Turkey, or Vegetable</Subtext>}
</CheckboxCard>
</FormGroup>
</Example>
);
}

private renderOptions() {
const { alignIndicator, compact, disabled, showAsSelectedWhenChecked, showSubtext } = this.state;
return (
<>
<H5>Props</H5>
<Switch checked={compact} label="Compact" onChange={this.toggleCompact} />
<Switch checked={disabled} label="Disabled" onChange={this.toggleDisabled} />
<PropCodeTooltip snippet={`showAsSelectedWhenChecked={${showAsSelectedWhenChecked}}`}>
<Switch
checked={showAsSelectedWhenChecked}
labelElement={
<span>
Show as selected <br />
when checked
</span>
}
onChange={this.toggleShowAsSelected}
/>
</PropCodeTooltip>
<Divider />
<PropCodeTooltip snippet={`alignIndicator="${alignIndicator}"`}>
<AlignmentSelect
align={alignIndicator}
allowCenter={false}
label="Align control indicator"
onChange={this.handleAlignChange}
/>
</PropCodeTooltip>
<H5>Content</H5>
<Switch checked={showSubtext} label="Show sub text" onChange={this.toggleShowSubtext} />
</>
);
}

private handleAlignChange = (alignIndicator: Alignment) => this.setState({ alignIndicator });

private toggleCompact = handleBooleanChange(compact => this.setState({ compact }));
const options = (
<>
<H5>Props</H5>
<Switch checked={compact} label="Compact" onChange={handleBooleanChange(setCompact)} />
<Switch checked={disabled} label="Disabled" onChange={handleBooleanChange(setDisabled)} />
<PropCodeTooltip snippet={`showAsSelectedWhenChecked={${showAsSelectedWhenChecked}}`}>
<Switch
checked={showAsSelectedWhenChecked}
labelElement={
<span>
Show as selected <br />
when checked
</span>
}
onChange={handleBooleanChange(setShowAsSelectedWhenChecked)}
/>
</PropCodeTooltip>
<Divider />
<PropCodeTooltip snippet={`alignIndicator="${alignIndicator}"`}>
<AlignmentSelect
align={alignIndicator}
allowCenter={false}
label="Align control indicator"
onChange={setAlignIndicator}
/>
</PropCodeTooltip>
<H5>Content</H5>
<Switch checked={showSubtext} label="Show sub text" onChange={handleBooleanChange(setShowSubtext)} />
</>
);

private toggleDisabled = handleBooleanChange(disabled => this.setState({ disabled }));
const checkboxCardProps: CheckboxCardProps = {
alignIndicator,
compact,
disabled,
showAsSelectedWhenChecked,
};

private toggleShowAsSelected = handleBooleanChange(showAsSelectedWhenChecked =>
this.setState({ showAsSelectedWhenChecked }),
return (
<Example options={options} {...props}>
<FormGroup
className="docs-control-card-group"
contentClassName="docs-control-card-group-row"
label={<H5>Lunch Special</H5>}
>
<CheckboxCard {...checkboxCardProps}>
Soup
{showSubtext && <Subtext>Tomato Basil or Broccoli Cheddar</Subtext>}
</CheckboxCard>
<CheckboxCard {...checkboxCardProps}>
Salad
{showSubtext && <Subtext>Caesar, Caprese, or Fresh fruit</Subtext>}
</CheckboxCard>
<CheckboxCard {...checkboxCardProps}>
Sandwich
{showSubtext && <Subtext>Chicken, Turkey, or Vegetable</Subtext>}
</CheckboxCard>
</FormGroup>
</Example>
);
};

private toggleShowSubtext = handleBooleanChange(showSubtext => this.setState({ showSubtext }));
}

function Subtext(props: { children: React.ReactNode }) {
const Subtext = (props: React.PropsWithChildren<object>) => {
return (
<>
<br />
<span className={classNames(Classes.TEXT_MUTED, Classes.TEXT_SMALL)}>{props.children}</span>
</>
);
}
};
91 changes: 33 additions & 58 deletions packages/docs-app/src/examples/core-examples/checkboxExample.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* Copyright 2016 Palantir Technologies, Inc. All rights reserved.
* Copyright 2024 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.
Expand All @@ -16,68 +16,43 @@

import * as React from "react";

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

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

export interface CheckboxExampleState {
alignIndicator: Alignment;
disabled: boolean;
inline: boolean;
large: boolean;
value?: string;
}

export class CheckboxExample extends React.PureComponent<ExampleProps, CheckboxExampleState> {
public state: CheckboxExampleState = {
alignIndicator: Alignment.LEFT,
disabled: false,
inline: false,
large: false,
};

public render() {
const options = (
<>
<H5>Props</H5>
<Switch checked={this.state.disabled} label="Disabled" onChange={this.handleDisabledChange} />
<Switch checked={this.state.inline} label="Inline" onChange={this.handleInlineChange} />
<Switch checked={this.state.large} label="Large" onChange={this.handleLargeChange} />
<AlignmentSelect
align={this.state.alignIndicator}
allowCenter={false}
label="Align indicator"
onChange={this.handleAlignChange}
/>
</>
);

return (
<Example options={options} {...this.props}>
{this.renderExample()}
</Example>
);
}

protected renderExample() {
return (
export const CheckboxExample: React.FC<ExampleProps> = props => {
const [alignIndicator, setAlignIndicator] = React.useState<Alignment>(Alignment.LEFT);
const [disabled, setDisabled] = React.useState(false);
const [inline, setInline] = React.useState(false);
const [large, setLarge] = React.useState(false);

const options = (
<>
<H5>Props</H5>
<Switch checked={disabled} label="Disabled" onChange={handleBooleanChange(setDisabled)} />
<Switch checked={inline} label="Inline" onChange={handleBooleanChange(setInline)} />
<Switch checked={large} label="Large" onChange={handleBooleanChange(setLarge)} />
<AlignmentSelect
align={alignIndicator}
allowCenter={false}
label="Align indicator"
onChange={setAlignIndicator}
/>
</>
);

const checkboxProps: CheckboxProps = { alignIndicator, disabled, inline, large };

return (
<Example options={options} {...props}>
<Card>
<FormGroup label="Lunch special">
<Checkbox {...this.state} label="Soup" defaultIndeterminate={true} />
<Checkbox {...this.state} label="Salad" />
<Checkbox {...this.state} label="Sandwich" />
<Checkbox {...checkboxProps} label="Soup" defaultIndeterminate={true} />
<Checkbox {...checkboxProps} label="Salad" />
<Checkbox {...checkboxProps} label="Sandwich" />
</FormGroup>
</Card>
);
}

// eslint-disable @typescript-eslint/member-ordering
private handleAlignChange = (alignIndicator: Alignment) => this.setState({ alignIndicator });

private handleDisabledChange = handleBooleanChange(disabled => this.setState({ disabled }));

private handleInlineChange = handleBooleanChange(inline => this.setState({ inline }));

private handleLargeChange = handleBooleanChange(large => this.setState({ large }));
}
</Example>
);
};
Loading

1 comment on commit 8e2c9ce

@svc-palantir-github
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[docs] Update Control Card Examples (#7110)

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

Please sign in to comment.