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

2025-09-14 18:01:06 +00:00 · 2022-03-13 06:14:30 -07:00 · 2022-03-13 06:14:30 -07:00 · 5bf16e42f7
commit 5bf16e42f7
parent 95a1dfa1af
16 changed files with 54 additions and 42 deletions
--- a/docs/src/components/Footer.svelte
+++ b/docs/src/components/Footer.svelte
@ -1,11 +0,0 @@
-<script>
-  import { Grid, Row, Column } from "carbon-components-svelte";
-</script>
-
-<footer class="bx--content">
-  <Grid>
-    <Row>
-      <Column />
-    </Row>
-  </Grid>
-</footer>
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@ -17,7 +17,6 @@
  } from "carbon-components-svelte";
  import LogoGithub20 from "carbon-icons-svelte/lib/LogoGithub20";
  import Theme from "../components/Theme.svelte";
-  import Footer from "../components/Footer.svelte";

  const deprecated = ["ToggleSmall", "Icon"];
  const new_components = [];
@ -104,7 +103,7 @@
        expanded="{$isActive($url('')) || $isActive($url('/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
            text="{child.title}"
            href="{$url(child.path)}"
@ -145,7 +144,6 @@
    </SideNavItems>
  </SideNav>
  <slot />
-  <Footer />
 </Theme>

 <style global>
--- a/docs/src/pages/components/Button.svx
+++ b/docs/src/pages/components/Button.svx
@ -37,7 +37,7 @@

 ### 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">
    You must provide an <strong>iconDescription</strong> for the button tooltip.
  </div>
@ -55,7 +55,7 @@

 ### 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">
    You must provide an <strong>iconDescription</strong> for the button tooltip.
  </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.

-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">
    Expressive styles only work with the default, "lg", and "xl" button sizes.
  </div>
--- a/docs/src/pages/components/Checkbox.svx
+++ b/docs/src/pages/components/Checkbox.svx
@ -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)).

-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">
    If using <strong>bind:group</strong>, <strong>bind:checked</strong> will only support one-way binding.
  </div>
--- a/docs/src/pages/components/ComboBox.svx
+++ b/docs/src/pages/components/ComboBox.svx
@ -3,7 +3,7 @@
  import Preview from "../../components/Preview.svelte";
 </script>

-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">
    Since version 0.53, <strong>selectedIndex</strong> has been replaced with <strong>selectedId</strong>.
  </div>
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@ -12,11 +12,11 @@ components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSear

 `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>
 </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>
 </InlineNotification>

--- a/docs/src/pages/components/DatePicker.svx
+++ b/docs/src/pages/components/DatePicker.svx
@ -63,7 +63,7 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]

 ### Single

-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">
    If using Rollup, specify <strong>inlineDynamicImports: true</strong> in your <strong>rollup.config.js</strong>.
  </div>
--- a/docs/src/pages/components/Dropdown.svx
+++ b/docs/src/pages/components/Dropdown.svx
@ -7,7 +7,7 @@ components: ["Dropdown", "DropdownSkeleton"]
  import Preview from "../../components/Preview.svelte";
 </script>

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

-<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Deprecation warning" kind="warning" hideCloseButton>
  <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.
  </div>
--- a/docs/src/pages/components/OrderedList.svx
+++ b/docs/src/pages/components/OrderedList.svx
@ -7,7 +7,7 @@ components: ["OrderedList", "ListItem"]
  import Preview from "../../components/Preview.svelte";
 </script>

-<InlineNotification svx-ignore title="Tip:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Tip:" kind="info" hideCloseButton>
  <div class="body-short-01">
    Consider using the <Link href="/components/RecursiveList#ordered">RecursiveList</Link> component for rendering tree structured data.
   </div>
--- a/docs/src/pages/components/OverflowMenu.svx
+++ b/docs/src/pages/components/OverflowMenu.svx
@ -81,4 +81,21 @@ By default, the first overflow menu item is focused when opening the dropdown.
  <OverflowMenuItem text="Manage credentials" />
  <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
  <OverflowMenuItem danger text="Delete service" />
+</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>
--- a/docs/src/pages/components/RecursiveList.svx
+++ b/docs/src/pages/components/RecursiveList.svx
@ -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.

-<InlineNotification svx-ignore title="Warning:" kind="warning" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Warning:" kind="warning" hideCloseButton>
  <div class="body-short-01">
    HTML content provided via the <code>html</code> prop is not sanitized.
  </div>
--- a/docs/src/pages/components/ToggleSmall.svx
+++ b/docs/src/pages/components/ToggleSmall.svx
@ -7,7 +7,7 @@ components: ["ToggleSmall", "ToggleSmallSkeleton"]
  import Preview from "../../components/Preview.svelte";
 </script>

-<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Deprecation warning" kind="warning" hideCloseButton>
  <div>
    This component will be removed in the next major release. Use the <Link href="/components/Toggle#small-size">Toggle small variant</Link> instead.
  </div>
--- a/docs/src/pages/components/TreeView.svx
+++ b/docs/src/pages/components/TreeView.svx
@ -11,7 +11,7 @@ Optional properties include `disabled`, `expanded`, `icon`, and `children`.

 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>
 </InlineNotification>

--- a/docs/src/pages/components/UnorderedList.svx
+++ b/docs/src/pages/components/UnorderedList.svx
@ -7,7 +7,7 @@ components: ["UnorderedList", "ListItem"]
  import Preview from "../../components/Preview.svelte";
 </script>

-<InlineNotification svx-ignore title="Tip:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Tip:" kind="info" hideCloseButton>
  <div class="body-short-01">
   Consider using the <Link href="/components/RecursiveList#unordered">RecursiveList</Link> component for rendering tree structured data.
  </div>
--- a/docs/src/pages/index.svelte
+++ b/docs/src/pages/index.svelte
@ -60,7 +60,7 @@
 </script>

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