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

Align 10.40 (#763)

Browse source 
* docs: fix typo [ci skip]

* docs(tree-view): update expanded nodes guidance

* chore(deps-dev): upgrade carbon-components to v10.40.0

* build(css): omit treeview SCSS import

treeview.scss is included in global styles.css by default in v10.40.0

* feat(date-picker): add helperText prop

Ref: 4b5b5fdf8
This commit is contained in:
Eric Liu 2021-07-22 16:56:51 -07:00 • committed by GitHub
commit 9114298f76
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 65 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -1090,6 +1090,7 @@ None.
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the input placeholder text |
| pattern | <code>let</code> | No | <code>string</code> | <code>"\\d{1,2}\\/\\d{1,2}\\/\\d{4}"</code> | Specify the Regular Expression for the input value |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the calendar icon |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |

3
css/all.scss
View file

@ -76,8 +76,5 @@ $css--plex: true;
@import "carbon-components/scss/globals/scss/_css--body";
@import "carbon-components/scss/globals/grid/grid";
// Import experimental TreeView styles not included in global styles
@import "carbon-components/src/components/treeview/treeview";
// Import all component styles
@import "carbon-components/scss/globals/scss/styles";

3
css/g10.scss
View file

@ -27,9 +27,6 @@ $carbon--theme: $carbon--theme--g10;
@import "carbon-components/scss/globals/scss/_css--body";
@import "carbon-components/scss/globals/grid/grid";
// Import experimental TreeView styles not included in global styles
@import "carbon-components/src/components/treeview/treeview";
// Import all component styles
@import "carbon-components/scss/globals/scss/styles";

3
css/g100.scss
View file

@ -27,8 +27,5 @@ $carbon--theme: $carbon--theme--g100;
@import "carbon-components/scss/globals/scss/_css--body";
@import "carbon-components/scss/globals/grid/grid";
// Import experimental TreeView styles not included in global styles
@import "carbon-components/src/components/treeview/treeview";
// Import all component styles
@import "carbon-components/scss/globals/scss/styles";

3
css/g80.scss
View file

@ -27,9 +27,6 @@ $carbon--theme: $carbon--theme--g80;
@import "carbon-components/scss/globals/scss/_css--body";
@import "carbon-components/scss/globals/grid/grid";
// Import experimental TreeView styles not included in global styles
@import "carbon-components/src/components/treeview/treeview";
// Import all component styles
@import "carbon-components/scss/globals/scss/styles";

3
css/g90.scss
View file

@ -27,8 +27,5 @@ $carbon--theme: $carbon--theme--g90;
@import "carbon-components/scss/globals/scss/_css--body";
@import "carbon-components/scss/globals/grid/grid";
// Import experimental TreeView styles not included in global styles
@import "carbon-components/src/components/treeview/treeview";
// Import all component styles
@import "carbon-components/scss/globals/scss/styles";

3
css/white.scss
View file

@ -27,8 +27,5 @@ $carbon--theme: $carbon--theme--white;
@import "carbon-components/scss/globals/scss/_css--body";
@import "carbon-components/scss/globals/grid/grid";
// Import experimental TreeView styles not included in global styles
@import "carbon-components/src/components/treeview/treeview";
// Import all component styles
@import "carbon-components/scss/globals/scss/styles";

2
docs/package.json
View file

@ -11,7 +11,7 @@
"devDependencies": {
"@sveltech/routify": "^1.9.9",
"autoprefixer": "^10.2.3",
"carbon-components": "10.39.0",
"carbon-components": "10.40.0",
"carbon-components-svelte": "../",
"clipboard-copy": "^4.0.1",
"mdsvex": "^0.8.8",

11
docs/src/COMPONENT_API.json
View file

@ -2734,6 +2734,17 @@
"constant": false,
"reactive": false
},
{
"name": "helperText",
"kind": "let",
"description": "Specify the helper text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "iconDescription",
"kind": "let",

6
docs/src/pages/components/DatePicker.svx
View file

@ -13,6 +13,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
### With helper text
<DatePicker>
<DatePickerInput labelText="Date of birth" helperText="Example: 01/12/1990" placeholder="mm/dd/yyyy" />
</DatePicker>
### Hidden label
<DatePicker>

2
docs/src/pages/components/TreeView.svx
View file

@ -37,7 +37,7 @@ To render a node with an icon, define an `icon` property with a Carbon Svelte ic
### Initial expanded nodes
Set `expanded` to `true` on nodes that should be expanded by default.
Expanded nodes can be set using `expandedIds`.
<FileSource src="/framed/TreeView/TreeViewExpanded" />

20
docs/src/pages/index.svelte
View file

@ -139,7 +139,7 @@
<TabContent>
<p>
An alternative to loading styles is to link an external
StyleSheet from a Content Delivery Networks (CDN) like
StyleSheet from a Content Delivery Network (CDN) like
<OutboundLink inline size="lg" href="https://unpkg.com/">
unpkg.com
</OutboundLink>.
@ -159,18 +159,22 @@
<TabContent>
<p>
The most performant method to load styles is to import SCSS
directly from <code>carbon-components</code>. Although it
requires more set up, you can reduce the size of the bundle CSS
by importing individual component styles instead of a
pre-compiled CSS StyleSheet.
directly from
<code>carbon-components</code>. Although it requires more set
up, you can reduce the size of the bundle CSS by importing
individual component styles instead of a pre-compiled CSS
StyleSheet.
</p>
<p>
Refer to the <OutboundLink
Refer to the
<OutboundLink
inline
size="lg"
href="https://github.com/carbon-design-system/carbon/blob/main/docs/guides/sass.md"
>official Carbon guide on SASS</OutboundLink
> for documentation.
>
official Carbon guide on SASS
</OutboundLink>
for documentation.
</p>
</TabContent>
</div>

10
docs/yarn.lock
View file

@ -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.39.0"
version "0.41.0"
dependencies:
carbon-icons-svelte "^10.27.0"
flatpickr "4.6.9"
carbon-components@10.39.0:
version "10.39.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.39.0.tgz#384cf2467d3f213af16865c80703da9b96329573"
integrity sha512-UrDWQ1RlUr7Nn0b9Vs9E3p14V3o5U+3TS700hbHyAxYYq9CoI8WKQhx16x5Leot6dD8HVVTxkb3ahgv6iJG9Rg==
carbon-components@10.40.0:
version "10.40.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.40.0.tgz#59c339dd964624cd07802dc695ceed6f32a07ef7"
integrity sha512-tIc0qHVLilWCelkH56al4ILwZRA4AbbwJEFt0mnGtefmgQ3O1UJLm5/ybp7VnWeHwUnip7PljHSDwHUzQcj5zg==
dependencies:
"@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1"

2
package.json
View file

@ -31,7 +31,7 @@
"@rollup/plugin-node-resolve": "^11.1.1",
"@tsconfig/svelte": "^1.0.10",
"autoprefixer": "^10.2.4",
"carbon-components": "10.39.0",
"carbon-components": "10.40.0",
"gh-pages": "^3.1.0",
"husky": "^4.3.8",
"lint-staged": "^10.5.3",

13
src/DatePicker/DatePickerInput.svelte
View file

@ -17,6 +17,9 @@
/** Set to `true` to disable the input */
export let disabled = false;
/** Specify the helper text */
export let helperText = "";
/** Specify the ARIA label for the calendar icon */
export let iconDescription = "";
@ -50,7 +53,7 @@
/** Obtain a reference to the input HTML element */
export let ref = null;
import { getContext, onMount } from "svelte";
import { getContext } from "svelte";
import Calendar16 from "carbon-icons-svelte/lib/Calendar16/Calendar16.svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
@ -161,4 +164,12 @@
{#if !invalid && warn}
<div class:bx--form-requirement="{true}">{warnText}</div>
{/if}
{#if helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
>
{helperText}
</div>
{/if}
</div>

6
tests/DatePicker.test.svelte
View file

@ -7,7 +7,11 @@
console.log(e.detail);
}}"
>
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
<DatePickerInput
labelText="Date of birth"
helperText="Example: 01/12/1990"
placeholder="mm/dd/yyyy"
/>
</DatePicker>
<DatePicker>

6
types/DatePicker/DatePickerInput.d.ts vendored
View file

@ -32,6 +32,12 @@ export interface DatePickerInputProps
*/
disabled?: boolean;
/**
* Specify the helper text
* @default ""
*/
helperText?: string;
/**
* Specify the ARIA label for the calendar icon
* @default ""

8
yarn.lock
View file

@ -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.39.0:
version "10.39.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.39.0.tgz#384cf2467d3f213af16865c80703da9b96329573"
integrity sha512-UrDWQ1RlUr7Nn0b9Vs9E3p14V3o5U+3TS700hbHyAxYYq9CoI8WKQhx16x5Leot6dD8HVVTxkb3ahgv6iJG9Rg==
carbon-components@10.40.0:
version "10.40.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.40.0.tgz#59c339dd964624cd07802dc695ceed6f32a07ef7"
integrity sha512-tIc0qHVLilWCelkH56al4ILwZRA4AbbwJEFt0mnGtefmgQ3O1UJLm5/ybp7VnWeHwUnip7PljHSDwHUzQcj5zg==
dependencies:
"@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1"