From e3f72e6412fe92f09b40ebc91c59321cb53ef796 Mon Sep 17 00:00:00 2001 From: metonym Date: Thu, 12 May 2022 19:52:17 -0700 Subject: [PATCH 001/802] fix(code-snippet): use "small" size for expand/collapse button (#1292) Ref: https://github.com/carbon-design-system/carbon/pull/11353 --- src/CodeSnippet/CodeSnippet.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte index 23b569e8..849a6bd6 100644 --- a/src/CodeSnippet/CodeSnippet.svelte +++ b/src/CodeSnippet/CodeSnippet.svelte @@ -235,7 +235,7 @@ {#if showMoreLess} + + From 6239c110244cdd771c11d43b4ce9315f5fbc9fb7 Mon Sep 17 00:00:00 2001 From: metonym Date: Fri, 13 May 2022 20:18:32 -0700 Subject: [PATCH 006/802] breaking(data-table): use data attribute instead of id for table header/row (#1297) Fixes #1294 --- src/DataTable/DataTable.svelte | 2 +- src/DataTable/TableHeader.svelte | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte index e0a8dbf2..5de05bf8 100644 --- a/src/DataTable/DataTable.svelte +++ b/src/DataTable/DataTable.svelte @@ -353,7 +353,7 @@ {#each sorting ? displayedSortedRows : displayedRows as row, i (row.id)} Date: Sat, 14 May 2022 09:24:24 -0700 Subject: [PATCH 007/802] feat(data-table): allow custom column widths (#1265) * feat(data-table): allow header column `width`, `minWidth` values * Run "yarn build:docs" * test(data-table): assert width, minWidth properties * docs(data-table): add "Custom column widths" example --- COMPONENT_INDEX.md | 19 +++++++++++------- docs/src/COMPONENT_API.json | 18 +++++++++++++---- docs/src/pages/components/DataTable.svx | 8 ++++++++ .../DataTable/DataTableHeaderWidth.svelte | 19 ++++++++++++++++++ src/DataTable/DataTable.svelte | 20 +++++++++++++++++-- src/DataTable/Table.svelte | 8 ++++++++ tests/DataTable.test.svelte | 2 +- types/DataTable/DataTable.svelte.d.ts | 4 ++++ types/DataTable/Table.svelte.d.ts | 6 ++++++ 9 files changed, 90 insertions(+), 14 deletions(-) create mode 100644 docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index f179c375..76b7783e 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -927,6 +927,8 @@ export interface DataTableEmptyHeader { display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); columnMenu?: boolean; + width?: string; + minWidth?: string; } export interface DataTableNonEmptyHeader { @@ -935,6 +937,8 @@ export interface DataTableNonEmptyHeader { display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); columnMenu?: boolean; + width?: string; + minWidth?: string; } export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader; @@ -3748,13 +3752,14 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | --------------------------------------- | -| size | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the table | -| zebra | let | No | boolean | false | Set to `true` to use zebra styles | -| useStaticWidth | let | No | boolean | false | Set to `true` to use static width | -| sortable | let | No | boolean | false | Set to `true` for the sortable variant | -| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | ---------------------------------------------- | +| size | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the table | +| zebra | let | No | boolean | false | Set to `true` to use zebra styles | +| useStaticWidth | let | No | boolean | false | Set to `true` to use static width | +| sortable | let | No | boolean | false | Set to `true` for the sortable variant | +| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header | +| tableStyle | let | No | string | undefined | Set the style attribute on the `table` element | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 3884fb56..dceeac19 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -2495,14 +2495,14 @@ "ts": "type DataTableValue = any" }, { - "type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }", + "type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }", "name": "DataTableEmptyHeader", - "ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }" + "ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }" }, { - "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }", + "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }", "name": "DataTableNonEmptyHeader", - "ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }" + "ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }" }, { "type": "DataTableNonEmptyHeader | DataTableEmptyHeader", @@ -10863,6 +10863,16 @@ "isFunctionDeclaration": false, "constant": false, "reactive": false + }, + { + "name": "tableStyle", + "kind": "let", + "description": "Set the style attribute on the `table` element", + "type": "string", + "isFunction": false, + "isFunctionDeclaration": false, + "constant": false, + "reactive": false } ], "moduleExports": [], diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx index 2789d711..f3a933e4 100644 --- a/docs/src/pages/components/DataTable.svx +++ b/docs/src/pages/components/DataTable.svx @@ -328,6 +328,14 @@ title="Load balancers" description="Your organization's active load balancers." ]}" /> +### Custom column widths + +Specify a `width` or `minWidth` property in the `headers` object to customize the width of each column. + +A [table-layout: fixed](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#values) rule will be applied to the `table` element when using custom widths. + + + ### Sticky header Set `stickyHeader` to `true` for the header to be fixed in place. diff --git a/docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte b/docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte new file mode 100644 index 00000000..cf2faaf4 --- /dev/null +++ b/docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte @@ -0,0 +1,19 @@ + + + diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte index 5de05bf8..0574f747 100644 --- a/src/DataTable/DataTable.svelte +++ b/src/DataTable/DataTable.svelte @@ -2,8 +2,8 @@ /** * @typedef {string} DataTableKey * @typedef {any} DataTableValue - * @typedef {{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }} DataTableEmptyHeader - * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }} DataTableNonEmptyHeader + * @typedef {{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableEmptyHeader + * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableNonEmptyHeader * @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader * @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow * @typedef {any} DataTableRowId @@ -240,6 +240,20 @@ : rows; $: displayedRows = getDisplayedRows($tableRows, page, pageSize); $: displayedSortedRows = getDisplayedRows(sortedRows, page, pageSize); + + $: hasCustomHeaderWidth = headers.some( + (header) => header.width || header.minWidth + ); + + /** @type {(header: DataTableHeader) => undefined | string} */ + const formatHeaderWidth = (header) => { + const styles = [ + header.width && `width: ${header.width}`, + header.minWidth && `min-width: ${header.minWidth}`, + ].filter(Boolean); + if (styles.length === 0) return undefined; + return styles.join(";"); + }; @@ -264,6 +278,7 @@ stickyHeader="{stickyHeader}" sortable="{sortable}" useStaticWidth="{useStaticWidth}" + tableStyle="{hasCustomHeaderWidth && 'table-layout: fixed'}" > @@ -322,6 +337,7 @@ {:else} @@ -46,6 +53,7 @@ class:bx--data-table--static="{useStaticWidth}" class:bx--data-table--sticky-header="{stickyHeader}" {...$$restProps} + style="{tableStyle}" > diff --git a/tests/DataTable.test.svelte b/tests/DataTable.test.svelte index 4f6832f4..301efcf3 100644 --- a/tests/DataTable.test.svelte +++ b/tests/DataTable.test.svelte @@ -15,7 +15,7 @@ const headers: DataTableHeader[] = [ { key: "name", value: "Name" }, - { key: "protocol", value: "Protocol" }, + { key: "protocol", value: "Protocol", width: "400px", minWidth: "40%" }, { key: "port", value: "Port" }, { key: "rule", value: "Rule", sort: false }, ]; diff --git a/types/DataTable/DataTable.svelte.d.ts b/types/DataTable/DataTable.svelte.d.ts index c56c8a21..2697a314 100644 --- a/types/DataTable/DataTable.svelte.d.ts +++ b/types/DataTable/DataTable.svelte.d.ts @@ -11,6 +11,8 @@ export interface DataTableEmptyHeader { display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); columnMenu?: boolean; + width?: string; + minWidth?: string; } export interface DataTableNonEmptyHeader { @@ -19,6 +21,8 @@ export interface DataTableNonEmptyHeader { display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); columnMenu?: boolean; + width?: string; + minWidth?: string; } export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader; diff --git a/types/DataTable/Table.svelte.d.ts b/types/DataTable/Table.svelte.d.ts index 7a896276..a8a7943c 100644 --- a/types/DataTable/Table.svelte.d.ts +++ b/types/DataTable/Table.svelte.d.ts @@ -32,6 +32,12 @@ export interface TableProps * @default false */ stickyHeader?: boolean; + + /** + * Set the style attribute on the `table` element + * @default undefined + */ + tableStyle?: string; } export default class Table extends SvelteComponentTyped< From 20a8a647f1ea87087cdd8c4dc8fb052791a98c88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Istv=C3=A1n=20Pat=C3=B3?= Date: Sat, 14 May 2022 19:00:33 +0200 Subject: [PATCH 008/802] fix(date-picker): pressing "Enter" in date picker should update the value (#1280) --- src/DatePicker/DatePicker.svelte | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte index 3253936f..f75089b3 100644 --- a/src/DatePicker/DatePicker.svelte +++ b/src/DatePicker/DatePicker.svelte @@ -253,14 +253,6 @@ e.stopPropagation(); calendar.close(); } - - if ( - $hasCalendar && - /INPUT/.test(document.activeElement?.tagName) && - e.key === 'Enter' - ) { - e.stopPropagation(); - } }}" > From a958825d19af120c771cd36f115b9f17c19bf010 Mon Sep 17 00:00:00 2001 From: metonym Date: Sat, 14 May 2022 11:46:38 -0700 Subject: [PATCH 009/802] breaking(date-picker): default `flatpickrProps.static` to true (#1298) Closes #985 * breaking(date-picker): default `flatpickrProps.static` to true * docs(date-picker): update docs on `flatpickrProps.static` * docs(date-picker): feature single/range examples first --- docs/src/pages/components/DatePicker.svx | 58 +++++++++++-------- .../framed/DatePicker/DatePickerModal.svelte | 2 +- src/DatePicker/DatePicker.svelte | 3 + 3 files changed, 37 insertions(+), 26 deletions(-) diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx index 732690a8..9c2cf946 100644 --- a/docs/src/pages/components/DatePicker.svx +++ b/docs/src/pages/components/DatePicker.svx @@ -7,7 +7,39 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"] import Preview from "../../components/Preview.svelte"; -### Default (simple) +Carbon uses the zero dependency [flatpickr](https://github.com/flatpickr/flatpickr) library for its underlying calendar implementation. + +Set `datePickerType` to `"single"` or `"range"` for the calendar functionality. + +Specify [flatpickr options](https://flatpickr.js.org/options/) through the `flatpickrProps` prop. + + +
+ If using Rollup, specify inlineDynamicImports: true in your rollup.config.js. +
+
+ +### Single + +By default, the `flatpickr` option `static` is set to `true` so that the calendar is positioned inside the wrapper and next to the input element. This is required for the calendar position to work inside a [Modal](/components/Modal). + +Set `flatpickrProps.static` to `false` to opt out of this behavior. + + + +### Range + +Set `datePickerType` to `"range"` for the range variant. + + + +### DatePicker in a modal + + + +### Simple + +By default, the "simple" date picker does not have a dropdown calendar. @@ -61,30 +93,6 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"] -### Single - - -
- If using Rollup, specify inlineDynamicImports: true in your rollup.config.js. -
-
- - - -### Range - - - -### DatePicker in a modal - -Use `flatpickrProps` to set `static: true` for the calendar to be positioned relative to the input element. - -This is needed when placing a `DatePicker` inside of a `Modal` component. - -Refer to [flatpickr options](https://flatpickr.js.org/options/) for a full list of config options. - - - ### Skeleton diff --git a/docs/src/pages/framed/DatePicker/DatePickerModal.svelte b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte index ea33e5e9..af4eb2ad 100644 --- a/docs/src/pages/framed/DatePicker/DatePickerModal.svelte +++ b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte @@ -8,7 +8,7 @@ primaryButtonText="Confirm" secondaryButtonText="Cancel" > - + diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte index f75089b3..b210d6e5 100644 --- a/src/DatePicker/DatePicker.svelte +++ b/src/DatePicker/DatePicker.svelte @@ -216,6 +216,9 @@ locale, maxDate, minDate, + // default to static: true so the + // date picker works inside a modal + static: true, ...flatpickrProps, }); } From 37b40d640b4e9d2c4af71979c253330642fa0f9c Mon Sep 17 00:00:00 2001 From: metonym Date: Sat, 14 May 2022 12:43:12 -0700 Subject: [PATCH 010/802] fix(types): use `@see` tag for flatpickr options link (#1299) * chore(deps-dev): upgrade sveld to v0.15.3 * Run "yarn build:docs" * fix(types): use `@see` tag for flatpickr options link --- COMPONENT_INDEX.md | 2 +- docs/src/COMPONENT_API.json | 22 +++++++++++----------- package.json | 2 +- src/DatePicker/DatePicker.svelte | 4 ++-- types/DatePicker/DatePicker.svelte.d.ts | 4 ++-- yarn.lock | 8 ++++---- 6 files changed, 21 insertions(+), 21 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 76b7783e..1223585a 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1050,7 +1050,7 @@ None. | short | let | No | boolean | false | Set to `true` to use the short variant | | light | let | No | boolean | false | Set to `true` to enable the light variant | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the date picker element | -| flatpickrProps | let | No | import("flatpickr/dist/types/options").Options | {} | Override the options passed to the Flatpickr instance
https://flatpickr.js.org/options | +| flatpickrProps | let | No | import("flatpickr/dist/types/options").Options | {} | Override the options passed to the Flatpickr instance.
@see https://flatpickr.js.org/options | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index dceeac19..396c40d6 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -2751,7 +2751,7 @@ { "name": "flatpickrProps", "kind": "let", - "description": "Override the options passed to the Flatpickr instance\nhttps://flatpickr.js.org/options", + "description": "Override the options passed to the Flatpickr instance.\n@see https://flatpickr.js.org/options", "type": "import(\"flatpickr/dist/types/options\").Options", "value": "{}", "isFunction": false, @@ -10863,16 +10863,6 @@ "isFunctionDeclaration": false, "constant": false, "reactive": false - }, - { - "name": "tableStyle", - "kind": "let", - "description": "Set the style attribute on the `table` element", - "type": "string", - "isFunction": false, - "isFunctionDeclaration": false, - "constant": false, - "reactive": false } ], "moduleExports": [], @@ -10938,6 +10928,16 @@ "isFunctionDeclaration": false, "constant": false, "reactive": false + }, + { + "name": "tableStyle", + "kind": "let", + "description": "Set the style attribute on the `table` element", + "type": "string", + "isFunction": false, + "isFunctionDeclaration": false, + "constant": false, + "reactive": false } ], "moduleExports": [], diff --git a/package.json b/package.json index 908429f9..49ce84d7 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "rollup-plugin-svelte": "^7.1.0", "rollup-plugin-terser": "^7.0.2", "sass": "^1.49.11", - "sveld": "^0.15.2", + "sveld": "^0.15.3", "svelte": "^3.46.6", "svelte-check": "^2.4.6", "typescript": "^4.6.3" diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte index b210d6e5..3bfcc1d5 100644 --- a/src/DatePicker/DatePicker.svelte +++ b/src/DatePicker/DatePicker.svelte @@ -60,8 +60,8 @@ export let id = "ccs-" + Math.random().toString(36); /** - * Override the options passed to the Flatpickr instance - * https://flatpickr.js.org/options + * Override the options passed to the Flatpickr instance. + * @see https://flatpickr.js.org/options * @type {import("flatpickr/dist/types/options").Options} */ export let flatpickrProps = {}; diff --git a/types/DatePicker/DatePicker.svelte.d.ts b/types/DatePicker/DatePicker.svelte.d.ts index 6ab96175..928953cc 100644 --- a/types/DatePicker/DatePicker.svelte.d.ts +++ b/types/DatePicker/DatePicker.svelte.d.ts @@ -74,8 +74,8 @@ export interface DatePickerProps id?: string; /** - * Override the options passed to the Flatpickr instance - * https://flatpickr.js.org/options + * Override the options passed to the Flatpickr instance. + * @see https://flatpickr.js.org/options * @default {} */ flatpickrProps?: import("flatpickr/dist/types/options").Options; diff --git a/yarn.lock b/yarn.lock index 372baf6f..8ca64509 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1330,10 +1330,10 @@ supports-color@^9.2.1: resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-9.2.2.tgz#502acaf82f2b7ee78eb7c83dcac0f89694e5a7bb" integrity sha512-XC6g/Kgux+rJXmwokjm9ECpD6k/smUoS5LKlUCcsYr4IY3rW0XyAympon2RmxGrlnZURMpg5T18gWDP9CsHXFA== -sveld@^0.15.2: - version "0.15.2" - resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.15.2.tgz#f8a72cafa8ba5e2ff12ce5a858935b6ca72bc18f" - integrity sha512-Ogv8IBPJxNSIkLeGKIOLkqh6bcOjy/43Tcf8wiGMzg60ZWU1vnogkDl5aEAs4QvWZ+Mzy5t3GAAG8rpb4WO1YA== +sveld@^0.15.3: + version "0.15.3" + resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.15.3.tgz#75fe72f472b9cfbe863f6f0b074612d4132dc960" + integrity sha512-3TYhrLpm8z8elnZ6ffQeq1SeoxzC2zsFY/9QeNHu1UcQxAZ6LqfyUufnOkNkelYJMq9uBn4bGUAYJpbpTMjnOA== dependencies: "@rollup/plugin-node-resolve" "^13.2.1" acorn "^8.7.0" From 4a052afcb5f6219a8d6d26c1b1888f7617c4cf28 Mon Sep 17 00:00:00 2001 From: metonym Date: Sat, 14 May 2022 12:49:06 -0700 Subject: [PATCH 011/802] chore(date-picker): also set `static: true` in exported prop (#1300) * chore(date-picker): also set `static: true` in exported prop * Run "yarn build:docs" --- COMPONENT_INDEX.md | 2 +- docs/src/COMPONENT_API.json | 2 +- src/DatePicker/DatePicker.svelte | 2 +- types/DatePicker/DatePicker.svelte.d.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 1223585a..3811e23c 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1050,7 +1050,7 @@ None. | short | let | No | boolean | false | Set to `true` to use the short variant | | light | let | No | boolean | false | Set to `true` to enable the light variant | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the date picker element | -| flatpickrProps | let | No | import("flatpickr/dist/types/options").Options | {} | Override the options passed to the Flatpickr instance.
@see https://flatpickr.js.org/options | +| flatpickrProps | let | No | import("flatpickr/dist/types/options").Options | { static: true } | Override the options passed to the Flatpickr instance.
@see https://flatpickr.js.org/options | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 396c40d6..1aee0035 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -2753,7 +2753,7 @@ "kind": "let", "description": "Override the options passed to the Flatpickr instance.\n@see https://flatpickr.js.org/options", "type": "import(\"flatpickr/dist/types/options\").Options", - "value": "{}", + "value": "{ static: true }", "isFunction": false, "isFunctionDeclaration": false, "constant": false, diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte index 3bfcc1d5..3443dc5e 100644 --- a/src/DatePicker/DatePicker.svelte +++ b/src/DatePicker/DatePicker.svelte @@ -64,7 +64,7 @@ * @see https://flatpickr.js.org/options * @type {import("flatpickr/dist/types/options").Options} */ - export let flatpickrProps = {}; + export let flatpickrProps = { static: true }; import { createEventDispatcher, diff --git a/types/DatePicker/DatePicker.svelte.d.ts b/types/DatePicker/DatePicker.svelte.d.ts index 928953cc..98062528 100644 --- a/types/DatePicker/DatePicker.svelte.d.ts +++ b/types/DatePicker/DatePicker.svelte.d.ts @@ -76,7 +76,7 @@ export interface DatePickerProps /** * Override the options passed to the Flatpickr instance. * @see https://flatpickr.js.org/options - * @default {} + * @default { static: true } */ flatpickrProps?: import("flatpickr/dist/types/options").Options; } From d5a35575309a76336b4c245fba2a76ca1b158bf9 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sat, 14 May 2022 13:57:32 -0700 Subject: [PATCH 012/802] v0.64.0 --- CHANGELOG.md | 26 ++++++++++++++++++++++++++ COMPONENT_INDEX.md | 2 +- package.json | 2 +- 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 89b3cffe..5be3f38f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,32 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 +## [0.64.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.64.0) - 2022-05-14 + +**Breaking Changes** + +- set `flatpickrProps.static` in `DatePicker` to be true by default +- use data attribute instead of id for `DataTable` headers/rows + +**Features** + +- support custom column widths in `DataTable` +- dispatch "expand" and "collapse" events in `CodeSnippet` + +**Fixes** + +- use `@see` tag for flatpickr options link in `DatePicker` +- pressing "Enter" in `DatePicker` should update the value +- dispatched event type without detail should be `null`, not `any` +- type missing "open" event in `HeaderAction` +- use small button in multi-line `CodeSnippet` + +**Documentation** + +- make calendar variants of `DatePicker` more prominent +- add `DataTable` example "Custom column widths" +- add `CodeSnippet` examples "Expanded by default" and "Reactive example" + ## [0.63.8](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.8) - 2022-05-07 **Fixes** diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 3811e23c..8a78cc4c 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,6 +1,6 @@ # Component Index -> 165 components exported from carbon-components-svelte@0.63.8. +> 165 components exported from carbon-components-svelte@0.64.0. ## Components diff --git a/package.json b/package.json index 49ce84d7..f78a6311 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "carbon-components-svelte", - "version": "0.63.8", + "version": "0.64.0", "license": "Apache-2.0", "description": "Svelte implementation of the Carbon Design System", "svelte": "./src/index.js", From e1451324cc21ea2f4ac15a08496c646d9c90e365 Mon Sep 17 00:00:00 2001 From: metonym Date: Tue, 17 May 2022 06:24:23 -0700 Subject: [PATCH 013/802] docs: update `Theme`, `DataTable` docs (#1305) * docs(theme): add note that `Theme` must be used with `all.css` * docs(data-table): add note that custom widths do not work with `stickyHeader` --- docs/src/pages/components/DataTable.svx | 4 ++++ docs/src/pages/components/Theme.svx | 14 ++++++++++++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx index f3a933e4..52714f80 100644 --- a/docs/src/pages/components/DataTable.svx +++ b/docs/src/pages/components/DataTable.svx @@ -334,6 +334,10 @@ Specify a `width` or `minWidth` property in the `headers` object to customize th A [table-layout: fixed](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#values) rule will be applied to the `table` element when using custom widths. + +
Custom column widths do not work with a sticky header.
+
+ ### Sticky header diff --git a/docs/src/pages/components/Theme.svx b/docs/src/pages/components/Theme.svx index 395e077f..d0cdc66f 100644 --- a/docs/src/pages/components/Theme.svx +++ b/docs/src/pages/components/Theme.svx @@ -1,9 +1,19 @@ -This utility component dynamically updates the Carbon theme on the client-side using CSS variables. +The `Theme` component can dyanmically update the Carbon theme on the client-side. It can persist the theme locally using [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). + + +
You must use the "all.css" StyleSheet with the Theme component.
+
+ +The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for dynamic theming. + + ### Default From cae1f1939e368da3094a6f28050579e3118785d2 Mon Sep 17 00:00:00 2001 From: metonym Date: Wed, 18 May 2022 19:00:21 -0700 Subject: [PATCH 014/802] fix(modal): remove close button `title` attribute, add `aria-hidden` to icons (#1308) * fix(modal): close button should not have a title * fix(modal): close icon should not have aria-label * fix(modal): close button icons should have `aria-hidden="true" --- src/ComposedModal/ModalHeader.svelte | 7 +++++-- src/Modal/Modal.svelte | 14 ++------------ 2 files changed, 7 insertions(+), 14 deletions(-) diff --git a/src/ComposedModal/ModalHeader.svelte b/src/ComposedModal/ModalHeader.svelte index 67d346ae..f3b5c069 100644 --- a/src/ComposedModal/ModalHeader.svelte +++ b/src/ComposedModal/ModalHeader.svelte @@ -50,13 +50,16 @@ diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte index 643b2bc4..9efbda6f 100644 --- a/src/Modal/Modal.svelte +++ b/src/Modal/Modal.svelte @@ -222,17 +222,12 @@ bind:this="{buttonRef}" type="button" aria-label="{iconDescription}" - title="{iconDescription}" class:bx--modal-close="{true}" on:click="{() => { open = false; }}" > - +