Skip to content

Commit 9e8254b

Browse files
ggdouglasggdouglas
authored
[docs-app] Add additional actions to code examples (#7540)
1 parent 9c64daf commit 9e8254b

File tree

17 files changed

+2414
-86
lines changed

17 files changed

+2414
-86
lines changed

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

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,30 +6,45 @@ import { CodeExample, type ExampleProps } from "@blueprintjs/docs-theme";
66

77
import BreadcrumbsBasic from "./breadcrumbs/BreadcrumbsBasic";
88
import BreadcrumbsBasicPreview from "./breadcrumbs/BreadcrumbsBasic.tsx.preview?raw";
9+
import BreadcrumbsBasicCode from "./breadcrumbs/BreadcrumbsBasic.tsx?raw";
910
import BreadcrumbsOverflow from "./breadcrumbs/BreadcrumbsOverflow";
1011
import BreadcrumbsOverflowPreview from "./breadcrumbs/BreadcrumbsOverflow.tsx.preview?raw";
12+
import BreadcrumbsOverflowCode from "./breadcrumbs/BreadcrumbsOverflow.tsx?raw";
1113
import BreadcrumbsRenderer from "./breadcrumbs/BreadcrumbsRenderer";
1214
import BreadcrumbsRendererPreview from "./breadcrumbs/BreadcrumbsRenderer.tsx.preview?raw";
15+
import BreadcrumbsRendererCode from "./breadcrumbs/BreadcrumbsRenderer.tsx?raw";
1316

1417
export const BreadcrumbsBasicExample: React.FC<ExampleProps> = props => {
1518
return (
16-
<CodeExample code={BreadcrumbsBasicPreview} {...props}>
19+
<CodeExample
20+
previewCode={BreadcrumbsBasicPreview}
21+
sourceCode={BreadcrumbsBasicCode}
22+
{...props}
23+
>
1724
<BreadcrumbsBasic />
1825
</CodeExample>
1926
);
2027
};
2128

2229
export const BreadcrumbsRendererExample: React.FC<ExampleProps> = props => {
2330
return (
24-
<CodeExample code={BreadcrumbsRendererPreview} {...props}>
31+
<CodeExample
32+
previewCode={BreadcrumbsRendererPreview}
33+
sourceCode={BreadcrumbsRendererCode}
34+
{...props}
35+
>
2536
<BreadcrumbsRenderer />
2637
</CodeExample>
2738
);
2839
};
2940

3041
export const BreadcrumbsOverflowExample: React.FC<ExampleProps> = props => {
3142
return (
32-
<CodeExample code={BreadcrumbsOverflowPreview} {...props}>
43+
<CodeExample
44+
previewCode={BreadcrumbsOverflowPreview}
45+
sourceCode={BreadcrumbsOverflowCode}
46+
{...props}
47+
>
3348
<BreadcrumbsOverflow />
3449
</CodeExample>
3550
);

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

Lines changed: 48 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,140 +6,174 @@ import { CodeExample, type ExampleProps } from "@blueprintjs/docs-theme";
66

77
import ButtonAlignText from "./button/ButtonAlignText";
88
import buttonAlignTextPreview from "./button/ButtonAlignText.tsx.preview?raw";
9+
import buttonAlignTextCode from "./button/ButtonAlignText.tsx?raw";
910
import ButtonAnchorButton from "./button/ButtonAnchorButton";
1011
import buttonAnchorButtonPreview from "./button/ButtonAnchorButton.tsx.preview?raw";
12+
import buttonAnchorButtonCode from "./button/ButtonAnchorButton.tsx?raw";
1113
import ButtonBasic from "./button/ButtonBasic";
1214
import buttonBasicPreview from "./button/ButtonBasic.tsx.preview?raw";
15+
import buttonBasicCode from "./button/ButtonBasic.tsx?raw";
1316
import ButtonDisabledButtonTooltip from "./button/ButtonDisabledButtonTooltip";
1417
import buttonDisabledButtonTooltipPreview from "./button/ButtonDisabledButtonTooltip.tsx.preview?raw";
18+
import buttonDisabledButtonTooltipCode from "./button/ButtonDisabledButtonTooltip.tsx?raw";
1519
import ButtonEllipsizeText from "./button/ButtonEllipsizeText";
1620
import buttonEllipsizeTextPreview from "./button/ButtonEllipsizeText.tsx.preview?raw";
21+
import buttonEllipsizeTextCode from "./button/ButtonEllipsizeText.tsx?raw";
1722
import ButtonFill from "./button/ButtonFill";
1823
import buttonFillPreview from "./button/ButtonFill.tsx.preview?raw";
24+
import buttonFillCode from "./button/ButtonFill.tsx?raw";
1925
import ButtonIcon from "./button/ButtonIcon";
2026
import buttonIconPreview from "./button/ButtonIcon.tsx.preview?raw";
27+
import buttonIconCode from "./button/ButtonIcon.tsx?raw";
2128
import ButtonIconWithText from "./button/ButtonIconWithText";
2229
import buttonIconWithTextPreview from "./button/ButtonIconWithText.tsx.preview?raw";
30+
import buttonIconWithTextCode from "./button/ButtonIconWithText.tsx?raw";
2331
import ButtonIntent from "./button/ButtonIntent";
2432
import buttonIntentPreview from "./button/ButtonIntent.tsx.preview?raw";
33+
import buttonIntentCode from "./button/ButtonIntent.tsx?raw";
2534
import ButtonMinimal from "./button/ButtonMinimal";
2635
import buttonMinimalPreview from "./button/ButtonMinimal.tsx.preview?raw";
36+
import buttonMinimalCode from "./button/ButtonMinimal.tsx?raw";
2737
import ButtonOutlined from "./button/ButtonOutlined";
2838
import buttonOutlinedPreview from "./button/ButtonOutlined.tsx.preview?raw";
39+
import buttonOutlinedCode from "./button/ButtonOutlined.tsx?raw";
2940
import ButtonSize from "./button/ButtonSize";
3041
import buttonSizePreview from "./button/ButtonSize.tsx.preview?raw";
42+
import buttonSizeCode from "./button/ButtonSize.tsx?raw";
3143
import ButtonStates from "./button/ButtonStates";
3244
import buttonStatesPreview from "./button/ButtonStates.tsx.preview?raw";
45+
import buttonStatesCode from "./button/ButtonStates.tsx?raw";
3346
import ButtonVariant from "./button/ButtonVariant";
3447
import buttonVariantPreview from "./button/ButtonVariant.tsx.preview?raw";
48+
import buttonVariantCode from "./button/ButtonVariant.tsx?raw";
3549

3650
export const ButtonBasicExample: React.FC<ExampleProps> = props => {
3751
return (
38-
<CodeExample code={buttonBasicPreview} {...props}>
52+
<CodeExample previewCode={buttonBasicPreview} sourceCode={buttonBasicCode} {...props}>
3953
<ButtonBasic />
4054
</CodeExample>
4155
);
4256
};
4357

4458
export const ButtonIntentExample: React.FC<ExampleProps> = props => {
4559
return (
46-
<CodeExample code={buttonIntentPreview} {...props}>
60+
<CodeExample previewCode={buttonIntentPreview} sourceCode={buttonIntentCode} {...props}>
4761
<ButtonIntent />
4862
</CodeExample>
4963
);
5064
};
5165

5266
export const ButtonVariantExample: React.FC<ExampleProps> = props => {
5367
return (
54-
<CodeExample code={buttonVariantPreview} {...props}>
68+
<CodeExample previewCode={buttonVariantPreview} sourceCode={buttonVariantCode} {...props}>
5569
<ButtonVariant />
5670
</CodeExample>
5771
);
5872
};
5973

6074
export const ButtonMinimalExample: React.FC<ExampleProps> = props => {
6175
return (
62-
<CodeExample code={buttonMinimalPreview} {...props}>
76+
<CodeExample previewCode={buttonMinimalPreview} sourceCode={buttonMinimalCode} {...props}>
6377
<ButtonMinimal />
6478
</CodeExample>
6579
);
6680
};
6781

6882
export const ButtonOutlinedExample: React.FC<ExampleProps> = props => {
6983
return (
70-
<CodeExample code={buttonOutlinedPreview} {...props}>
84+
<CodeExample previewCode={buttonOutlinedPreview} sourceCode={buttonOutlinedCode} {...props}>
7185
<ButtonOutlined />
7286
</CodeExample>
7387
);
7488
};
7589

7690
export const ButtonSizeExample: React.FC<ExampleProps> = props => {
7791
return (
78-
<CodeExample code={buttonSizePreview} {...props}>
92+
<CodeExample previewCode={buttonSizePreview} sourceCode={buttonSizeCode} {...props}>
7993
<ButtonSize />
8094
</CodeExample>
8195
);
8296
};
8397

8498
export const ButtonFillExample: React.FC<ExampleProps> = props => {
8599
return (
86-
<CodeExample code={buttonFillPreview} {...props}>
100+
<CodeExample previewCode={buttonFillPreview} sourceCode={buttonFillCode} {...props}>
87101
<ButtonFill />
88102
</CodeExample>
89103
);
90104
};
91105

92106
export const ButtonAlignTextExample: React.FC<ExampleProps> = props => {
93107
return (
94-
<CodeExample code={buttonAlignTextPreview} {...props}>
108+
<CodeExample
109+
previewCode={buttonAlignTextPreview}
110+
sourceCode={buttonAlignTextCode}
111+
{...props}
112+
>
95113
<ButtonAlignText />
96114
</CodeExample>
97115
);
98116
};
99117

100118
export const ButtonEllipsizeTextExample: React.FC<ExampleProps> = props => {
101119
return (
102-
<CodeExample code={buttonEllipsizeTextPreview} {...props}>
120+
<CodeExample
121+
previewCode={buttonEllipsizeTextPreview}
122+
sourceCode={buttonEllipsizeTextCode}
123+
{...props}
124+
>
103125
<ButtonEllipsizeText />
104126
</CodeExample>
105127
);
106128
};
107129

108130
export const ButtonIconWithTextExample: React.FC<ExampleProps> = props => {
109131
return (
110-
<CodeExample code={buttonIconWithTextPreview} {...props}>
132+
<CodeExample
133+
previewCode={buttonIconWithTextPreview}
134+
sourceCode={buttonIconWithTextCode}
135+
{...props}
136+
>
111137
<ButtonIconWithText />
112138
</CodeExample>
113139
);
114140
};
115141

116142
export const ButtonIconExample: React.FC<ExampleProps> = props => {
117143
return (
118-
<CodeExample code={buttonIconPreview} {...props}>
144+
<CodeExample previewCode={buttonIconPreview} sourceCode={buttonIconCode} {...props}>
119145
<ButtonIcon />
120146
</CodeExample>
121147
);
122148
};
123149

124150
export const ButtonStatesExample: React.FC<ExampleProps> = props => {
125151
return (
126-
<CodeExample code={buttonStatesPreview} {...props}>
152+
<CodeExample previewCode={buttonStatesPreview} sourceCode={buttonStatesCode} {...props}>
127153
<ButtonStates />
128154
</CodeExample>
129155
);
130156
};
131157

132158
export const ButtonAnchorButtonExample: React.FC<ExampleProps> = props => {
133159
return (
134-
<CodeExample code={buttonAnchorButtonPreview} {...props}>
160+
<CodeExample
161+
previewCode={buttonAnchorButtonPreview}
162+
sourceCode={buttonAnchorButtonCode}
163+
{...props}
164+
>
135165
<ButtonAnchorButton />
136166
</CodeExample>
137167
);
138168
};
139169

140170
export const ButtonDisabledButtonTooltipExample: React.FC<ExampleProps> = props => {
141171
return (
142-
<CodeExample code={buttonDisabledButtonTooltipPreview} {...props}>
172+
<CodeExample
173+
previewCode={buttonDisabledButtonTooltipPreview}
174+
sourceCode={buttonDisabledButtonTooltipCode}
175+
{...props}
176+
>
143177
<ButtonDisabledButtonTooltip />
144178
</CodeExample>
145179
);

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

Lines changed: 42 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,70 +6,105 @@ import { CodeExample, type ExampleProps } from "@blueprintjs/docs-theme";
66

77
import ButtonGroupBasic from "./button-group/ButtonGroupBasic";
88
import buttonGroupBasicPreview from "./button-group/ButtonGroupBasic.tsx.preview?raw";
9+
import buttonGroupBasicCode from "./button-group/ButtonGroupBasic.tsx?raw";
910
import ButtonGroupFlex from "./button-group/ButtonGroupFlex";
1011
import buttonGroupFlexPreview from "./button-group/ButtonGroupFlex.tsx.preview?raw";
12+
import buttonGroupFlexCode from "./button-group/ButtonGroupFlex.tsx?raw";
1113
import ButtonGroupIntent from "./button-group/ButtonGroupIntent";
1214
import buttonGroupIntentPreview from "./button-group/ButtonGroupIntent.tsx.preview?raw";
15+
import buttonGroupIntentCode from "./button-group/ButtonGroupIntent.tsx?raw";
1316
import ButtonGroupOutlinedMinimal from "./button-group/ButtonGroupOutlinedMinimal";
1417
import buttonGroupOutlinedMinimalPreview from "./button-group/ButtonGroupOutlinedMinimal.tsx.preview?raw";
18+
import buttonGroupOutlinedMinimalCode from "./button-group/ButtonGroupOutlinedMinimal.tsx?raw";
1519
import ButtonGroupSize from "./button-group/ButtonGroupSize";
1620
import buttonGroupSizePreview from "./button-group/ButtonGroupSize.tsx.preview?raw";
21+
import buttonGroupSizeCode from "./button-group/ButtonGroupSize.tsx?raw";
1722
import ButtonGroupVariant from "./button-group/ButtonGroupVariant";
1823
import buttonGroupVariantPreview from "./button-group/ButtonGroupVariant.tsx.preview?raw";
24+
import buttonGroupVariantCode from "./button-group/ButtonGroupVariant.tsx?raw";
1925
import ButtonGroupVertical from "./button-group/ButtonGroupVertical";
2026
import buttonGroupVerticalPreview from "./button-group/ButtonGroupVertical.tsx.preview?raw";
27+
import buttonGroupVerticalCode from "./button-group/ButtonGroupVertical.tsx?raw";
2128

2229
export const ButtonGroupBasicExample: React.FC<ExampleProps> = props => {
2330
return (
24-
<CodeExample code={buttonGroupBasicPreview} {...props}>
31+
<CodeExample
32+
previewCode={buttonGroupBasicPreview}
33+
sourceCode={buttonGroupBasicCode}
34+
{...props}
35+
>
2536
<ButtonGroupBasic />
2637
</CodeExample>
2738
);
2839
};
2940

3041
export const ButtonGroupIntentExample: React.FC<ExampleProps> = props => {
3142
return (
32-
<CodeExample code={buttonGroupIntentPreview} {...props}>
43+
<CodeExample
44+
previewCode={buttonGroupIntentPreview}
45+
sourceCode={buttonGroupIntentCode}
46+
{...props}
47+
>
3348
<ButtonGroupIntent />
3449
</CodeExample>
3550
);
3651
};
3752

3853
export const ButtonGroupVariantExample: React.FC<ExampleProps> = props => {
3954
return (
40-
<CodeExample code={buttonGroupVariantPreview} {...props}>
55+
<CodeExample
56+
previewCode={buttonGroupVariantPreview}
57+
sourceCode={buttonGroupVariantCode}
58+
{...props}
59+
>
4160
<ButtonGroupVariant />
4261
</CodeExample>
4362
);
4463
};
4564

4665
export const ButtonGroupOutlinedMinimalExample: React.FC<ExampleProps> = props => {
4766
return (
48-
<CodeExample code={buttonGroupOutlinedMinimalPreview} {...props}>
67+
<CodeExample
68+
previewCode={buttonGroupOutlinedMinimalPreview}
69+
sourceCode={buttonGroupOutlinedMinimalCode}
70+
{...props}
71+
>
4972
<ButtonGroupOutlinedMinimal />
5073
</CodeExample>
5174
);
5275
};
5376

5477
export const ButtonGroupSizeExample: React.FC<ExampleProps> = props => {
5578
return (
56-
<CodeExample code={buttonGroupSizePreview} {...props}>
79+
<CodeExample
80+
previewCode={buttonGroupSizePreview}
81+
sourceCode={buttonGroupSizeCode}
82+
{...props}
83+
>
5784
<ButtonGroupSize />
5885
</CodeExample>
5986
);
6087
};
6188

6289
export const ButtonGroupFlexExample: React.FC<ExampleProps> = props => {
6390
return (
64-
<CodeExample code={buttonGroupFlexPreview} {...props}>
91+
<CodeExample
92+
previewCode={buttonGroupFlexPreview}
93+
sourceCode={buttonGroupFlexCode}
94+
{...props}
95+
>
6596
<ButtonGroupFlex />
6697
</CodeExample>
6798
);
6899
};
69100

70101
export const ButtonGroupVerticalExample: React.FC<ExampleProps> = props => {
71102
return (
72-
<CodeExample code={buttonGroupVerticalPreview} {...props}>
103+
<CodeExample
104+
previewCode={buttonGroupVerticalPreview}
105+
sourceCode={buttonGroupVerticalCode}
106+
{...props}
107+
>
73108
<ButtonGroupVertical />
74109
</CodeExample>
75110
);

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,40 +6,44 @@ import { CodeExample, type ExampleProps } from "@blueprintjs/docs-theme";
66

77
import CalloutBasic from "./callout/CalloutBasic";
88
import calloutBasicPreview from "./callout/CalloutBasic.tsx.preview?raw";
9+
import calloutBasicCode from "./callout/CalloutBasic.tsx?raw";
910
import CalloutCompact from "./callout/CalloutCompact";
1011
import calloutCompactPreview from "./callout/CalloutCompact.tsx.preview?raw";
12+
import calloutCompactCode from "./callout/CalloutCompact.tsx?raw";
1113
import CalloutIcon from "./callout/CalloutIcon";
1214
import calloutIconPreview from "./callout/CalloutIcon.tsx.preview?raw";
15+
import calloutIconCode from "./callout/CalloutIcon.tsx?raw";
1316
import CalloutIntent from "./callout/CalloutIntent";
1417
import calloutIntentPreview from "./callout/CalloutIntent.tsx.preview?raw";
18+
import calloutIntentCode from "./callout/CalloutIntent.tsx?raw";
1519

1620
export const CalloutBasicExample: React.FC<ExampleProps> = props => {
1721
return (
18-
<CodeExample code={calloutBasicPreview} {...props}>
22+
<CodeExample previewCode={calloutBasicPreview} sourceCode={calloutBasicCode} {...props}>
1923
<CalloutBasic />
2024
</CodeExample>
2125
);
2226
};
2327

2428
export const CalloutIntentExample: React.FC<ExampleProps> = props => {
2529
return (
26-
<CodeExample code={calloutIntentPreview} {...props}>
30+
<CodeExample previewCode={calloutIntentPreview} sourceCode={calloutIntentCode} {...props}>
2731
<CalloutIntent />
2832
</CodeExample>
2933
);
3034
};
3135

3236
export const CalloutIconExample: React.FC<ExampleProps> = props => {
3337
return (
34-
<CodeExample code={calloutIconPreview} {...props}>
38+
<CodeExample previewCode={calloutIconPreview} sourceCode={calloutIconCode} {...props}>
3539
<CalloutIcon />
3640
</CodeExample>
3741
);
3842
};
3943

4044
export const CalloutCompactExample: React.FC<ExampleProps> = props => {
4145
return (
42-
<CodeExample code={calloutCompactPreview} {...props}>
46+
<CodeExample previewCode={calloutCompactPreview} sourceCode={calloutCompactCode} {...props}>
4347
<CalloutCompact />
4448
</CodeExample>
4549
);

0 commit comments

Comments
 (0)