Skip to content

Commit c739e12

Browse files
metonymmetonym
committed
docs: use Stack where applicable
1 parent bba8b58 commit c739e12

File tree

58 files changed

+766
-849
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+766
-849
lines changed

‎docs/src/components/ComponentApi.svelte‎

Lines changed: 28 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
import {
1111
ListItem,
1212
OutboundLink,
13+
Stack,
1314
StructuredList,
1415
StructuredListBody,
1516
StructuredListCell,
@@ -76,14 +77,15 @@
7677
);
7778
</script>
7879

79-
<p style="margin-bottom: var(--cds-layout-02)">
80+
<Stack gap={3}>
81+
<p>
8082
Source code:
8183
<OutboundLink size="lg" inline href={source}>
8284
{component.filePath}
8385
</OutboundLink>
84-
</p>
86+
</p>
8587

86-
<h2 id="props">Props</h2>
88+
<h2 id="props">Props</h2>
8789

8890
{#if component.props.length > 0}
8991
<div class="overflow">
@@ -111,21 +113,17 @@
111113
}) as prop (prop.name)}
112114
<StructuredListRow>
113115
<StructuredListCell noWrap>
114-
<InlineSnippet code={prop.name} />
115-
{#if prop.reactive}
116-
<div
117-
style="white-space: nowrap; margin-top: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-{prop.isRequired
118-
? '01'
119-
: '03'})"
120-
>
116+
<Stack gap={3} tag="span" style="white-space: nowrap; display: inline-flex; flex-direction: column; align-items: flex-start">
117+
<InlineSnippet code={prop.name} />
118+
{#if prop.reactive}
121119
<Tag style="margin-left: 0" size="sm" type="cyan">
122120
Reactive
123121
</Tag>
124-
</div>
125-
{/if}
126-
{#if prop.isRequired}
127-
<Tag size="sm" type="magenta">Required</Tag>
128-
{/if}
122+
{/if}
123+
{#if prop.isRequired}
124+
<Tag size="sm" type="magenta">Required</Tag>
125+
{/if}
126+
</Stack>
129127
</StructuredListCell>
130128
<StructuredListCell>
131129
{#each (prop.type || "").split(" | ") as type, i (type)}
@@ -176,34 +174,25 @@
176174
</div>
177175
{/if}
178176
{#if parsed.exampleCode}
179-
<div
180-
style:margin-top="var(--cds-layout-02)"
181-
style:margin-bottom="var(--cds-spacing-03)"
182-
>
183-
<strong>Example</strong>
184-
</div>
185-
<div
186-
style:margin-bottom="var(--cds-layout-02)"
187-
style:max-width="85%"
188-
>
177+
<Stack gap={3}>
178+
<div>
179+
<strong>Example</strong>
180+
</div>
181+
<div style:max-width="85%">
189182
<svelte:component
190183
this={AsyncPreviewTypeScript}
191184
type="multi"
192185
code={parsed.exampleCode}
193186
/>
194-
</div>
187+
</div>
188+
</Stack>
195189
{/if}
196190
{/if}
197-
<div
198-
style:margin-top="var(--cds-layout-02)"
199-
style:margin-bottom="var(--cds-spacing-03)"
200-
>
201-
<strong>Default value</strong>
202-
</div>
203-
<div
204-
style:margin-bottom="var(--cds-layout-01)"
205-
style:max-width="85%"
206-
>
191+
<Stack gap={2}>
192+
<div>
193+
<strong>Default value</strong>
194+
</div>
195+
<div style:max-width="85%">
207196
{#if prop.value === undefined}
208197
<em>undefined</em>
209198
{:else}
@@ -213,7 +202,8 @@
213202
code={prop.value}
214203
/>
215204
{/if}
216-
</div>
205+
</div>
206+
</Stack>
217207
</StructuredListCell>
218208
</StructuredListRow>
219209
{/each}
@@ -330,6 +320,7 @@
330320
{:else}<code>{component.rest_props.name}</code> component.{/if}
331321
{:else}This component does not spread <code>restProps</code>{/if}
332322
</div>
323+
</Stack>
333324

334325
<style>
335326
.description {

‎docs/src/components/InlineSnippet.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
import copy from "clipboard-copy";
66
</script>
77

8-
<div>
8+
<div class="inline-snippet">
99
<CodeSnippet {code} type="inline" copy={(text) => copy(text)} />
1010
</div>
1111

1212
<style>
13-
div {
13+
.inline-snippet {
1414
margin-bottom: var(--cds-spacing-03);
1515
}
1616
</style>

‎docs/src/components/Preview.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
export let framed = false;
66
77
import { url } from "@sveltech/routify";
8-
import { Button, CodeSnippet } from "carbon-components-svelte";
8+
import { Button, CodeSnippet, Stack } from "carbon-components-svelte";
99
import Launch from "carbon-icons-svelte/lib/Launch.svelte";
1010
import copy from "clipboard-copy";
1111
import { theme } from "../store";

‎docs/src/components/TileCard.svelte‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
export let borderRight = false;
66
export let borderBottom = false;
77
8-
import { AspectRatio, ClickableTile, Tile } from "carbon-components-svelte";
8+
import { AspectRatio, ClickableTile, Stack, Tile } from "carbon-components-svelte";
99
import Launch from "carbon-icons-svelte/lib/Launch.svelte";
1010
import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
1111
@@ -21,12 +21,12 @@
2121
style="height: 100%;"
2222
>
2323
<div class="card">
24-
<div>
24+
<Stack gap={1}>
2525
<h5 class="title">{title}</h5>
2626
{#if subtitle}
2727
<div class="subtitle">{subtitle}</div>
2828
{/if}
29-
</div>
29+
</Stack>
3030
<div class="card-footer">
3131
<svelte:component
3232
this={LogoGithub}
@@ -69,7 +69,6 @@
6969
7070
.title {
7171
margin-top: calc(-1 * var(--cds-spacing-02));
72-
margin-bottom: var(--cds-spacing-01);
7372
}
7473
7574
.subtitle {

‎docs/src/layouts/ComponentLayout.svelte‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@
192192
{#each api_components as component (component.moduleName)}
193193
<Tab label={component.moduleName} />
194194
{/each}
195-
<div slot="content" style="padding-top: var(--cds-spacing-06)">
195+
<div slot="content" class="tab-content-spacing">
196196
{#each api_components as component (component.moduleName)}
197197
<TabContent>
198198
<ComponentApi {component} />
@@ -216,6 +216,10 @@
216216
</Content>
217217
218218
<style>
219+
.tab-content-spacing {
220+
padding-top: var(--cds-spacing-06);
221+
}
222+
219223
.bar {
220224
display: flex;
221225
justify-content: space-between;

‎docs/src/pages/components/Breakpoint.svx‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
11

22
<script>
33
import {
4-
UnorderedList, ListItem
4+
Stack,
5+
UnorderedList,
6+
ListItem,
57
} from "carbon-components-svelte";
68
import Preview from "../../components/Preview.svelte";
79
</script>
810

911
The Carbon Design System [grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints:
1012

11-
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
12-
<ListItem><strong>Small</strong>: less than 672px</ListItem>
13-
<ListItem><strong>Medium</strong>: 672 - 1056px</ListItem>
14-
<ListItem><strong>Large</strong>: 1056 - 1312px</ListItem>
15-
<ListItem><strong>X-Large</strong>: 1312 - 1584px</ListItem>
16-
<ListItem><strong>Max</strong>: greater than 1584px</ListItem>
17-
</UnorderedList>
18-
13+
<Stack gap={8}>
14+
<UnorderedList svx-ignore>
15+
<ListItem><strong>Small</strong>: less than 672px</ListItem>
16+
<ListItem><strong>Medium</strong>: 672 - 1056px</ListItem>
17+
<ListItem><strong>Large</strong>: 1056 - 1312px</ListItem>
18+
<ListItem><strong>X-Large</strong>: 1312 - 1584px</ListItem>
19+
<ListItem><strong>Max</strong>: greater than 1584px</ListItem>
20+
</UnorderedList>
21+
<div>
1922
This utility component uses the [Window.matchMedia API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to declaratively determine the current Carbon breakpoint size.
23+
</div>
24+
</Stack>
2025

2126
## Default
2227

‎docs/src/pages/components/FileUploader.svx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,13 @@ This example accepts multiple JPEG files and displays them in a completed state.
9090

9191
Remove uploaded files from the `FileUploader` component in two ways:
9292

93-
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
94-
<ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem>
95-
<ListItem>two-way binding by setting <strong>files</strong> to <strong>[]</strong></ListItem>
96-
</UnorderedList>
97-
98-
<FileSource src="/framed/FileUploader/FileUploaderClearFiles" />
93+
<Stack gap={8}>
94+
<UnorderedList svx-ignore>
95+
<ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem>
96+
<ListItem>two-way binding by setting <strong>files</strong> to <strong>[]</strong></ListItem>
97+
</UnorderedList>
98+
<FileSource src="/framed/FileUploader/FileUploaderClearFiles" />
99+
</Stack>
99100

100101
## Maximum file size
101102

‎docs/src/pages/components/Grid.svx‎

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ components: ["Grid", "Row", "Column"]
33
---
44

55
<script>
6-
import { UnorderedList, ListItem } from "carbon-components-svelte";
6+
import { Stack, UnorderedList, ListItem } from "carbon-components-svelte";
77
import Preview from "../../components/Preview.svelte";
88
</script>
99

@@ -16,20 +16,22 @@ grid supports various spacing options and column configurations.
1616
The Carbon grid system uses a **responsive column structure** where the total
1717
number of columns changes based on screen size:
1818

19-
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
20-
<ListItem><strong>Small (sm)</strong>: 0-671px — 4 columns</ListItem>
21-
<ListItem><strong>Medium (md)</strong>: 672-1055px — 8 columns</ListItem>
22-
<ListItem><strong>Large (lg)</strong>: 1056-1311px — 16 columns</ListItem>
23-
<ListItem><strong>X-Large (xlg)</strong>: 1312-1583px — 16 columns</ListItem>
24-
<ListItem><strong>Max (max)</strong>: 1584px and above — 16 columns</ListItem>
25-
</UnorderedList>
26-
27-
**Important:** Column spans are relative to the total columns at each breakpoint.
28-
For example, to create a full-width column, use `sm={4} md={8} lg={16}` - not the
29-
same value across all breakpoints.
30-
31-
For more details, see the
32-
[Carbon Design System Grid documentation](https://carbondesignsystem.com/elements/2x-grid/overview/).
19+
<Stack gap={8}>
20+
<UnorderedList svx-ignore>
21+
<ListItem><strong>Small (sm)</strong>: 0-671px — 4 columns</ListItem>
22+
<ListItem><strong>Medium (md)</strong>: 672-1055px — 8 columns</ListItem>
23+
<ListItem><strong>Large (lg)</strong>: 1056-1311px — 16 columns</ListItem>
24+
<ListItem><strong>X-Large (xlg)</strong>: 1312-1583px — 16 columns</ListItem>
25+
<ListItem><strong>Max (max)</strong>: 1584px and above — 16 columns</ListItem>
26+
</UnorderedList>
27+
<p>
28+
<strong>Important:</strong> Column spans are relative to the total columns at each breakpoint.
29+
For example, to create a full-width column, use <code>sm=&#123;4&#125; md=&#123;8&#125; lg=&#123;16&#125;</code> - not the
30+
same value across all breakpoints.
31+
For more details, see the
32+
<a href="https://carbondesignsystem.com/elements/2x-grid/overview/">Carbon Design System Grid documentation</a>.
33+
</p>
34+
</Stack>
3335

3436
## Default
3537

@@ -116,13 +118,16 @@ of content. This is useful for creating vertical rhythm without manually adding
116118
Understanding [breakpoints](/components/Breakpoint) is critical for creating responsive layouts. Each breakpoint
117119
has specific pixel ranges and column counts:
118120

119-
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
120-
<ListItem><strong>Small (sm)</strong>: 0-671px — 4 columns — Mobile phones</ListItem>
121-
<ListItem><strong>Medium (md)</strong>: 672-1055px — 8 columns — Tablets, small laptops</ListItem>
122-
<ListItem><strong>Large (lg)</strong>: 1056-1311px — 16 columns — Desktop monitors, laptops</ListItem>
123-
<ListItem><strong>X-Large (xlg)</strong>: 1312-1583px — 16 columns — Large desktop monitors</ListItem>
124-
<ListItem><strong>Max (max)</strong>: 1584px and above — 16 columns — Extra-large displays</ListItem>
125-
</UnorderedList>
126-
127-
When designing responsive layouts, start with mobile (sm) and work your
128-
way up to ensure your content works well at all sizes.
121+
<Stack gap={8}>
122+
<UnorderedList svx-ignore>
123+
<ListItem><strong>Small (sm)</strong>: 0-671px — 4 columns — Mobile phones</ListItem>
124+
<ListItem><strong>Medium (md)</strong>: 672-1055px — 8 columns — Tablets, small laptops</ListItem>
125+
<ListItem><strong>Large (lg)</strong>: 1056-1311px — 16 columns — Desktop monitors, laptops</ListItem>
126+
<ListItem><strong>X-Large (xlg)</strong>: 1312-1583px — 16 columns — Large desktop monitors</ListItem>
127+
<ListItem><strong>Max (max)</strong>: 1584px and above — 16 columns — Extra-large displays</ListItem>
128+
</UnorderedList>
129+
<p>
130+
When designing responsive layouts, start with mobile (sm) and work your
131+
way up to ensure your content works well at all sizes.
132+
</p>
133+
</Stack>

‎docs/src/pages/components/InlineLoading.svx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ components: ["InlineLoading"]
33
---
44

55
<script>
6-
import { InlineLoading, UnorderedList, ListItem } from "carbon-components-svelte";
6+
import { InlineLoading, Stack, UnorderedList, ListItem } from "carbon-components-svelte";
77
import Preview from "../../components/Preview.svelte";
88
</script>
99

@@ -25,17 +25,20 @@ Add a descriptive text to provide context about the loading operation.
2525

2626
The component supports different status states to indicate progress:
2727

28-
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
29-
<ListItem><strong>active</strong>: Shows an animated loading indicator</ListItem>
30-
<ListItem><strong>inactive</strong>: Displays a static state</ListItem>
31-
<ListItem><strong>finished</strong>: Shows a success state</ListItem>
32-
<ListItem><strong>error</strong>: Displays an error state</ListItem>
33-
</UnorderedList>
34-
35-
<InlineLoading status="active" description="Submitting..." />
36-
<InlineLoading status="inactive" description="Cancelling..." />
37-
<InlineLoading status="finished" description="Success" />
38-
<InlineLoading status="error" description="An error occurred" />
28+
<Stack gap={8}>
29+
<UnorderedList svx-ignore>
30+
<ListItem><strong>active</strong>: Shows an animated loading indicator</ListItem>
31+
<ListItem><strong>inactive</strong>: Displays a static state</ListItem>
32+
<ListItem><strong>finished</strong>: Shows a success state</ListItem>
33+
<ListItem><strong>error</strong>: Displays an error state</ListItem>
34+
</UnorderedList>
35+
<div>
36+
<InlineLoading status="active" description="Submitting..." />
37+
<InlineLoading status="inactive" description="Cancelling..." />
38+
<InlineLoading status="finished" description="Success" />
39+
<InlineLoading status="error" description="An error occurred" />
40+
</div>
41+
</Stack>
3942

4043
## UX example
4144

0 commit comments

Comments
 (0)