mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
Alignment with Carbon version 10.29 (#529)
* chore: patch prettier-plugin-svelte * docs(tag): add filterable small tag example * feat(ui-shell): add SideNavDivider * feat(combo-box): support warning state * docs(combo-box): add invalid state example * fix(progress-step): add title to warning icon * docs(progress-indicator): add invalid step example * docs(progress-indicator): add disabled steps example * feat(truncate): add text truncation component and action * docs(radio-tile): fix light variant example * fix(side-effects): add pre-compiled CSS to library side effects * refactor(css): use shorthand scss imports, add comments * refactor(truncate): rename "direction" prop to "clamp" * chore(deps-dev): bump carbon-components to v10.29.0 * feat(combo-box): add direction prop * feat(dropdown): add direction prop * feat(multi-select): add direction prop
This commit is contained in:
Eric Liu
GitHub
parent
827a9822e7
commit
14e714fa61
48 changed files with 729 additions and 277 deletions
|
|
@ -11,7 +11,7 @@
|
|||
"devDependencies": {
|
||||
"@sveltech/routify": "^1.9.9",
|
||||
"autoprefixer": "^10.2.3",
|
||||
"carbon-components": "10.28.0",
|
||||
"carbon-components": "10.29.0",
|
||||
"carbon-components-svelte": "../",
|
||||
"clipboard-copy": "^3.1.0",
|
||||
"mdsvex": "^0.8.8",
|
||||
|
|
|
|||
|
|
@ -6,7 +6,11 @@
|
|||
<Router routes="{routes}" />
|
||||
|
||||
<style lang="scss" global>
|
||||
// This is a recipe for dynamic, client-side theming
|
||||
// All Carbon themes are included (White, Gray 10, Gray 90, Gray 100)
|
||||
|
||||
$feature-flags: (
|
||||
// Custom CSS properties must be enabled to dynamically switch themes
|
||||
enable-css-custom-properties: true,
|
||||
ui-shell: true,
|
||||
grid-columns-16: true
|
||||
|
|
@ -23,23 +27,38 @@
|
|||
// Use all Carbon themes
|
||||
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
||||
|
||||
// The default theme is "white" (White)
|
||||
:root {
|
||||
@include carbon--theme($carbon--theme--white, true);
|
||||
}
|
||||
|
||||
// Set the <html> theme attribute to "g10" to use the Gray 10 theme
|
||||
// <html theme="g10">
|
||||
:root[theme="g10"] {
|
||||
@include carbon--theme($carbon--theme--g10, true);
|
||||
}
|
||||
|
||||
// Set the <html> theme attribute to "g90" to use the Gray 90 theme
|
||||
// <html theme="g90">
|
||||
:root[theme="g90"] {
|
||||
@include carbon--theme($carbon--theme--g90, true);
|
||||
}
|
||||
|
||||
// Set the <html> theme attribute to "g100" to use the Gray 100 theme
|
||||
// <html theme="g100">
|
||||
:root[theme="g100"] {
|
||||
@include carbon--theme($carbon--theme--g100, true);
|
||||
}
|
||||
|
||||
@import "carbon-components/scss/globals/scss/_css--reset.scss";
|
||||
@import "carbon-components/scss/globals/scss/_css--font-face.scss";
|
||||
@import "carbon-components/scss/globals/scss/_css--helpers.scss";
|
||||
@import "carbon-components/scss/globals/scss/_css--body.scss";
|
||||
@import "carbon-components/scss/globals/grid/_grid.scss";
|
||||
@import "carbon-components/scss/globals/scss/styles.scss";
|
||||
// Programmatically update the theme in JavaScript:
|
||||
// document.documentElement.setAttribute("theme", "g90");
|
||||
|
||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||
@import "carbon-components/scss/globals/scss/_css--helpers";
|
||||
@import "carbon-components/scss/globals/scss/_css--body";
|
||||
@import "carbon-components/scss/globals/grid/grid";
|
||||
|
||||
// Import all component styles
|
||||
@import "carbon-components/scss/globals/scss/styles";
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"total": 156,
|
||||
"total": 158,
|
||||
"components": [
|
||||
{
|
||||
"moduleName": "Accordion",
|
||||
|
|
@ -1189,6 +1189,16 @@
|
|||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "direction",
|
||||
"kind": "let",
|
||||
"description": "Specify the direction of the combobox dropdown menu",
|
||||
"type": "\"bottom\" | \"top\"",
|
||||
"value": "\"bottom\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"kind": "let",
|
||||
|
|
@ -1258,6 +1268,26 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "warn",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to indicate an warning state",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "warnText",
|
||||
"kind": "let",
|
||||
"description": "Specify the warning state text",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "light",
|
||||
"kind": "let",
|
||||
|
|
@ -2290,6 +2320,16 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "direction",
|
||||
"kind": "let",
|
||||
"description": "Specify the direction of the dropdown menu",
|
||||
"type": "\"bottom\" | \"top\"",
|
||||
"value": "\"bottom\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"kind": "let",
|
||||
|
|
@ -5142,6 +5182,16 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "direction",
|
||||
"kind": "let",
|
||||
"description": "Specify the direction of the multiselect dropdown menu",
|
||||
"type": "\"bottom\" | \"top\"",
|
||||
"value": "\"bottom\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "selectionFeedback",
|
||||
"kind": "let",
|
||||
|
|
@ -7733,6 +7783,15 @@
|
|||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "nav" }
|
||||
},
|
||||
{
|
||||
"moduleName": "SideNavDivider",
|
||||
"filePath": "src/UIShell/SideNavDivider.svelte",
|
||||
"props": [],
|
||||
"slots": [],
|
||||
"events": [],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "li" }
|
||||
},
|
||||
{
|
||||
"moduleName": "SideNavItems",
|
||||
"filePath": "src/UIShell/SideNav/SideNavItems.svelte",
|
||||
|
|
@ -10635,6 +10694,25 @@
|
|||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "button" }
|
||||
},
|
||||
{
|
||||
"moduleName": "Truncate",
|
||||
"filePath": "src/Truncate/Truncate.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "clamp",
|
||||
"kind": "let",
|
||||
"type": "\"end\" | \"front\"",
|
||||
"value": "\"end\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "p" }
|
||||
},
|
||||
{
|
||||
"moduleName": "UnorderedList",
|
||||
"filePath": "src/UnorderedList/UnorderedList.svelte",
|
||||
|
|
|
|||
|
|
@ -30,6 +30,17 @@ items={[
|
|||
|
||||
<FileSource src="/framed/ComboBox/FilterableComboBox" />
|
||||
|
||||
### Top direction
|
||||
|
||||
Set `direction` to `"top"` for the combobox dropdown menu to appear above the input.
|
||||
|
||||
<ComboBox direction="top" titleText="Contact" placeholder="Select contact method"
|
||||
items={[
|
||||
{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}
|
||||
]} />
|
||||
|
||||
### Light variant
|
||||
|
||||
<ComboBox light titleText="Contact" placeholder="Select contact method"
|
||||
|
|
@ -59,6 +70,24 @@ items={[
|
|||
{id: "2", text: "Fax"}
|
||||
]} />
|
||||
|
||||
### Invalid state
|
||||
|
||||
<ComboBox invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" placeholder="Select contact method"
|
||||
items={[
|
||||
{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}
|
||||
]} />
|
||||
|
||||
### Warning state
|
||||
|
||||
<ComboBox warn warnText="This contact method is not associated with your account" titleText="Contact" placeholder="Select contact method"
|
||||
items={[
|
||||
{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}
|
||||
]} />
|
||||
|
||||
### Disabled
|
||||
|
||||
<ComboBox disabled titleText="Contact" placeholder="Select contact method"
|
||||
|
|
|
|||
|
|
@ -33,6 +33,14 @@ Use the `itemToString` prop to format the display of individual items.
|
|||
|
||||
<FileSource src="/framed/Dropdown/MultipleDropdown" />
|
||||
|
||||
### Top direction
|
||||
|
||||
Set `direction` to `"top"` for the dropdown menu to appear above the input.
|
||||
|
||||
<Dropdown direction="top" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}" />
|
||||
|
||||
### Light variant
|
||||
|
||||
<Dropdown light titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
|
||||
|
|
|
|||
|
|
@ -51,6 +51,16 @@ Use the `itemToString` prop to format the display of individual items.
|
|||
sortItem="{() => {}}"
|
||||
/>
|
||||
|
||||
### Top direction
|
||||
|
||||
Set `direction` to `"top"` for the dropdown menu to appear above the input.
|
||||
|
||||
<MultiSelect direction="top" titleText="Contact" label="Select contact methods..."
|
||||
items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}"
|
||||
/>
|
||||
|
||||
### Light variant
|
||||
|
||||
<MultiSelect light titleText="Contact" label="Select contact methods..."
|
||||
|
|
|
|||
|
|
@ -59,6 +59,40 @@ When programmatically updating the `currentIndex`, keep in mind that only comple
|
|||
|
||||
<FileSource src="/framed/ProgressIndicator/ProgrammaticProgressIndicator" />
|
||||
|
||||
### Invalid step
|
||||
|
||||
<ProgressIndicator>
|
||||
<ProgressStep complete
|
||||
label="Step 1"
|
||||
description="The progress indicator will listen for clicks on the steps"
|
||||
/>
|
||||
<ProgressStep invalid
|
||||
label="Step 2"
|
||||
description="The progress indicator will listen for clicks on the steps"
|
||||
/>
|
||||
<ProgressStep
|
||||
label="Step 3"
|
||||
description="The progress indicator will listen for clicks on the steps"
|
||||
/>
|
||||
</ProgressIndicator>
|
||||
|
||||
### Disabled steps
|
||||
|
||||
<ProgressIndicator>
|
||||
<ProgressStep complete
|
||||
label="Step 1"
|
||||
description="The progress indicator will listen for clicks on the steps"
|
||||
/>
|
||||
<ProgressStep disabled
|
||||
label="Step 2"
|
||||
description="The progress indicator will listen for clicks on the steps"
|
||||
/>
|
||||
<ProgressStep disabled
|
||||
label="Step 3"
|
||||
description="The progress indicator will listen for clicks on the steps"
|
||||
/>
|
||||
</ProgressIndicator>
|
||||
|
||||
### Spaced-equally
|
||||
|
||||
<ProgressIndicator spaceEqually>
|
||||
|
|
|
|||
|
|
@ -24,13 +24,13 @@ components: ["TileGroup", "RadioTile"]
|
|||
### Light variant
|
||||
|
||||
<TileGroup legend="Service pricing tiers">
|
||||
<RadioTile value="0" checked>
|
||||
<RadioTile light value="0" checked>
|
||||
Lite plan
|
||||
</RadioTile>
|
||||
<RadioTile value="1">
|
||||
<RadioTile light value="1">
|
||||
Standard plan
|
||||
</RadioTile>
|
||||
<RadioTile value="2">
|
||||
<RadioTile light value="2">
|
||||
Plus plan
|
||||
</RadioTile>
|
||||
</TileGroup>
|
||||
|
|
@ -29,7 +29,11 @@
|
|||
|
||||
### Filterable
|
||||
|
||||
<Tag filter on:close>Filterable</Tag>
|
||||
<Tag filter on:close>carbon-components</Tag>
|
||||
|
||||
### Filterable (small)
|
||||
|
||||
<Tag size="sm" filter on:close>carbon-components</Tag>
|
||||
|
||||
### Custom icon
|
||||
|
||||
|
|
|
|||
37
docs/src/pages/components/Truncate.svx
Normal file
37
docs/src/pages/components/Truncate.svx
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
|
||||
<script>
|
||||
import { Truncate } from "carbon-components-svelte";
|
||||
import { truncate } from "carbon-components-svelte/actions";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
This utility component wraps the `.bx--text-truncate--*` CSS selectors from [carbon-components](https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/scss/_helper-classes.scss#L11) for single-line text truncation.
|
||||
|
||||
### Default
|
||||
|
||||
By default, text will be clamped at the end of the line. Text is wrapped with a paragraph (`p`) element. Use the [truncate action](#usetruncate) to truncate text in other elements.
|
||||
|
||||
<Truncate>
|
||||
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
|
||||
</Truncate>
|
||||
|
||||
### Clamp front
|
||||
|
||||
Set `clamp` to `"front"` to clamp the text from the front.
|
||||
|
||||
<Truncate clamp="front">
|
||||
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
|
||||
</Truncate>
|
||||
|
||||
### use:truncate
|
||||
|
||||
The `truncate` action can be used on other HTML elements.
|
||||
|
||||
Import path: `import { truncate } from "carbon-components-svelte/actions";`
|
||||
|
||||
<h4 use:truncate>
|
||||
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
|
||||
</h4>
|
||||
<h4 use:truncate={{ clamp: "front" }}>
|
||||
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
|
||||
</h4>
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
SideNavMenu,
|
||||
SideNavMenuItem,
|
||||
SideNavLink,
|
||||
SideNavDivider,
|
||||
SkipToContent,
|
||||
Content,
|
||||
Grid,
|
||||
|
|
@ -33,6 +34,7 @@
|
|||
<HeaderNavItem href="/" text="Link 2" />
|
||||
<HeaderNavItem href="/" text="Link 3" />
|
||||
</HeaderNavMenu>
|
||||
<HeaderNavItem href="/" text="Link 4" />
|
||||
</HeaderNav>
|
||||
</Header>
|
||||
|
||||
|
|
@ -46,6 +48,8 @@
|
|||
<SideNavMenuItem href="/" text="Link 2" />
|
||||
<SideNavMenuItem href="/" text="Link 3" />
|
||||
</SideNavMenu>
|
||||
<SideNavDivider />
|
||||
<SideNavLink text="Link 4" />
|
||||
</SideNavItems>
|
||||
</SideNav>
|
||||
|
||||
|
|
|
|||
|
|
@ -38,6 +38,9 @@ function createImports(source) {
|
|||
const ccs_imports = Array.from(inlineComponents.keys());
|
||||
const icon_imports = Array.from(icons.keys());
|
||||
|
||||
if (ccs_imports.length === 0) return "";
|
||||
// TODO: determine if action is used, and generate import accordingly
|
||||
|
||||
return `
|
||||
<script>
|
||||
import {${ccs_imports.join(",")}} from "carbon-components-svelte";
|
||||
|
|
|
|||
|
|
@ -837,15 +837,15 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
|
|||
integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
|
||||
|
||||
carbon-components-svelte@../:
|
||||
version "0.27.0"
|
||||
version "0.28.0"
|
||||
dependencies:
|
||||
carbon-icons-svelte "^10.21.0"
|
||||
flatpickr "4.6.9"
|
||||
|
||||
carbon-components@10.28.0:
|
||||
version "10.28.0"
|
||||
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.28.0.tgz#c4d2b23df2559cf3b0226867c45e2e84e0af7c4e"
|
||||
integrity sha512-bFsyngr625zc/t2gl4BPFYl0/ed4q38rrPihQxBXHhLAdeZNyy8xyOQlbh1PEQbTu47H/s/bxVo6QiFm/VmLZA==
|
||||
carbon-components@10.29.0:
|
||||
version "10.29.0"
|
||||
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.29.0.tgz#9fd31f1a5cce4cb59a7196222e524d8442fd9026"
|
||||
integrity sha512-y7BPEfwWxE1URTjrtHz4+rYQwB0u/e7WptlbTH2Lb/iqRYCe6T94u9EVZuq0ZZTpRUNRckbI1irt0AV3J/qlcA==
|
||||
dependencies:
|
||||
"@carbon/telemetry" "0.0.0-alpha.6"
|
||||
flatpickr "4.6.1"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue