From 05cfeda11519c8258e4b03e5e2103cd0a64c3256 Mon Sep 17 00:00:00 2001 From: Eric Y Liu Date: Sat, 10 Jul 2021 15:16:18 -0700 Subject: [PATCH] fix(theme): fix broken type test --- COMPONENT_INDEX.md | 8 ++++---- docs/src/COMPONENT_API.json | 8 ++++---- docs/src/pages/_layout.svelte | 2 +- src/Theme/Theme.svelte | 2 +- tests/Theme.test.svelte | 7 +++++-- types/Theme/Theme.d.ts | 2 +- 6 files changed, 16 insertions(+), 13 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 50267564..301b70a8 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -4215,7 +4215,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; | Prop name | Kind | Reactive | Type | Default value | Description | | :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | | theme | let | Yes | CarbonTheme | "white" | Set the current Carbon theme | -| tokens | let | No | {} | {} | Customize a theme with your own tokens
https://carbondesignsystem.com/guidelines/themes/overview#tokens | +| tokens | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens
https://carbondesignsystem.com/guidelines/themes/overview#tokens | | persist | let | No | boolean | false | Set to `true` to persist the theme using window.localStorage | | persistKey | let | No | string | "theme" | Specify the local storage key | | render | let | No | "toggle" | "select" | -- | Render a toggle or select dropdown to control the theme | @@ -4224,9 +4224,9 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :----------------------------------- | :------- | -| -- | Yes | { theme: CarbonTheme } | -- | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :------------------------------------ | :------- | +| -- | Yes | { theme: CarbonTheme; } | -- | ### Events diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 1d31e501..efc4c507 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -11592,7 +11592,7 @@ "name": "tokens", "kind": "let", "description": "Customize a theme with your own tokens\nhttps://carbondesignsystem.com/guidelines/themes/overview#tokens", - "type": "{}", + "type": "{ [token: string]: any; }", "value": "{}", "isFunction": false, "isFunctionDeclaration": false, @@ -11636,7 +11636,7 @@ "kind": "let", "description": "Override the default toggle props", "type": "import(\"../Toggle/Toggle\").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }", - "value": "{ themes: [\"white\", \"g100\"], labelA: \"\", labelB: \"\", labelText: \"Dark mode\", hideLabel: false, }", + "value": "{ themes: [\"white\", \"g100\"], labelA: \"\", labelB: \"\", labelText: \"Dark mode\", hideLabel: false, }", "isFunction": false, "isFunctionDeclaration": false, "constant": false, @@ -11647,7 +11647,7 @@ "kind": "let", "description": "Override the default select props", "type": "import(\"../Select/Select\").SelectProps & { themes?: CarbonTheme[]; }", - "value": "{ themes: themeKeys, labelText: \"Themes\", hideLabel: false, }", + "value": "{ themes: themeKeys, labelText: \"Themes\", hideLabel: false, }", "isFunction": false, "isFunctionDeclaration": false, "constant": false, @@ -11658,7 +11658,7 @@ { "name": "__default__", "default": true, - "slot_props": "{ theme: CarbonTheme }" + "slot_props": "{ theme: CarbonTheme; }" } ], "events": [ diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte index 907dcd31..b5743fde 100644 --- a/docs/src/pages/_layout.svelte +++ b/docs/src/pages/_layout.svelte @@ -20,7 +20,7 @@ import Footer from "../components/Footer.svelte"; const deprecated = ["ToggleSmall", "Icon"]; - const new_components = ["Breakpoint", "RecursiveList", "TreeView"]; + const new_components = ["Theme"]; let isOpen = false; let isSideNavOpen = true; diff --git a/src/Theme/Theme.svelte b/src/Theme/Theme.svelte index ef884927..b2400805 100644 --- a/src/Theme/Theme.svelte +++ b/src/Theme/Theme.svelte @@ -7,6 +7,7 @@ /** * @typedef {"white" | "g10" | "g80" | "g90" | "g100"} CarbonTheme * @event {{ theme: CarbonTheme; }} update + * @slot {{ theme: CarbonTheme; }} */ /** @@ -19,7 +20,6 @@ * Customize a theme with your own tokens * https://carbondesignsystem.com/guidelines/themes/overview#tokens * @type {{ [token: string]: any; }} - * @example {{ "button-primary": "violet" }} */ export let tokens = {}; diff --git a/tests/Theme.test.svelte b/tests/Theme.test.svelte index ee877f3e..3a3c85ba 100644 --- a/tests/Theme.test.svelte +++ b/tests/Theme.test.svelte @@ -12,10 +12,13 @@ on:update="{(e) => console.log(e.detail.theme)}" tokens="{{ 'button-primary': 'violet' }}" render="toggle" - renderToggle="{{ + toggle="{{ themes: ['g10', 'g90'], labelA: '', labelB: '', - hideLabel: true, + }}" + select="{{ + themes: ['g10', 'g90'], + labelText: '', }}" /> diff --git a/types/Theme/Theme.d.ts b/types/Theme/Theme.d.ts index f74c196f..f250a95d 100644 --- a/types/Theme/Theme.d.ts +++ b/types/Theme/Theme.d.ts @@ -15,7 +15,7 @@ export interface ThemeProps { * https://carbondesignsystem.com/guidelines/themes/overview#tokens * @default {} */ - tokens?: {}; + tokens?: { [token: string]: any }; /** * Set to `true` to persist the theme using window.localStorage