Merge branch 'master' into header-action-prevent-close-click-outside

This commit is contained in:
Eric Liu 2023-07-13 07:35:00 -07:00 committed by GitHub
commit 7c6b5619a4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
226 changed files with 2124 additions and 747 deletions

View file

@ -22,7 +22,7 @@
"prism-svelte": "^0.4.7",
"prismjs": "^1.28.0",
"remark-slug": "^6.0.0",
"svelte": "^3.49.0",
"svelte": "^3.58.0",
"vite": "^3.0.9"
},
"routify": {

View file

@ -924,7 +924,7 @@
{ "type": "forwarded", "name": "blur", "element": "input" }
],
"typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "CheckboxSkeleton" }
"rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "CheckboxSkeleton",
@ -1743,6 +1743,12 @@
"default": true,
"fallback": "{itemToString(item)}",
"slot_props": "{ item: ComboBoxItem; index: number }"
},
{
"name": "titleText",
"default": false,
"fallback": "{titleText}",
"slot_props": "{}"
}
],
"events": [
@ -4399,7 +4405,7 @@
{ "type": "forwarded", "name": "keydown", "element": "button" }
],
"typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "Loading" }
"rest_props": { "type": "Element", "name": "div | button | svg" }
},
{
"moduleName": "FluidForm",
@ -4416,7 +4422,7 @@
{ "type": "forwarded", "name": "submit", "element": "Form" }
],
"typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "Form" }
"rest_props": { "type": "Element", "name": "form" }
},
{
"moduleName": "Form",
@ -4827,6 +4833,12 @@
"moduleExports": [],
"slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" },
{
"name": "company",
"default": false,
"fallback": "{company} ",
"slot_props": "{}"
},
{
"name": "platform",
"default": false,
@ -5134,7 +5146,14 @@
}
],
"moduleExports": [],
"slots": [],
"slots": [
{
"name": "__default__",
"default": true,
"fallback": "{text}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "a" },
{ "type": "forwarded", "name": "mouseover", "element": "a" },
@ -7359,6 +7378,12 @@
"default": true,
"fallback": "{itemToString(item)}",
"slot_props": "{ item: MultiSelectItem; index: number }"
},
{
"name": "titleText",
"default": false,
"fallback": "{titleText}",
"slot_props": "{}"
}
],
"events": [
@ -8525,6 +8550,18 @@
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "tooltipPosition",
"kind": "let",
"description": "Set the position of the tooltip relative to the pagination buttons.",
"type": "\"top\" | \"right\" | \"bottom\" | \"left\" | \"outside\" | \"inside\"",
"value": "\"bottom\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
@ -8985,6 +9022,18 @@
"constant": false,
"reactive": false
},
{
"name": "status",
"kind": "let",
"description": "Specify the status",
"type": "\"active\" | \"finished\" | \"error\"",
"value": "\"active\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "size",
"kind": "let",
@ -10544,6 +10593,8 @@
"moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [
{ "type": "dispatched", "name": "select", "detail": "string" },
{ "type": "dispatched", "name": "deselect", "detail": "string" },
{ "type": "forwarded", "name": "click", "element": "label" },
{ "type": "forwarded", "name": "mouseover", "element": "label" },
{ "type": "forwarded", "name": "mouseenter", "element": "label" },
@ -14534,9 +14585,9 @@
"ts": "type TreeNodeId = string | number"
},
{
"type": "{ id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; expanded?: boolean; children?: TreeNode[]; }",
"type": "{ id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }",
"name": "TreeNode",
"ts": "interface TreeNode { id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; expanded?: boolean; children?: TreeNode[]; }"
"ts": "interface TreeNode { id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }"
}
],
"rest_props": { "type": "Element", "name": "ul" }

View file

@ -1,30 +0,0 @@
<script>
export let persist = false;
export let persistKey = "carbon-theme";
export const themes = ["white", "g10", "g80", "g90", "g100"];
import { onMount, afterUpdate } from "svelte";
import { theme } from "../store";
const isValidTheme = (value) => themes.includes(value);
onMount(() => {
try {
const persisted_theme = localStorage.getItem(persistKey);
if (isValidTheme(persisted_theme)) theme.set(persisted_theme);
} catch (e) {}
});
afterUpdate(() => {
if (isValidTheme($theme)) {
document.documentElement.setAttribute("theme", $theme);
if (persist) {
try {
localStorage.setItem(persistKey, $theme);
} catch (e) {}
}
}
});
</script>
<slot />

View file

