Skip to content

Commit fa9b90c

Browse files
metonymmetonym
authored
Alignment with Carbon version 10.32 (#588)
* feat(code-snippet): add copy functionality - docs: add custom feedback copy text example * feat(tile): support disabled state for SelectableTile, RadioTile Closes #539 * build(rollup): add clipboard-copy to globals * feat(copy-button): add copy functionality * feat(content-switcher): deprecate the light prop - docs: remove the light variant example * fix(toolbar-search): remove outer div * feat(search): add searchClass prop * fix(composed-modal): set hasScrollingContent class on ModalBody * docs(data-table): add expandable size examples * feat(tooltip): add TooltipFooter component * fix(time-picker): correctly display invalidText * feat(breadcrumb): support overflow menu * feat(multi-select): export inputRef prop * chore(deps-dev): upgrade carbon-components to v10.32.0 * feat(form): add noMargin prop to FormGroup * docs(tooltip): document TooltipFooter * feat(context-menu): support danger kind for ContextMenuOption * feat(data-table): support rendering empty table header in skeleton * refactor(types): use shorter import path in DataTableSkeleton * feat(data-table): allow sorting to be disabled for a specific header * docs(data-table): update example to desort the Protocol header As an example, it makes more sense because all the values ("http") are the same. * fix(context-menu): set initial y offset of context menu based on window height #577 * fix(context-menu): render submenu based on viewport constraints #577
1 parent f13e3b1 commit fa9b90c

Some content is hidden

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

61 files changed

+825
-233
lines changed

‎COMPONENT_INDEX.md‎

Lines changed: 84 additions & 55 deletions
Large diffs are not rendered by default.

‎docs/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,8 @@
1111
"devDependencies": {
1212
"@sveltech/routify": "^1.9.9",
1313
"autoprefixer": "^10.2.3",
14-
"carbon-components": "10.31.0",
14+
"carbon-components": "10.32.0",
1515
"carbon-components-svelte": "../",
16-
"clipboard-copy": "^3.1.0",
1716
"mdsvex": "^0.8.8",
1817
"npm-run-all": "^4.1.5",
1918
"postcss": "^8.2.4",

‎docs/src/COMPONENT_API.json‎

Lines changed: 115 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"total": 166,
2+
"total": 167,
33
"components": [
44
{
55
"moduleName": "Accordion",
@@ -805,7 +805,7 @@
805805
{
806806
"name": "code",
807807
"kind": "let",
808-
"description": "Set the code snippet text\nAlternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)",
808+
"description": "Set the code snippet text\nAlternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)\nYou must use the `code` prop to copy the code",
809809
"type": "string",
810810
"isFunction": false,
811811
"constant": false,
@@ -989,7 +989,12 @@
989989
"name": "mouseleave",
990990
"element": "CodeSnippetSkeleton"
991991
},
992-
{ "type": "forwarded", "name": "animationend", "element": "CopyButton" }
992+
{
993+
"type": "forwarded",
994+
"name": "animationend",
995+
"element": "CopyButton"
996+
},
997+
{ "type": "dispatched", "name": "copy" }
993998
],
994999
"typedefs": [],
9951000
"rest_props": { "type": "InlineComponent", "name": "CodeSnippetSkeleton" }
@@ -1651,6 +1656,16 @@
16511656
"moduleName": "ContextMenuOption",
16521657
"filePath": "src/ContextMenu/ContextMenuOption.svelte",
16531658
"props": [
1659+
{
1660+
"name": "kind",
1661+
"kind": "let",
1662+
"description": "Specify the kind of option",
1663+
"type": "\"default\" | \"danger\"",
1664+
"value": "\"default\"",
1665+
"isFunction": false,
1666+
"constant": false,
1667+
"reactive": false
1668+
},
16541669
{
16551670
"name": "disabled",
16561671
"kind": "let",
@@ -1857,12 +1872,22 @@
18571872
"isFunction": false,
18581873
"constant": false,
18591874
"reactive": false
1875+
},
1876+
{
1877+
"name": "text",
1878+
"kind": "let",
1879+
"description": "Specify the text to copy",
1880+
"type": "string",
1881+
"isFunction": false,
1882+
"constant": false,
1883+
"reactive": false
18601884
}
18611885
],
18621886
"slots": [],
18631887
"events": [
18641888
{ "type": "forwarded", "name": "click", "element": "Copy" },
1865-
{ "type": "forwarded", "name": "animationend", "element": "Copy" }
1889+
{ "type": "forwarded", "name": "animationend", "element": "Copy" },
1890+
{ "type": "dispatched", "name": "copy" }
18661891
],
18671892
"typedefs": [],
18681893
"rest_props": { "type": "InlineComponent", "name": "Copy" },
@@ -2056,7 +2081,7 @@
20562081
{
20572082
"type": "dispatched",
20582083
"name": "click:header",
2059-
"detail": "{ header: DataTableHeader; sortDirection: \"ascending\" | \"descending\" | \"none\" }"
2084+
"detail": "{ header: DataTableHeader; sortDirection?: \"ascending\" | \"descending\" | \"none\" }"
20602085
},
20612086
{ "type": "dispatched", "name": "click:row", "detail": "DataTableRow" },
20622087
{
@@ -2092,14 +2117,14 @@
20922117
"ts": "type DataTableValue = any"
20932118
},
20942119
{
2095-
"type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }",
2120+
"type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }",
20962121
"name": "DataTableEmptyHeader",
2097-
"ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }"
2122+
"ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }"
20982123
},
20992124
{
2100-
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }",
2125+
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }",
21012126
"name": "DataTableNonEmptyHeader",
2102-
"ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }"
2127+
"ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }"
21032128
},
21042129
{
21052130
"type": "DataTableNonEmptyHeader | DataTableEmptyHeader",
@@ -2207,10 +2232,7 @@
22072232
],
22082233
"typedefs": [],
22092234
"rest_props": { "type": "Element", "name": "div" },
2210-
"extends": {
2211-
"interface": "DataTableHeader",
2212-
"import": "\"../DataTable/DataTable\""
2213-
}
2235+
"extends": { "interface": "DataTableHeader", "import": "\"./DataTable\"" }
22142236
},
22152237
{
22162238
"moduleName": "DatePicker",
@@ -3499,6 +3521,16 @@
34993521
"constant": false,
35003522
"reactive": false
35013523
},
3524+
{
3525+
"name": "noMargin",
3526+
"kind": "let",
3527+
"description": "Set to `true` for to remove the bottom margin",
3528+
"type": "boolean",
3529+
"value": "false",
3530+
"isFunction": false,
3531+
"constant": false,
3532+
"reactive": false
3533+
},
35023534
{
35033535
"name": "messageText",
35043536
"kind": "let",
@@ -5766,6 +5798,16 @@
57665798
"isFunction": false,
57675799
"constant": false,
57685800
"reactive": false
5801+
},
5802+
{
5803+
"name": "inputRef",
5804+
"kind": "let",
5805+
"description": "Obtain a reference to the input HTML element",
5806+
"type": "null | HTMLInputElement",
5807+
"value": "null",
5808+
"isFunction": false,
5809+
"constant": false,
5810+
"reactive": true
57695811
}
57705812
],
57715813
"slots": [],
@@ -6354,7 +6396,7 @@
63546396
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
63556397
"isFunction": false,
63566398
"constant": false,
6357-
"reactive": false
6399+
"reactive": true
63586400
},
63596401
{
63606402
"name": "iconClass",
@@ -7518,6 +7560,16 @@
75187560
"constant": false,
75197561
"reactive": false
75207562
},
7563+
{
7564+
"name": "disabled",
7565+
"kind": "let",
7566+
"description": "Set to `true` to disable the tile",
7567+
"type": "boolean",
7568+
"value": "false",
7569+
"isFunction": false,
7570+
"constant": false,
7571+
"reactive": false
7572+
},
75217573
{
75227574
"name": "value",
75237575
"kind": "let",
@@ -7690,6 +7742,16 @@
76907742
"constant": false,
76917743
"reactive": false
76927744
},
7745+
{
7746+
"name": "searchClass",
7747+
"kind": "let",
7748+
"description": "Specify the class name passed to the outer div element",
7749+
"type": "string",
7750+
"value": "\"\"",
7751+
"isFunction": false,
7752+
"constant": false,
7753+
"reactive": false
7754+
},
76937755
{
76947756
"name": "skeleton",
76957757
"kind": "let",
@@ -8171,6 +8233,16 @@
81718233
"constant": false,
81728234
"reactive": false
81738235
},
8236+
{
8237+
"name": "disabled",
8238+
"kind": "let",
8239+
"description": "Set to `true` to disable the tile",
8240+
"type": "boolean",
8241+
"value": "false",
8242+
"isFunction": false,
8243+
"constant": false,
8244+
"reactive": false
8245+
},
81748246
{
81758247
"name": "title",
81768248
"kind": "let",
@@ -9369,6 +9441,16 @@
93699441
"moduleName": "TableHeader",
93709442
"filePath": "src/DataTable/TableHeader.svelte",
93719443
"props": [
9444+
{
9445+
"name": "disableSorting",
9446+
"kind": "let",
9447+
"description": "Set to `true` to disable sorting on this specific cell",
9448+
"type": "boolean",
9449+
"value": "false",
9450+
"isFunction": false,
9451+
"constant": false,
9452+
"reactive": false
9453+
},
93729454
{
93739455
"name": "scope",
93749456
"kind": "let",
@@ -11157,6 +11239,25 @@
1115711239
"typedefs": [],
1115811240
"rest_props": { "type": "Element", "name": "div" }
1115911241
},
11242+
{
11243+
"moduleName": "TooltipFooter",
11244+
"filePath": "src/Tooltip/TooltipFooter.svelte",
11245+
"props": [
11246+
{
11247+
"name": "selectorPrimaryFocus",
11248+
"kind": "let",
11249+
"description": "Specify a selector to be focused inside the footer when opening the tooltip",
11250+
"type": "string",
11251+
"value": "\"a[href], button:not([disabled])\"",
11252+
"isFunction": false,
11253+
"constant": false,
11254+
"reactive": false
11255+
}
11256+
],
11257+
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
11258+
"events": [],
11259+
"typedefs": []
11260+
},
1116011261
{
1116111262
"moduleName": "TooltipIcon",
1116211263
"filePath": "src/TooltipIcon/TooltipIcon.svelte",

‎docs/src/components/InlineSnippet.svelte‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,10 @@
22
export let code = "";
33
44
import { CodeSnippet } from "carbon-components-svelte";
5-
import copy from "clipboard-copy";
65
</script>
76

87
<div>
9-
<CodeSnippet
10-
code="{code}"
11-
type="inline"
12-
on:click="{() => {
13-
copy(code);
14-
}}"
15-
/>
8+
<CodeSnippet code="{code}" type="inline" />
169
</div>
1710

1811
<style>

‎docs/src/components/Preview.svelte‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
77
import { CodeSnippet, Button } from "carbon-components-svelte";
88
import Launch16 from "carbon-icons-svelte/lib/Launch16";
9-
import copy from "clipboard-copy";
109
import { url } from "@sveltech/routify";
1110
import { theme } from "../store";
1211
@@ -41,7 +40,7 @@
4140
{/if}
4241
</div>
4342
<div class="code-override">
44-
<CodeSnippet type="multi" on:click="{() => copy(codeRaw)}">
43+
<CodeSnippet type="multi" code="{codeRaw}">
4544
{@html code}
4645
</CodeSnippet>
4746
</div>

‎docs/src/pages/_layout.svelte‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,15 +105,19 @@
105105
>
106106
{child.title}
107107
{#if deprecated.includes(child.title)}
108-
<Tag size="sm" type="red" style="margin-top: 0; margin-bottom: 0">
108+
<Tag
109+
size="sm"
110+
type="red"
111+
style="margin-top: 0; margin-bottom: 0; cursor: inherit"
112+
>
109113
Deprecated
110114
</Tag>
111115
{/if}
112116
{#if new_components.includes(child.title)}
113117
<Tag
114118
size="sm"
115119
type="green"
116-
style="margin-top: 0; margin-bottom: 0"
120+
style="margin-top: 0; margin-bottom: 0; cursor: inherit"
117121
>
118122
New
119123
</Tag>

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ components: ["Breadcrumb", "BreadcrumbItem"]
66
import {
77
Breadcrumb,
88
BreadcrumbItem,
9+
OverflowMenu,
10+
OverflowMenuItem
911
} from "carbon-components-svelte";
1012
import Preview from "../../components/Preview.svelte";
1113
</script>
@@ -27,6 +29,20 @@ See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs co
2729
<BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
2830
</Breadcrumb>
2931

32+
### Overflow menu
33+
34+
<Breadcrumb>
35+
<BreadcrumbItem href="/">Home</BreadcrumbItem>
36+
<BreadcrumbItem href="/api">API documentation</BreadcrumbItem>
37+
<BreadcrumbItem>
38+
<OverflowMenu>
39+
<OverflowMenuItem href="/api/data" text="Data" />
40+
<OverflowMenuItem href="/api/data/latest" text="Latest" />
41+
</OverflowMenu>
42+
</BreadcrumbItem>
43+
<BreadcrumbItem href="/api/data/latest/usage" isCurrentPage>Usage</BreadcrumbItem>
44+
</Breadcrumb>
45+
3046
### Skeleton
3147

3248
<Breadcrumb noTrailingSlash skeleton count={3} />

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,21 +28,27 @@ let comment = `
2828
</script>
2929

3030
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
31-
<div class="body-short-01">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
31+
<div class="body-short-01">As of version 0.32, the CodeSnippet will copy the provided `code` text when clicking the copy button.</div>
3232
</InlineNotification>
3333

3434
### Default (single-line)
3535

36-
<CodeSnippet>yarn add -D carbon-components-svelte</CodeSnippet>
36+
<CodeSnippet code="yarn add -D carbon-components-svelte" />
3737

3838
### Inline
3939

40-
<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>
40+
<CodeSnippet type="inline" code="rm -rf node_modules/" />
4141

4242
### Multi-line
4343

4444
<CodeSnippet type="multi" {code} />
4545

46+
### Custom copy feedback text
47+
48+
Use the `feedback` prop to override the default copy button feedback text.
49+
50+
<CodeSnippet type="multi" {code} feedback="Copied to clipboard" />
51+
4652
### Hidden copy button
4753

4854
<CodeSnippet type="multi" {code} hideCopyButton />
@@ -51,7 +57,7 @@ let comment = `
5157

5258
The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.
5359

54-
<CodeSnippet disabled>yarn add -D carbon-components-svelte</CodeSnippet>
60+
<CodeSnippet disabled code="yarn add -D carbon-components-svelte" />
5561
<br />
5662
<CodeSnippet disabled type="multi" code="{comment}" />
5763

0 commit comments

Comments
 (0)