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

docs: hide deprecated components, add "Disabled items" OverflowMenu example (#1167)

Browse source
This commit is contained in:
metonym 2022-03-13 06:14:30 -07:00 • committed by GitHub
commit 5bf16e42f7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 54 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

11
docs/src/components/Footer.svelte
View file

@ -1,11 +0,0 @@
<script>
import { Grid, Row, Column } from "carbon-components-svelte";
</script>
<footer class="bx--content">
<Grid>
<Row>
<Column />
</Row>
</Grid>
</footer>

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

@ -17,7 +17,6 @@
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import LogoGithub20 from "carbon-icons-svelte/lib/LogoGithub20"; import LogoGithub20 from "carbon-icons-svelte/lib/LogoGithub20";
import Theme from "../components/Theme.svelte"; import Theme from "../components/Theme.svelte";
import Footer from "../components/Footer.svelte";
const deprecated = ["ToggleSmall", "Icon"]; const deprecated = ["ToggleSmall", "Icon"];
const new_components = []; const new_components = [];
@ -104,7 +103,7 @@
expanded="{$isActive($url('')) || $isActive($url('/components'))}" expanded="{$isActive($url('')) || $isActive($url('/components'))}"
text="Components" text="Components"
> >
{#each components.children as child, i (child.path)} {#each components.children.filter((child) => !deprecated.includes(child.title)) as child, i (child.path)}
<SideNavMenuItem <SideNavMenuItem
text="{child.title}" text="{child.title}"
href="{$url(child.path)}" href="{$url(child.path)}"
@ -145,7 +144,6 @@
</SideNavItems> </SideNavItems>
</SideNav> </SideNav>
<slot /> <slot />
<Footer />
</Theme> </Theme>
<style global> <style global>

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>

17
docs/src/pages/components/OverflowMenu.svx
View file

@ -82,3 +82,20 @@ By default, the first overflow menu item is focused when opening the dropdown.
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" /> <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
<OverflowMenuItem danger text="Delete service" /> <OverflowMenuItem danger text="Delete service" />
</OverflowMenu> </OverflowMenu>
### Disabled items
Disable menu items by setting `disabled` to `true`.
<OverflowMenu>
<OverflowMenuItem text="Create key" />
<OverflowMenuItem text="Import key" />
<OverflowMenuItem text="Revoke key" disabled />
<OverflowMenuItem text="Duplicate key" disabled />
<OverflowMenuItem
hasDivider
href="https://cloud.ibm.com/docs/api-gateway/"
text="API documentation"
/>
<OverflowMenuItem hasDivider danger text="Delete service" />
</OverflowMenu>

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>

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

@ -60,7 +60,7 @@
</script> </script>
<Content> <Content>
<Grid> <Grid style="margin-bottom: var(--cds-layout-06);">
<Row> <Row>
<Column> <Column>
<h1>Carbon Components Svelte</h1> <h1>Carbon Components Svelte</h1>
@ -91,18 +91,26 @@
<Row style="margin-bottom: var(--cds-layout-02)"> <Row style="margin-bottom: var(--cds-layout-02)">
<Column> <Column>
<h3>Installation</h3> <h3>Installation</h3>
<h4>Using Yarn:</h4> </Column>
<Row noGutter> </Row>
<Row style="margin-bottom: var(--cds-layout-02)">
<Column noGutter>
<Tabs>
<Tab label="Yarn" />
<Tab label="NPM" />
<Tab label="pnpm" />
<div slot="content" style="margin: 1rem -1rem">
<TabContent>
<CodeSnippet code="{installYarn}" /> <CodeSnippet code="{installYarn}" />
</Row> </TabContent>
<h4>Using NPM:</h4> <TabContent>
<Row noGutter>
<CodeSnippet code="{installNpm}" /> <CodeSnippet code="{installNpm}" />
</Row> </TabContent>
<h4>Using pnpm:</h4> <TabContent>
<Row noGutter>
<CodeSnippet code="{installPnpm}" /> <CodeSnippet code="{installPnpm}" />
</Row> </TabContent>
</div>
</Tabs>
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--cds-layout-04)"> <Row style="margin-bottom: var(--cds-layout-04)">