From 564f25d08716ce579ee402337e5c886816b15877 Mon Sep 17 00:00:00 2001 From: metonym Date: Thu, 28 Apr 2022 07:30:28 -0700 Subject: [PATCH 01/37] fix(file-uploader-item): fix "delete" event regression (#1268) Fixes #1267 --- docs/src/COMPONENT_API.json | 4 ++-- src/FileUploader/Filename.svelte | 11 +++++++---- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index fa485197..ac6eedf2 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -4053,8 +4053,8 @@ "moduleExports": [], "slots": [], "events": [ - { "type": "forwarded", "name": "click", "element": "Close" }, - { "type": "forwarded", "name": "keydown", "element": "Close" } + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "forwarded", "name": "keydown", "element": "button" } ], "typedefs": [], "rest_props": { "type": "InlineComponent", "name": "Loading" } diff --git a/src/FileUploader/Filename.svelte b/src/FileUploader/Filename.svelte index b8b21b7b..efec5171 100644 --- a/src/FileUploader/Filename.svelte +++ b/src/FileUploader/Filename.svelte @@ -30,14 +30,17 @@ {#if invalid} {/if} - + > + + {/if} {#if status === "complete"} From d40d238de5d976efe035ee6a9f177f0cf5081aad Mon Sep 17 00:00:00 2001 From: metonym Date: Thu, 28 Apr 2022 07:39:58 -0700 Subject: [PATCH 02/37] docs(file-uploader): improve `FileUploaderItem` examples (#1269) --- docs/src/pages/components/FileUploader.svx | 30 ++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/FileUploader.svx b/docs/src/pages/components/FileUploader.svx index 8f19f122..bff02a4c 100644 --- a/docs/src/pages/components/FileUploader.svx +++ b/docs/src/pages/components/FileUploader.svx @@ -48,9 +48,35 @@ There are two ways to clear files in `FileUploader`: -### Item (invalid) +### Item (edit) - +If the `status` is `"edit"`, clicking the close icon will dispatch a `delete` event. + +The event detail contains the item `id`. + + { + console.log(e.detail); // "readme" +}} /> + +### Item (edit status, invalid state) + +An item can also have an edit status with an invalid state. + + + +### Item (edit status, invalid state with subject, body) + +Use the `errorSubject` and `errorBody` props to customize the error message. + + ### Item sizes From 020b2e07b60948cadecc8f9c09fd03a27bf2eef5 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Thu, 28 Apr 2022 07:42:15 -0700 Subject: [PATCH 03/37] v0.63.3 --- CHANGELOG.md | 12 ++++++++++++ COMPONENT_INDEX.md | 2 +- package.json | 2 +- 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 106ba5d3..3bb56f91 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 +## [0.63.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.3) - 2022-04-28 + +**Fixes** + +- fix `FileUploaderItem` regression where `delete` event should be dispatched if status is "edit" + +**Documentation** + +- add `FileUploader` "Item (edit)" example +- revise `FileUploader` "Item (edit status, invalid state)" example to include `on:delete` usage +- add `FileUploader` "Item (edit status, invalid state with subject, body)" example + ## [0.63.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.2) - 2022-04-23 **Fixes** diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index fa1956eb..18b27418 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,6 +1,6 @@ # Component Index -> 165 components exported from carbon-components-svelte@0.63.2. +> 165 components exported from carbon-components-svelte@0.63.3. ## Components diff --git a/package.json b/package.json index 7aa2f659..b3378997 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "carbon-components-svelte", - "version": "0.63.2", + "version": "0.63.3", "license": "Apache-2.0", "description": "Svelte implementation of the Carbon Design System", "svelte": "./src/index.js", From 3950496b7ee88bf2637cb5b652084bd39f186961 Mon Sep 17 00:00:00 2001 From: metonym Date: Thu, 28 Apr 2022 15:06:10 -0700 Subject: [PATCH 04/37] docs(tooltip): remove unnecessary `tooltipBodyId` in examples (#1271) Fixes #1270 --- docs/src/pages/components/RadioButton.svx | 4 ++-- docs/src/pages/components/Tooltip.svx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/components/RadioButton.svx b/docs/src/pages/components/RadioButton.svx index 4ee86229..5f6d5f28 100644 --- a/docs/src/pages/components/RadioButton.svx +++ b/docs/src/pages/components/RadioButton.svx @@ -30,8 +30,8 @@ Use the named "legendText" slot to customize the legend text.
Storage tier (disk) - -

+ +

Storage tiers may vary based on geolocation.

diff --git a/docs/src/pages/components/Tooltip.svx b/docs/src/pages/components/Tooltip.svx index c2905e6e..d4fe45b6 100644 --- a/docs/src/pages/components/Tooltip.svx +++ b/docs/src/pages/components/Tooltip.svx @@ -12,8 +12,8 @@ components: ["Tooltip", "TooltipFooter"] By default, the tooltip is triggered by an information icon. - -

+ +

Resources are provisioned based on your account's organization.

From 3f466bc9bc966daa800460b8d0370c5db5b62959 Mon Sep 17 00:00:00 2001 From: metonym Date: Fri, 29 Apr 2022 07:12:32 -0700 Subject: [PATCH 05/37] docs(icons): correctly render icon imports in examples (#1273) Fixes #1272 --- docs/src/pages/components/Button.svx | 3 --- docs/svelte.config.js | 16 +++++++++++++--- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx index 933720b0..30effdca 100644 --- a/docs/src/pages/components/Button.svx +++ b/docs/src/pages/components/Button.svx @@ -2,9 +2,6 @@ import { InlineNotification, Button } from "carbon-components-svelte"; import Add from "carbon-icons-svelte/lib/Add.svelte"; import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte"; - import TextBold from "carbon-icons-svelte/lib/TextBold.svelte"; - import TextItalic from "carbon-icons-svelte/lib/TextItalic.svelte"; - import TextUnderline from "carbon-icons-svelte/lib/TextUnderline.svelte"; import Login from "carbon-icons-svelte/lib/Login.svelte"; import Preview from "../../components/Preview.svelte"; diff --git a/docs/svelte.config.js b/docs/svelte.config.js index 64122ac3..28d2ea0c 100644 --- a/docs/svelte.config.js +++ b/docs/svelte.config.js @@ -5,16 +5,25 @@ const slug = require("remark-slug"); const visit = require("unist-util-visit"); const { format } = require("prettier"); const pkg = require("../package.json"); +const component_api = require("./src/COMPONENT_API.json"); const fs = require("fs"); const Prism = require("prismjs"); require("prism-svelte"); +const component_api_by_name = component_api.components.reduce((a, c) => { + return { + ...a, + [c.moduleName]: true, + }; +}, {}); + function createImports(source) { const inlineComponents = new Set(); const icons = new Set(); - // TODO: [refactor] better determine if component is a Carbon icon - const isIcon = (text) => text.match(/(16|20|24|32)/); + // heuristic to guess if the inline component or expression name is a Carbon icon + const isIcon = (text) => + /[A-Z][a-z]*/.test(text) && !(text in component_api_by_name); walk(parse(source), { enter(node) { @@ -48,7 +57,8 @@ function createImports(source) { icons.size > 0 ? icon_imports .map( - (icon) => `import ${icon} from "carbon-icons-svelte/lib/${icon}";` + (icon) => + `import ${icon} from "carbon-icons-svelte/lib/${icon}.svelte";` ) .join("\n") : "" From 77b6e4f8316c847d4e004c8379458d300f17bd8b Mon Sep 17 00:00:00 2001 From: metonym Date: Sat, 30 Apr 2022 08:47:21 -0700 Subject: [PATCH 06/37] docs(action): generate action imports (#1274) --- docs/svelte.config.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/svelte.config.js b/docs/svelte.config.js index 28d2ea0c..034e0ec0 100644 --- a/docs/svelte.config.js +++ b/docs/svelte.config.js @@ -20,6 +20,7 @@ const component_api_by_name = component_api.components.reduce((a, c) => { function createImports(source) { const inlineComponents = new Set(); const icons = new Set(); + const actions = new Set(); // heuristic to guess if the inline component or expression name is a Carbon icon const isIcon = (text) => @@ -40,15 +41,20 @@ function createImports(source) { ) { icons.add(node.expression.name); } + } else if (node.type === "Action") { + actions.add(node.name); } }, }); - const ccs_imports = Array.from(inlineComponents.keys()); + const action_imports = Array.from(actions.keys()); + const ccs_imports = [ + ...Array.from(inlineComponents.keys()), + ...action_imports, + ]; const icon_imports = Array.from(icons.keys()); if (ccs_imports.length === 0) return ""; - // TODO: determine if action is used, and generate import accordingly return ` @@ -9,6 +9,7 @@
Date: Sat, 30 Apr 2022 09:58:14 -0700 Subject: [PATCH 09/37] docs(data-table): add "Expandable and selectable" example (#1277) * docs(data-table): add "Expandable and selectable" example * docs(data-table): add "Batch selection" example * docs(data-table): rework "Batch selection with initial selected rows" example * docs(data-table): rework selectable examples to include selectedRowIds * docs: remove extra space from pre tags --- docs/src/pages/components/DataTable.svx | 32 ++++++++--------- .../pages/framed/Breakpoint/Breakpoint.svelte | 4 +-- .../DataTable/DataTableBatchSelection.svelte | 31 +++++++--------- .../DataTableBatchSelectionInitial.svelte | 24 +++++++++++++ .../DataTableExpandableSelectable.svelte | 35 +++++++++++++++++++ .../DataTable/DataTableExpandableZebra.svelte | 4 +-- .../DataTableNonExpandableRows.svelte | 4 +-- .../DataTable/SelectableDataTable.svelte | 32 ++++++++--------- .../framed/LocalStorage/LocalStorage.svelte | 4 +-- 9 files changed, 108 insertions(+), 62 deletions(-) create mode 100644 docs/src/pages/framed/DataTable/DataTableBatchSelectionInitial.svelte create mode 100644 docs/src/pages/framed/DataTable/DataTableExpandableSelectable.svelte diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx index 3fef0c40..2789d711 100644 --- a/docs/src/pages/components/DataTable.svx +++ b/docs/src/pages/components/DataTable.svx @@ -1077,10 +1077,16 @@ In the following example, each row in the sortable data table has an overflow me -### Initial selected rows +### Batch selection +### Batch selection with initial selected rows + +Use the `selectedRowIds` prop to specify which rows should be selected. + + + ### Selectable with batch actions @@ -1150,9 +1156,7 @@ Use `nonSelectableRowIds` to specify the ids for rows that should not be selecta ]}" > - 
-      {JSON.stringify(row, null, 2)}
-
+ 
{JSON.stringify(row, null, 2)}
 @@ -1221,9 +1225,7 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda ]}" > - 
-      {JSON.stringify(row, null, 2)}
-
+ 
{JSON.stringify(row, null, 2)}
 @@ -1282,9 +1284,7 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda ]}" > - 
-      {JSON.stringify(row, null, 2)}
-
+ 
{JSON.stringify(row, null, 2)}
 @@ -1343,9 +1343,7 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda ]}" > - 
-      {JSON.stringify(row, null, 2)}
-
+ 
{JSON.stringify(row, null, 2)}
 @@ -1404,12 +1402,14 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda ]}" > - 
-      {JSON.stringify(row, null, 2)}
-
+ 
{JSON.stringify(row, null, 2)}
 +### Expandable and selectable + + + ### Skeleton diff --git a/docs/src/pages/framed/Breakpoint/Breakpoint.svelte b/docs/src/pages/framed/Breakpoint/Breakpoint.svelte index b1b7e0a1..9f2473f9 100644 --- a/docs/src/pages/framed/Breakpoint/Breakpoint.svelte +++ b/docs/src/pages/framed/Breakpoint/Breakpoint.svelte @@ -12,9 +12,7 @@

{size}

on:change
-
-  {JSON.stringify(events, null, 2)}
-
+
{JSON.stringify(events, null, 2)}