mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(theme): fix broken type test

Browse source
This commit is contained in:
Eric Y Liu 2021-07-10 15:16:18 -07:00
commit 05cfeda115
6 changed files with 16 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

8
COMPONENT_INDEX.md
View file

@ -4215,7 +4215,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | | :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| theme | <code>let</code> | Yes | <code>CarbonTheme</code> | <code>"white"</code> | Set the current Carbon theme | | theme | <code>let</code> | Yes | <code>CarbonTheme</code> | <code>"white"</code> | Set the current Carbon theme |
| tokens | <code>let</code> | No | <code>{}</code> | <code>{}</code> | Customize a theme with your own tokens<br />https://carbondesignsystem.com/guidelines/themes/overview#tokens | | tokens | <code>let</code> | No | <code>{ [token: string]: any; }</code> | <code>{}</code> | Customize a theme with your own tokens<br />https://carbondesignsystem.com/guidelines/themes/overview#tokens |
| persist | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the theme using window.localStorage | | persist | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the theme using window.localStorage |
| persistKey | <code>let</code> | No | <code>string</code> | <code>"theme"</code> | Specify the local storage key | | persistKey | <code>let</code> | No | <code>string</code> | <code>"theme"</code> | Specify the local storage key |
| render | <code>let</code> | No | <code>"toggle" &#124; "select"</code> | -- | Render a toggle or select dropdown to control the theme | | render | <code>let</code> | No | <code>"toggle" &#124; "select"</code> | -- | Render a toggle or select dropdown to control the theme |
@ -4224,9 +4224,9 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :----------------------------------- | :------- | | :-------- | :------ | :------------------------------------ | :------- |
| -- | Yes | <code>{ theme: CarbonTheme } </code> | -- | | -- | Yes | <code>{ theme: CarbonTheme; } </code> | -- |
### Events ### Events

8
docs/src/COMPONENT_API.json
View file

@ -11592,7 +11592,7 @@
"name": "tokens", "name": "tokens",
"kind": "let", "kind": "let",
"description": "Customize a theme with your own tokens\nhttps://carbondesignsystem.com/guidelines/themes/overview#tokens", "description": "Customize a theme with your own tokens\nhttps://carbondesignsystem.com/guidelines/themes/overview#tokens",
"type": "{}", "type": "{ [token: string]: any; }",
"value": "{}", "value": "{}",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -11636,7 +11636,7 @@
"kind": "let", "kind": "let",
"description": "Override the default toggle props", "description": "Override the default toggle props",
"type": "import(\"../Toggle/Toggle\").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }", "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, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -11647,7 +11647,7 @@
"kind": "let", "kind": "let",
"description": "Override the default select props", "description": "Override the default select props",
"type": "import(\"../Select/Select\").SelectProps & { themes?: CarbonTheme[]; }", "type": "import(\"../Select/Select\").SelectProps & { themes?: CarbonTheme[]; }",
"value": "{ themes: themeKeys, labelText: \"Themes\", hideLabel: false, }", "value": "{ themes: themeKeys, labelText: \"Themes\", hideLabel: false, }",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -11658,7 +11658,7 @@
{ {
"name": "__default__", "name": "__default__",
"default": true, "default": true,
"slot_props": "{ theme: CarbonTheme }" "slot_props": "{ theme: CarbonTheme; }"
} }
], ],
"events": [ "events": [

2
docs/src/pages/_layout.svelte
View file

@ -20,7 +20,7 @@
import Footer from "../components/Footer.svelte"; import Footer from "../components/Footer.svelte";
const deprecated = ["ToggleSmall", "Icon"]; const deprecated = ["ToggleSmall", "Icon"];
const new_components = ["Breakpoint", "RecursiveList", "TreeView"]; const new_components = ["Theme"];
let isOpen = false; let isOpen = false;
let isSideNavOpen = true; let isSideNavOpen = true;

2
src/Theme/Theme.svelte
View file

@ -7,6 +7,7 @@
/** /**
* @typedef {"white" | "g10" | "g80" | "g90" | "g100"} CarbonTheme * @typedef {"white" | "g10" | "g80" | "g90" | "g100"} CarbonTheme
* @event {{ theme: CarbonTheme; }} update * @event {{ theme: CarbonTheme; }} update
* @slot {{ theme: CarbonTheme; }}
*/ */
/** /**
@ -19,7 +20,6 @@
* Customize a theme with your own tokens * Customize a theme with your own tokens
* https://carbondesignsystem.com/guidelines/themes/overview#tokens * https://carbondesignsystem.com/guidelines/themes/overview#tokens
* @type {{ [token: string]: any; }} * @type {{ [token: string]: any; }}
* @example {{ "button-primary": "violet" }}
*/ */
export let tokens = {}; export let tokens = {};

7
tests/Theme.test.svelte
View file

@ -12,10 +12,13 @@
on:update="{(e) => console.log(e.detail.theme)}" on:update="{(e) => console.log(e.detail.theme)}"
tokens="{{ 'button-primary': 'violet' }}" tokens="{{ 'button-primary': 'violet' }}"
render="toggle" render="toggle"
renderToggle="{{ toggle="{{
themes: ['g10', 'g90'], themes: ['g10', 'g90'],
labelA: '', labelA: '',
labelB: '', labelB: '',
hideLabel: true, }}"
select="{{
themes: ['g10', 'g90'],
labelText: '',
}}" }}"
/> />

2
types/Theme/Theme.d.ts vendored
View file

@ -15,7 +15,7 @@ export interface ThemeProps {
* https://carbondesignsystem.com/guidelines/themes/overview#tokens * https://carbondesignsystem.com/guidelines/themes/overview#tokens
* @default {} * @default {}
*/ */
tokens?: {}; tokens?: { [token: string]: any };
/** /**
* Set to `true` to persist the theme using window.localStorage * Set to `true` to persist the theme using window.localStorage