From f9909827d0499f6d312a01b1347be1b7af5eb162 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Fri, 25 Jun 2021 03:45:30 -0700 Subject: [PATCH] Align v10.34 (#621) * feat(theme): add g80 theme * docs(data-table): use link with icon variant * feat(search): support expandable variant * fix(file-uploaded): use semantic p element instead of strong * feat(side-nav): dispatch open, close, click:overlay events * refactor(ui-shell): remove usage of deprecated Icon component * feat(ui-shell): allow custom hamburger menu icons * feat(button): support xl size * fix(code-snippet): wrap code element with pre * refactor(button): use button specific tooltip class for icon-only variant * feat(password-input): support warning, inline props * feat(data-table): support medium size --- COMPONENT_INDEX.md | 111 +++++----- README.md | 4 +- css/g80.scss | 32 +++ docs/package.json | 2 +- docs/src/App.svelte | 9 + docs/src/COMPONENT_API.json | 82 +++++++- docs/src/components/Theme.svelte | 2 +- docs/src/layouts/ComponentLayout.svelte | 1 + docs/src/pages/components/Button.svx | 8 + docs/src/pages/components/DataTable.svx | 57 ++++- docs/src/pages/components/PasswordInput.svx | 8 + docs/src/pages/components/Search.svx | 6 +- docs/src/pages/components/Select.svx | 13 +- docs/yarn.lock | 10 +- package.json | 2 +- src/Button/Button.svelte | 7 +- src/CodeSnippet/CodeSnippet.svelte | 9 +- src/DataTable/DataTable.svelte | 2 +- src/DataTable/Table.svelte | 4 +- src/FileUploader/FileUploader.svelte | 2 +- src/Search/Search.svelte | 65 +++--- src/TextInput/PasswordInput.svelte | 198 +++++++++++------- src/UIShell/GlobalHeader/Header.svelte | 22 +- .../GlobalHeader/HeaderActionSearch.svelte | 5 +- src/UIShell/SideNav/HamburgerMenu.svelte | 22 +- src/UIShell/SideNav/SideNav.svelte | 13 +- src/UIShell/SideNav/SideNavLink.svelte | 4 +- src/UIShell/SideNav/SideNavMenu.svelte | 5 +- types/Button/Button.d.ts | 2 +- types/DataTable/DataTable.d.ts | 2 +- types/DataTable/Table.d.ts | 2 +- types/Search/Search.d.ts | 14 ++ types/TextInput/PasswordInput.d.ts | 18 ++ types/UIShell/GlobalHeader/Header.d.ts | 12 ++ types/UIShell/SideNav/SideNav.d.ts | 6 +- yarn.lock | 8 +- 36 files changed, 572 insertions(+), 197 deletions(-) create mode 100644 css/g80.scss diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index e565a00a..7c9819a2 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -350,7 +350,7 @@ None. | ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | | hasIconOnly | let | Yes | boolean | false | Set to `true` for the icon-only variant | | kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | "primary" | Specify the kind of button | -| size | let | No | "default" | "field" | "small" | "default" | Specify the size of button | +| size | let | No | "default" | "field" | "small" | "xl" | "default" | Specify the size of button | | isSelected | let | No | boolean | false | Set to `true` to enable the selected state for an icon-only, ghost button | | icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | | iconDescription | let | No | string | -- | Specify the ARIA label for the button icon | @@ -930,23 +930,23 @@ export interface DataTableCell { ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- | -| selectedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be selected | -| selectable | let | Yes | boolean | false | Set to `true` for the selectable variant
Automatically set to `true` if `radio` or `batchSelection` are `true` | -| expandedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be expanded | -| expandable | let | Yes | boolean | false | Set to `true` for the expandable variant
Automatically set to `true` if `batchExpansion` is `true` | -| rows | let | Yes | DataTableRow[] | [] | Specify the rows the data table should render
keys defined in `headers` are used for the row ids | -| headers | let | No | DataTableHeader[] | [] | Specify the data table headers | -| size | let | No | "compact" | "short" | "tall" | -- | Set the size of the data table | -| title | let | No | string | "" | Specify the title of the data table | -| description | let | No | string | "" | Specify the description of the data table | -| zebra | let | No | boolean | false | Set to `true` to use zebra styles | -| sortable | let | No | boolean | false | Set to `true` for the sortable variant | -| batchExpansion | let | No | boolean | false | Set to `true` to enable batch expansion | -| radio | let | No | boolean | false | Set to `true` for the radio selection variant | -| batchSelection | let | No | boolean | false | Set to `true` to enable batch selection | -| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------- | +| selectedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be selected | +| selectable | let | Yes | boolean | false | Set to `true` for the selectable variant
Automatically set to `true` if `radio` or `batchSelection` are `true` | +| expandedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be expanded | +| expandable | let | Yes | boolean | false | Set to `true` for the expandable variant
Automatically set to `true` if `batchExpansion` is `true` | +| rows | let | Yes | DataTableRow[] | [] | Specify the rows the data table should render
keys defined in `headers` are used for the row ids | +| headers | let | No | DataTableHeader[] | [] | Specify the data table headers | +| size | let | No | "compact" | "short" | "medium" | "tall" | -- | Set the size of the data table | +| title | let | No | string | "" | Specify the title of the data table | +| description | let | No | string | "" | Specify the description of the data table | +| zebra | let | No | boolean | false | Set to `true` to use zebra styles | +| sortable | let | No | boolean | false | Set to `true` for the sortable variant | +| batchExpansion | let | No | boolean | false | Set to `true` to enable batch expansion | +| radio | let | No | boolean | false | Set to `true` for the radio selection variant | +| batchSelection | let | No | boolean | false | Set to `true` to enable batch selection | +| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header | ### Slots @@ -1505,16 +1505,18 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------------------- | :--------------- | :------- | :----------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| isSideNavOpen | let | Yes | boolean | false | Set to `true` to open the side nav | -| expandedByDefault | let | No | boolean | true | Set to `false` to hide the side nav by default | -| uiShellAriaLabel | let | No | string | -- | Specify the ARIA label for the header | -| href | let | No | string | -- | Specify the `href` attribute | -| company | let | No | string | -- | Specify the company name | -| platformName | let | No | string | "" | Specify the platform name
Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) | -| persistentHamburgerMenu | let | No | boolean | false | Set to `true` to persist the hamburger menu | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| isSideNavOpen | let | Yes | boolean | false | Set to `true` to open the side nav | +| expandedByDefault | let | No | boolean | true | Set to `false` to hide the side nav by default | +| uiShellAriaLabel | let | No | string | -- | Specify the ARIA label for the header | +| href | let | No | string | -- | Specify the `href` attribute | +| company | let | No | string | -- | Specify the company name | +| platformName | let | No | string | "" | Specify the platform name
Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) | +| persistentHamburgerMenu | let | No | boolean | false | Set to `true` to persist the hamburger menu | +| iconMenu | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render for the closed state
Defaults to `Menu20` | +| iconClose | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render for the opened state
Defaults to `Close20` | ### Slots @@ -2745,6 +2747,9 @@ None. | hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | | invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | | invalidText | let | No | string | "" | Specify the text for the invalid state | +| warn | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | let | No | string | "" | Specify the warning state text | +| inline | let | No | boolean | false | Set to `true` to use inline version | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | | name | let | No | string | -- | Specify a name attribute for the input | @@ -3011,12 +3016,14 @@ None. | :------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | | ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | value | let | Yes | string | "" | Specify the value of the search input | +| expanded | let | Yes | boolean | false | Set to `true to expand the search input | | small | let | No | boolean | false | -- | | size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | | searchClass | let | No | string | "" | Specify the class name passed to the outer div element | | skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | | light | let | No | boolean | false | Set to `true` to enable the light variant | | disabled | let | No | boolean | false | Set to `true` to disable the search input | +| expandable | let | No | boolean | false | Set to `true` to enable the expandable variant | | type | let | No | string | "text" | Specify the `type` attribute of the search input | | placeholder | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | | autocomplete | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | @@ -3031,18 +3038,20 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| change | forwarded | -- | -| input | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | -| keydown | forwarded | -- | -| clear | dispatched | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :--------------- | +| expand | dispatched | any | +| collapse | dispatched | any | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| input | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | +| keydown | forwarded | -- | +| clear | dispatched | -- | ## `SearchSkeleton` @@ -3212,7 +3221,11 @@ None. ### Events -None. +| Event name | Type | Detail | +| :------------ | :--------- | :--------------- | +| open | dispatched | any | +| close | dispatched | any | +| click:overlay | dispatched | any | ## `SideNavDivider` @@ -3674,14 +3687,14 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | --------------------------------------- | -| size | let | No | "compact" | "short" | "tall" | -- | 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 | -| shouldShowBorder | let | No | boolean | false | Set to `true` for the bordered variant | -| 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" | -- | 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 | +| shouldShowBorder | let | No | boolean | false | Set to `true` for the bordered variant | +| 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 | ### Slots diff --git a/README.md b/README.md index 119dcc6d..a49b4350 100644 --- a/README.md +++ b/README.md @@ -89,6 +89,7 @@ Import components from `carbon-components-svelte` in the `script` tag of your Sv - **white.css**: Default Carbon theme (light) - **g10.css**: Gray 10 theme (light) +- **g80.css**: Gray 80 theme (dark) - **g90.css**: Gray 90 theme (dark) - **g100.css**: Gray 100 theme (dark) - **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) @@ -99,6 +100,7 @@ The compiled CSS is generated from the following `.scss` files: - [css/white.scss](css/white.scss) - [css/g10.scss](css/g10.scss) +- [css/g80.scss](css/g80.scss) - [css/g90.scss](css/g90.scss) - [css/g100.scss](css/g100.scss) - [css/all.scss](css/all.scss) @@ -157,7 +159,7 @@ Using JavaScript: ```svelte {#if skeleton} @@ -101,9 +98,17 @@ class:bx--search--sm="{size === 'sm' || small}" class:bx--search--lg="{size === 'lg'}" class:bx--search--xl="{size === 'xl'}" + class:bx--search--expandable="{expandable}" + class:bx--search--expanded="{expanded}" class="{searchClass}" > -
+
diff --git a/src/UIShell/GlobalHeader/Header.svelte b/src/UIShell/GlobalHeader/Header.svelte index c106e746..ff74f9bd 100644 --- a/src/UIShell/GlobalHeader/Header.svelte +++ b/src/UIShell/GlobalHeader/Header.svelte @@ -35,6 +35,22 @@ /** Obtain a reference to the HTML anchor element */ export let ref = null; + /** + * Specify the icon from `carbon-icons-svelte` to render for the closed state + * Defaults to `Menu20` + * @type {typeof import("carbon-icons-svelte").CarbonIcon} + */ + export let iconMenu = Menu20; + + /** + * Specify the icon from `carbon-icons-svelte` to render for the opened state + * Defaults to `Close20` + * @type {typeof import("carbon-icons-svelte").CarbonIcon} + */ + export let iconClose = Close20; + + import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte"; + import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte"; import { shouldRenderHamburgerMenu } from "../navStore"; import HamburgerMenu from "../SideNav/HamburgerMenu.svelte"; @@ -52,7 +68,11 @@
{#if ($shouldRenderHamburgerMenu && winWidth < 1056) || persistentHamburgerMenu} - + {/if} - + - + diff --git a/src/UIShell/SideNav/HamburgerMenu.svelte b/src/UIShell/SideNav/HamburgerMenu.svelte index 7cbad33e..4437a35a 100644 --- a/src/UIShell/SideNav/HamburgerMenu.svelte +++ b/src/UIShell/SideNav/HamburgerMenu.svelte @@ -8,18 +8,31 @@ /** Set to `true` to toggle the open state */ export let isOpen = false; + /** + * Specify the icon from `carbon-icons-svelte` to render for the closed state + * Defaults to `Menu20` + * @type {typeof import("carbon-icons-svelte").CarbonIcon} + */ + export let iconMenu = Menu20; + + /** + * Specify the icon from `carbon-icons-svelte` to render for the opened state + * Defaults to `Close20` + * @type {typeof import("carbon-icons-svelte").CarbonIcon} + */ + export let iconClose = Close20; + /** Obtain a reference to the HTML button element */ export let ref = null; import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte"; import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte"; - import { Icon } from "../../Icon"; diff --git a/src/UIShell/SideNav/SideNav.svelte b/src/UIShell/SideNav/SideNav.svelte index 728ffdb2..c6599986 100644 --- a/src/UIShell/SideNav/SideNav.svelte +++ b/src/UIShell/SideNav/SideNav.svelte @@ -1,4 +1,10 @@
  • @@ -42,7 +40,7 @@ class:bx--side-nav__icon="{true}" class:bx--side-nav__icon--small="{true}" > - + {/if} {text} diff --git a/src/UIShell/SideNav/SideNavMenu.svelte b/src/UIShell/SideNav/SideNavMenu.svelte index c68bb5df..0625f3ac 100644 --- a/src/UIShell/SideNav/SideNavMenu.svelte +++ b/src/UIShell/SideNav/SideNavMenu.svelte @@ -18,7 +18,6 @@ export let ref = null; import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte"; - import Icon from "../../Icon/Icon.svelte";
  • @@ -35,7 +34,7 @@ > {#if icon}
    - +
    {/if} {text} @@ -44,7 +43,7 @@ class:bx--side-nav__icon--small="{true}" class:bx--side-nav__submenu-chevron="{true}" > - +
      diff --git a/types/Button/Button.d.ts b/types/Button/Button.d.ts index 97d62ed0..67b9f1f3 100644 --- a/types/Button/Button.d.ts +++ b/types/Button/Button.d.ts @@ -24,7 +24,7 @@ export interface ButtonProps * Specify the size of button * @default "default" */ - size?: "default" | "field" | "small"; + size?: "default" | "field" | "small" | "xl"; /** * Set to `true` to enable the selected state for an icon-only, ghost button diff --git a/types/DataTable/DataTable.d.ts b/types/DataTable/DataTable.d.ts index ab82b5ed..394aa1d6 100644 --- a/types/DataTable/DataTable.d.ts +++ b/types/DataTable/DataTable.d.ts @@ -54,7 +54,7 @@ export interface DataTableProps /** * Set the size of the data table */ - size?: "compact" | "short" | "tall"; + size?: "compact" | "short" | "medium" | "tall"; /** * Specify the title of the data table diff --git a/types/DataTable/Table.d.ts b/types/DataTable/Table.d.ts index 6e9cf0de..6c951052 100644 --- a/types/DataTable/Table.d.ts +++ b/types/DataTable/Table.d.ts @@ -6,7 +6,7 @@ export interface TableProps /** * Set the size of the table */ - size?: "compact" | "short" | "tall"; + size?: "compact" | "short" | "medium" | "tall"; /** * Set to `true` to use zebra styles diff --git a/types/Search/Search.d.ts b/types/Search/Search.d.ts index ce62a728..2b2d5475 100644 --- a/types/Search/Search.d.ts +++ b/types/Search/Search.d.ts @@ -37,6 +37,18 @@ export interface SearchProps { */ disabled?: boolean; + /** + * Set to `true` to enable the expandable variant + * @default false + */ + expandable?: boolean; + + /** + * Set to `true to expand the search input + * @default false + */ + expanded?: boolean; + /** * Specify the value of the search input * @default "" @@ -95,6 +107,8 @@ export interface SearchProps { export default class Search extends SvelteComponentTyped< SearchProps, { + expand: CustomEvent; + collapse: CustomEvent; click: WindowEventMap["click"]; mouseover: WindowEventMap["mouseover"]; mouseenter: WindowEventMap["mouseenter"]; diff --git a/types/TextInput/PasswordInput.d.ts b/types/TextInput/PasswordInput.d.ts index 55ab9b10..c5a5a752 100644 --- a/types/TextInput/PasswordInput.d.ts +++ b/types/TextInput/PasswordInput.d.ts @@ -92,6 +92,24 @@ export interface PasswordInputProps */ invalidText?: string; + /** + * Set to `true` to indicate an warning state + * @default false + */ + warn?: boolean; + + /** + * Specify the warning state text + * @default "" + */ + warnText?: string; + + /** + * Set to `true` to use inline version + * @default false + */ + inline?: boolean; + /** * Set an id for the input element * @default "ccs-" + Math.random().toString(36) diff --git a/types/UIShell/GlobalHeader/Header.d.ts b/types/UIShell/GlobalHeader/Header.d.ts index 676f328e..237ef161 100644 --- a/types/UIShell/GlobalHeader/Header.d.ts +++ b/types/UIShell/GlobalHeader/Header.d.ts @@ -48,6 +48,18 @@ export interface HeaderProps * @default null */ ref?: null | HTMLAnchorElement; + + /** + * Specify the icon from `carbon-icons-svelte` to render for the closed state + * Defaults to `Menu20` + */ + iconMenu?: typeof import("carbon-icons-svelte").CarbonIcon; + + /** + * Specify the icon from `carbon-icons-svelte` to render for the opened state + * Defaults to `Close20` + */ + iconClose?: typeof import("carbon-icons-svelte").CarbonIcon; } export default class Header extends SvelteComponentTyped< diff --git a/types/UIShell/SideNav/SideNav.d.ts b/types/UIShell/SideNav/SideNav.d.ts index ecec9933..4663c9fb 100644 --- a/types/UIShell/SideNav/SideNav.d.ts +++ b/types/UIShell/SideNav/SideNav.d.ts @@ -23,6 +23,10 @@ export interface SideNavProps export default class SideNav extends SvelteComponentTyped< SideNavProps, - {}, + { + open: CustomEvent; + close: CustomEvent; + ["click:overlay"]: CustomEvent; + }, { default: {} } > {} diff --git a/yarn.lock b/yarn.lock index 88e255c7..ee69d07c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -453,10 +453,10 @@ caniuse-lite@^1.0.30001181: resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2" integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw== -carbon-components@10.33.0: - version "10.33.0" - resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.33.0.tgz#c573de233530270d172a2cae0faba5d1530725e5" - integrity sha512-u9eqP0tZTdyd4RzD5isK1LqTH+Lb+3jUtei7dkKXBK5sm+Xx8yP8l2koOZqzsFzaMGpeZOlO/3ajmDQ+LK6Gbw== +carbon-components@10.34.0: + version "10.34.0" + resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.34.0.tgz#38a8bc4e03193e09459b22caf0fe2c72a64a63e8" + integrity sha512-KgWIFvJv5lg0puFsjXwIqv99ew8u1gUnrjN6/0vmyz2T/sJxGkDuiGAUlZsjmpsF+z2weK9pDu4cutjHYId2Sg== dependencies: "@carbon/telemetry" "0.0.0-alpha.6" flatpickr "4.6.1"