@ -33,6 +33,11 @@ html[theme="g90"] .code-override {
overflow-x: auto;
}
/* Addig this to the layout grid fixes overstretching. */
.fix-overflow {
min-width: 0;
}
.token.tag,
.token.operator {
color: #6ea6ff;
@ -167,16 +172,6 @@ html[theme="g90"] .code-override {
margin-bottom: var(--cds-layout-01);
}
.table {
position: sticky;
max-height: calc(100vh - 3rem);
top: 3rem;
padding-top: var(--cds-spacing-05);
padding-bottom: var(--cds-spacing-05);
padding-left: var(--cds-spacing-08);
overflow-y: auto;
}
.code-01 {
font-size: var(--cds-code-01-font-size);
font-weight: var(--cds-code-01-font-weight);

View file

@ -66,7 +66,7 @@
</script>
<Content data-components>
<Grid>
<Grid class="fix-overflow">
<Row>
<Column>
<h1>{component}</h1>

View file

@ -12,10 +12,11 @@
SideNav,
SideNavItems,
SideNavMenuItem,
Theme,
Tag,
} from "carbon-components-svelte";
import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
import Theme from "../components/Theme.svelte";
import { theme } from "../store";
const deprecated = [];
const new_components = [];
@ -38,7 +39,7 @@
<!-- routify:options bundle=true -->
<svelte:window bind:innerWidth />
<Theme persist>
<Theme persist bind:theme="{$theme}">
<Header
aria-label="Navigation"
href="{$url('/')}"

View file

@ -120,9 +120,10 @@ If an `href` value is specified, the component will render an [anchor element](h
<Button size="xl" kind="ghost">Ghost</Button>
<Button size="xl" kind="danger">Danger</Button>
## Disabled button
## Disabled state
<Button disabled>Disabled button</Button>
<Button disabled iconDescription="Tooltip text" icon={Add} />
## Expressive styles

View file

@ -3,7 +3,29 @@
import Preview from "../../components/Preview.svelte";
</script>
## Default (unexpanded)
## Default
This component uses a [resize observer](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to determine the height of the above-the-fold content.
It's unexpanded by default.
<ExpandableTile>
<div slot="above">
<div>
Above the fold content here
</div>
<br />
<br />
<div>
More above the fold content
</div>
</div>
<div slot="below">Below the fold content here</div>
</ExpandableTile>
## Custom tile heights
Set a custom height for the tiles on the "above" and "below" slots.
<ExpandableTile>
<div slot="above" style="height: 10rem">Above the fold content here</div>
@ -13,22 +35,22 @@
## Expanded
<ExpandableTile expanded>
<div slot="above" style="height: 10rem">Above the fold content here</div>
<div slot="below" style="height: 10rem">Below the fold content here</div>
<div slot="above">Above the fold content here</div>
<div slot="below">Below the fold content here</div>
</ExpandableTile>
## Light variant
<ExpandableTile light>
<div slot="above" style="height: 10rem">Above the fold content here</div>
<div slot="below" style="height: 10rem">Below the fold content here</div>
<div slot="above">Above the fold content here</div>
<div slot="below">Below the fold content here</div>
</ExpandableTile>
## With icon labels
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
<div slot="above" style="height: 10rem">Above the fold content here</div>
<div slot="below" style="height: 10rem">Below the fold content here</div>
<div slot="above">Above the fold content here</div>
<div slot="below">Below the fold content here</div>
</ExpandableTile>
## With interactive content
@ -36,7 +58,7 @@
For tiles containing interactive content, use `stopPropagation` to prevent the tile from toggling.
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
<div slot="above" style="height: 10rem">
<div slot="above">
<a href="/" on:click|preventDefault|stopPropagation={() => console.log("Hello world")}>
Native element
</a>
@ -48,5 +70,5 @@ For tiles containing interactive content, use `stopPropagation` to prevent the t
Svelte component
</Button>
</div>
<div slot="below" style="height: 10rem">Below the fold content here</div>
<div slot="below">Below the fold content here</div>
</ExpandableTile>

View file

@ -42,4 +42,10 @@ Use the `forwardText` and `backwardText` props to customize the button text.
<PaginationNav
forwardText="Next"
backwardText="Previous"
/>
/>
## Tooltip Position
Use the `tooltipPosition` prop to change the alignment of the tooltip.
<PaginationNav tooltipPosition="outside" total={3} loop />

View file

@ -50,3 +50,7 @@ Set prop `type` to `"text"` to toggle password visibility.
## Disabled state
<PasswordInput disabled labelText="Password" placeholder="Enter password..." />
## With helper text
<PasswordInput helperText="Your password should be hard to guess" labelText="Password" placeholder="Enter password..." />

View file

@ -21,6 +21,18 @@ Specify a `value` for the progress bar to be determinate.
<ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
## Finished status
Specify `status="finished"` for the progress bar.
<ProgressBar value={100} status="finished" labelText="Upload file" helperText="Upload complete" />
## Error status
Specify `status="error"` for the progress bar.
<ProgressBar value={0} status="error" labelText="Upload file" helperText="Invalid file format" />
## Custom max value
The default `max` value is `100`.
@ -45,6 +57,10 @@ The inline variant visually hides the `helperText`.
<ProgressBar kind="indented" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
## Indented status variant
<ProgressBar kind="indented" status="finished" value={40} labelText="Upload file" helperText="Upload complete" />
## UX example
This example shows how to animate the progress bar from 0 to 100% with start and end states.

View file

@ -9,17 +9,17 @@ components: ["Slider", "SliderSkeleton"]
## Default
<Slider />
<Slider labelText="Instances" value={0} />
## Full width
Set `fullWidth` to `true` for the slider to span the full width of its containing element.
<Slider fullWidth />
<Slider labelText="Instances" fullWidth value={0} />
## Hidden text input
<Slider hideTextInput />
<Slider labelText="Instances" hideTextInput value={0} />
## Custom minimum, maximum values

View file

@ -41,7 +41,7 @@
## Custom icon
Note: rendering a custom icon cannnot be used with the filterable variant.
Note: rendering a custom icon cannot be used with the filterable variant.
<Tag icon={IbmCloud}>IBM Cloud</Tag>

View file

@ -12,7 +12,7 @@ The `Theme` component can dyanmically update the Carbon theme on the client-side
</InlineNotification>
The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for dynamic theming.
<CodeSnippet svx-ignore {code} />
## Default

View file

@ -7,7 +7,7 @@
The `children` prop accepts an array of child nodes. Each node should contain `id` and `text` properties.
Optional properties include `disabled`, `expanded`, `icon`, and `children`.
Optional properties include `disabled`, `icon`, and `children`.
A parent node contains `children` while a leaf node does not.

View file

@ -3,10 +3,14 @@
let max = 328;
let value = 0;
let status = "active";
$: helperText =
value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
$: if (value === max) helperText = "Done";
$: if (value === max) {
helperText = "Done";
status = "finished";
}
</script>
<ProgressBar
@ -14,6 +18,7 @@
value="{value}"
max="{max}"
helperText="{helperText}"
status="{status}"
/>
<ButtonSet style="margin-top: var(--cds-spacing-08)">
@ -37,7 +42,10 @@
<Button
kind="tertiary"
disabled="{value !== max}"
on:click="{() => (value = 0)}"
on:click="{() => {
value = 0;
status = 'active';
}}"
>
Reset
</Button>

View file

@ -14,13 +14,11 @@
id: 1,
text: "Analytics",
icon: Analytics,
expanded: true,
children: [
{
id: 2,
text: "IBM Analytics Engine",
icon: Analytics,
expanded: true,
children: [
{ id: 3, text: "Apache Spark", icon: Analytics },
{ id: 4, text: "Hadoop", icon: Analytics },

View file

@ -165,7 +165,7 @@ bufferutil@^4.0.1:
node-gyp-build "~3.7.0"
carbon-components-svelte@../:
version "0.70.1"
version "0.76.1"
dependencies:
flatpickr "4.6.9"
@ -1080,6 +1080,11 @@ punycode@^2.1.1:
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
querystringify@^2.1.1:
version "2.2.0"
resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
read-pkg@^3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
@ -1105,6 +1110,11 @@ remark-slug@^6.0.0:
mdast-util-to-string "^1.0.0"
unist-util-visit "^2.0.0"
requires-port@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
resolve@^1.10.0:
version "1.17.0"
resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
@ -1148,9 +1158,9 @@ saxes@^5.0.1:
xmlchars "^2.2.0"
"semver@2 || 3 || 4 || 5", semver@^5.5.0:
version "5.7.1"
resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
version "5.7.2"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
shebang-command@^1.2.0:
version "1.2.0"
@ -1280,10 +1290,10 @@ svelte-hmr@^0.14.12:
resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.12.tgz#a127aec02f1896500b10148b2d4d21ddde39973f"
integrity sha512-4QSW/VvXuqVcFZ+RhxiR8/newmwOCTlbYIezvkeN6302YFRE8cXy0naamHcjz8Y9Ce3ITTZtrHrIL0AGfyo61w==
svelte@^3.49.0:
version "3.49.0"
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.49.0.tgz#5baee3c672306de1070c3b7888fc2204e36a4029"
integrity sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==
svelte@^3.58.0:
version "3.58.0"
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.58.0.tgz#d3e6f103efd6129e51c7d709225ad3b4c052b64e"
integrity sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==
symbol-tree@^3.2.4:
version "3.2.4"
@ -1291,13 +1301,14 @@ symbol-tree@^3.2.4:
integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
tough-cookie@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"
integrity sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==
version "4.1.3"
resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
integrity sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==
dependencies:
psl "^1.1.33"
punycode "^2.1.1"
universalify "^0.1.2"
universalify "^0.2.0"
url-parse "^1.5.3"
tr46@^2.1.0:
version "2.1.0"
@ -1342,16 +1353,24 @@ unist-util-visit@^2.0.0:
unist-util-is "^4.0.0"
unist-util-visit-parents "^3.0.0"
universalify@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
universalify@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
universalify@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
integrity sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==
url-parse@^1.5.3:
version "1.5.10"
resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
dependencies:
querystringify "^2.1.1"
requires-port "^1.0.0"
utf-8-validate@^5.0.2:
version "5.0.2"
resolved "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.2.tgz#63cfbccd85dc1f2b66cf7a1d0eebc08ed056bfb3"