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

docs: use low contrast variant for inline notifications

Browse source
This commit is contained in:
metonym 2022-02-28 16:13:26 -08:00
commit a9ebb05280
12 changed files with 15 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -37,7 +37,7 @@
### Danger tertiary, icon-only button ### Danger tertiary, icon-only button
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton> <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01"> <div class="body-short-01">
You must provide an <strong>iconDescription</strong> for the button tooltip. You must provide an <strong>iconDescription</strong> for the button tooltip.
</div> </div>
@ -55,7 +55,7 @@
### Icon-only button ### Icon-only button
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton> <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01"> <div class="body-short-01">
You must provide an <strong>iconDescription</strong> for the button tooltip. You must provide an <strong>iconDescription</strong> for the button tooltip.
</div> </div>
@ -131,7 +131,7 @@ If an `href` value is specified, the component will render an [anchor element](h
Set `expressive` to `true` to use Carbon's expressive typesetting. Set `expressive` to `true` to use Carbon's expressive typesetting.
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton> <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01"> <div class="body-short-01">
Expressive styles only work with the default, "lg", and "xl" button sizes. Expressive styles only work with the default, "lg", and "xl" button sizes.
</div> </div>

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

@ -33,7 +33,7 @@ The `checked` prop supports two-way binding.
An alternative to `checked` is binding an array of values using `group`. This API in inspired by Svelte [group inputs]([group](https://svelte.dev/tutorial/group-inputs)). An alternative to `checked` is binding an array of values using `group`. This API in inspired by Svelte [group inputs]([group](https://svelte.dev/tutorial/group-inputs)).
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton> <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01"> <div class="body-short-01">
If using <strong>bind:group</strong>, <strong>bind:checked</strong> will only support one-way binding. If using <strong>bind:group</strong>, <strong>bind:checked</strong> will only support one-way binding.
</div> </div>

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

@ -3,7 +3,7 @@
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton> <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01"> <div class="body-short-01">
Since version 0.53, <strong>selectedIndex</strong> has been replaced with <strong>selectedId</strong>. Since version 0.53, <strong>selectedIndex</strong> has been replaced with <strong>selectedId</strong>.
</div> </div>

4
docs/src/pages/components/DataTable.svx
View file

@ -12,11 +12,11 @@ components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSear
`DataTable` is keyed for both rendering and sorting purposes. `DataTable` is keyed for both rendering and sorting purposes.
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton> <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">Every <code>headers</code> object must have a unique "key" property.</div> <div class="body-short-01">Every <code>headers</code> object must have a unique "key" property.</div>
</InlineNotification> </InlineNotification>
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton> <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">Every <code>rows</code> object must have a unique "id" property.</div> <div class="body-short-01">Every <code>rows</code> object must have a unique "id" property.</div>
</InlineNotification> </InlineNotification>

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

@ -63,7 +63,7 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
### Single ### Single
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton> <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01"> <div class="body-short-01">
If using Rollup, specify <strong>inlineDynamicImports: true</strong> in your <strong>rollup.config.js</strong>. If using Rollup, specify <strong>inlineDynamicImports: true</strong> in your <strong>rollup.config.js</strong>.
</div> </div>

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

@ -7,7 +7,7 @@ components: ["Dropdown", "DropdownSkeleton"]
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton> <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01"> <div class="body-short-01">
Since version 0.53, <strong>selectedIndex</strong> has been replaced with <strong>selectedId</strong>. Since version 0.53, <strong>selectedIndex</strong> has been replaced with <strong>selectedId</strong>.
</div> </div>

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

@ -7,7 +7,7 @@
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton> <InlineNotification svx-ignore lowContrast title="Deprecation warning" kind="warning" hideCloseButton>
<div> <div>
This component will be removed in the next major release. Use icons from <OutboundLink href="https://github.com/carbon-design-system/carbon-icons-svelte">carbon-icons-svelte</OutboundLink> instead. This component will be removed in the next major release. Use icons from <OutboundLink href="https://github.com/carbon-design-system/carbon-icons-svelte">carbon-icons-svelte</OutboundLink> instead.
</div> </div>

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

@ -7,7 +7,7 @@ components: ["OrderedList", "ListItem"]
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
<InlineNotification svx-ignore title="Tip:" kind="info" hideCloseButton> <InlineNotification svx-ignore lowContrast title="Tip:" kind="info" hideCloseButton>
<div class="body-short-01"> <div class="body-short-01">
Consider using the <Link href="/components/RecursiveList#ordered">RecursiveList</Link> component for rendering tree structured data. Consider using the <Link href="/components/RecursiveList#ordered">RecursiveList</Link> component for rendering tree structured data.
</div> </div>

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

@ -7,7 +7,7 @@ This component uses the [svelte:self API](https://svelte.dev/docs#svelte_self) t
A child node can render text, a link, HTML content, and other children. A child node can render text, a link, HTML content, and other children.
<InlineNotification svx-ignore title="Warning:" kind="warning" hideCloseButton> <InlineNotification svx-ignore lowContrast title="Warning:" kind="warning" hideCloseButton>
<div class="body-short-01"> <div class="body-short-01">
HTML content provided via the <code>html</code> prop is not sanitized. HTML content provided via the <code>html</code> prop is not sanitized.
</div> </div>

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

@ -7,7 +7,7 @@ components: ["ToggleSmall", "ToggleSmallSkeleton"]
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton> <InlineNotification svx-ignore lowContrast title="Deprecation warning" kind="warning" hideCloseButton>
<div> <div>
This component will be removed in the next major release. Use the <Link href="/components/Toggle#small-size">Toggle small variant</Link> instead. This component will be removed in the next major release. Use the <Link href="/components/Toggle#small-size">Toggle small variant</Link> instead.
</div> </div>

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

@ -11,7 +11,7 @@ Optional properties include `disabled`, `expanded`, `icon`, and `children`.
A parent node contains `children` while a leaf node does not. A parent node contains `children` while a leaf node does not.
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton> <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">Every node must have a unique id.</div> <div class="body-short-01">Every node must have a unique id.</div>
</InlineNotification> </InlineNotification>

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

@ -7,7 +7,7 @@ components: ["UnorderedList", "ListItem"]
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
<InlineNotification svx-ignore title="Tip:" kind="info" hideCloseButton> <InlineNotification svx-ignore lowContrast title="Tip:" kind="info" hideCloseButton>
<div class="body-short-01"> <div class="body-short-01">
Consider using the <Link href="/components/RecursiveList#unordered">RecursiveList</Link> component for rendering tree structured data. Consider using the <Link href="/components/RecursiveList#unordered">RecursiveList</Link> component for rendering tree structured data.
</div> </div>