Fix a11y-mouse-events warning, update docs (carbon-design-system#765)

* docs: update number of available Carbon icons * docs: add svelte:head example for loading CDN styles * chore(deps-dev): upgrade svelte to 3.40.1 * fix(a11y): disable a11y-mouse-events-have-key-events warning carbon-design-system#760 * fix(deps): upgrade carbon-icons-svelte to v10.36.0 to avoid a11y warnings carbon-design-system#760 * refactor(overflow-menu): remove formatStyle utility * docs: links in paragraphs should be inline * docs: add note on using all styles for dynamic theming
Mattchine · Jul 26, 2021 · 6db4112 · 6db4112
1 parent fa11c2e
commit 6db4112
Show file tree

Hide file tree

Showing 86 changed files with 161 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@ Design systems facilitate design and development through reuse, consistency, and
 
 The Carbon Svelte portfolio also includes:
 
-- **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 6000+ Carbon icons as Svelte components
+- **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 7000+ Carbon icons as Svelte components
 - **[Carbon Pictograms Svelte](https://github.com/IBM/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components
 - **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3
 - **[Carbon Preprocess Svelte](https://github.com/IBM/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon

diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
@@ -158,6 +158,7 @@
 
   .prose > p > .bx--link {
     font-size: inherit;
+    text-decoration: underline;
   }
 
   .prose .toc {

diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte
@@ -29,7 +29,17 @@
     g80: "Gray 80",
     g90: "Gray 90",
     g100: "Gray 100",
+    all: "All",
   };
+
+  const cssImportAll = `import "carbon-components-svelte/css/all.css";`;
+  const cssThemeToggle = `<script>
+  let theme = "${$theme}"; // "white" | "g10" | "g80" | "g90" | "g100"
+
+  $: document.documentElement.setAttribute("theme", theme);
+<\/script>
+`;
+
   $: cssImport = `import "carbon-components-svelte/css/${$theme}.css";`;
   $: cssCdn = `<!DOCTYPE html>
 <html>
@@ -40,6 +50,12 @@
     />
   </head>
 </html>`;
+  $: cssCdnSvelteHead = `<svelte:head>
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/carbon-components-svelte/css/${$theme}.css"
+  />
+</svelte:head>`;
 </script>
 
 <Content>
@@ -74,11 +90,6 @@
     <Row style="margin-bottom: var(--cds-layout-02)">
       <Column>
         <h3>Installation</h3>
-        <p>
-          Install
-          <code>carbon-components-svelte</code>
-          as a development dependency in your project.
-        </p>
         <h4>Using Yarn:</h4>
         <Row noGutter>
           <CodeSnippet code="{installYarn}" />
@@ -89,7 +100,7 @@
         </Row>
       </Column>
     </Row>
-    <Row style="margin-bottom: var(--cds-layout-05)">
+    <Row style="margin-bottom: var(--cds-layout-04)">
       <Column>
         <h3>Styling</h3>
         <p>
@@ -109,8 +120,8 @@
       </Column>
     </Row>
 
-    <Row style="margin-bottom: var(--cds-layout-02)">
-      <Column xlg="{10}" noGutter>
+    <Row>
+      <Column max="{10}" xlg="{10}" noGutter>
         <Tabs>
           <Tab label="CSS StyleSheet" />
           <Tab label="CDN" />
@@ -144,17 +155,23 @@
                   unpkg.com
                 </OutboundLink>.
               </p>
-              <p>
-                This is best suited for rapid prototyping or if your set-up does
-                not use a CSS loader.
-              </p>
+              <p>This is best suited for rapid prototyping.</p>
+              <h5>HTML</h5>
               <Row padding noGutter>
                 <Column>
                   <p>
                     <CodeSnippet type="multi" code="{cssCdn}" />
                   </p>
                 </Column>
               </Row>
+              <h5>svelte:head</h5>
+              <Row padding noGutter>
+                <Column>
+                  <p>
+                    <CodeSnippet type="multi" code="{cssCdnSvelteHead}" />
+                  </p>
+                </Column>
+              </Row>
             </TabContent>
             <TabContent>
               <p>
@@ -182,7 +199,39 @@
       </Column>
     </Row>
 
-    <Row>
+    <Row style="margin-bottom: var(--cds-layout-02)">
+      <Column>
+        <h3>Dynamic theming</h3>
+        <p>Use the "all.css" StyleSheet for dynamic, client-side theming.</p>
+        <Row padding noGutter>
+          <Column>
+            <p>
+              <CodeSnippet type="single" code="{cssImportAll}" />
+            </p>
+          </Column>
+        </Row>
+        <p>
+          Programmatically switch between each of the five Carbon themes by
+          setting the "theme" attribute on the HTML element.
+        </p>
+        <Row padding noGutter>
+          <Column>
+            <p>
+              <CodeSnippet type="multi" code="{cssThemeToggle}" />
+            </p>
+          </Column>
+        </Row>
+        <p>
+          You can use the
+          <Link inline size="lg" href="/components/Theme">
+            Theme utility component
+          </Link>
+          to update the theme at runtime.
+        </p>
+      </Column>
+    </Row>
+
+    <Row style="margin-bottom: var(--cds-layout-02)">
       <Column>
         <h3>Portfolio</h3>
         <p>
@@ -206,7 +255,7 @@
         <TileCard
           borderBottom
           title="Carbon Icons Svelte"
-          subtitle="6000+ icons"
+          subtitle="7000+ icons"
           target="_blank"
           href="https://github.com/IBM/carbon-icons-svelte"
         />

diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "publish-examples": "node scripts/publish-examples"
   },
   "dependencies": {
-    "carbon-icons-svelte": "^10.27.0",
+    "carbon-icons-svelte": "^10.36.0",
     "flatpickr": "4.6.9"
   },
   "devDependencies": {
@@ -44,7 +44,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.32.6",
     "sveld": "^0.8.2",
-    "svelte": "^3.32.1",
+    "svelte": "^3.40.1",
     "svelte-check": "^1.1.32",
     "typescript": "^4.1.3"
   },

diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte
@@ -30,6 +30,7 @@
   setContext("Accordion", { disableItems });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <AccordionSkeleton
     {...$$restProps}

diff --git a/src/Accordion/AccordionItem.svelte b/src/Accordion/AccordionItem.svelte
@@ -34,6 +34,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <li
   class:bx--accordion__item="{true}"
   class:bx--accordion__item--active="{open}"

diff --git a/src/Accordion/AccordionSkeleton.svelte b/src/Accordion/AccordionSkeleton.svelte
@@ -21,6 +21,7 @@
   import SkeletonText from "../SkeletonText/SkeletonText.svelte";
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <ul
   class:bx--skeleton="{true}"
   class:bx--accordion="{true}"

diff --git a/src/Breadcrumb/Breadcrumb.svelte b/src/Breadcrumb/Breadcrumb.svelte
@@ -10,6 +10,7 @@
   import BreadcrumbSkeleton from "./BreadcrumbSkeleton.svelte";
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <BreadcrumbSkeleton
     noTrailingSlash="{noTrailingSlash}"

diff --git a/src/Breadcrumb/BreadcrumbItem.svelte b/src/Breadcrumb/BreadcrumbItem.svelte
@@ -19,6 +19,7 @@
   setContext("BreadcrumbItem", {});
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <li
   class:bx--breadcrumb-item="{true}"
   class:bx--breadcrumb-item--current="{isCurrentPage &&

diff --git a/src/Breadcrumb/BreadcrumbSkeleton.svelte b/src/Breadcrumb/BreadcrumbSkeleton.svelte
@@ -6,6 +6,7 @@
   export let count = 3;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--skeleton="{true}"
   class:bx--breadcrumb="{true}"

diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
@@ -131,6 +131,7 @@
   };
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <ButtonSkeleton
     href="{href}"

diff --git a/src/Button/ButtonSkeleton.svelte b/src/Button/ButtonSkeleton.svelte
@@ -18,6 +18,7 @@
   export let small = false;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if href}
   <a
     href="{href}"

diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte
@@ -47,6 +47,7 @@
   $: dispatch("check", checked);
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <CheckboxSkeleton
     {...$$restProps}

diff --git a/src/Checkbox/CheckboxSkeleton.svelte b/src/Checkbox/CheckboxSkeleton.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   class:bx--checkbox-wrapper="{true}"

diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
@@ -116,6 +116,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if skeleton}
   <CodeSnippetSkeleton
     type="{type}"

diff --git a/src/CodeSnippet/CodeSnippetSkeleton.svelte b/src/CodeSnippet/CodeSnippetSkeleton.svelte
@@ -6,6 +6,7 @@
   export let type = "single";
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--skeleton="{true}"
   class:bx--snippet="{true}"

diff --git a/src/ComposedModal/ComposedModal.svelte b/src/ComposedModal/ComposedModal.svelte
@@ -97,6 +97,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   bind:this="{ref}"
   role="presentation"

diff --git a/src/ContentSwitcher/ContentSwitcher.svelte b/src/ContentSwitcher/ContentSwitcher.svelte
@@ -63,6 +63,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   role="tablist"
   class:bx--content-switcher="{true}"

diff --git a/src/ContentSwitcher/Switch.svelte b/src/ContentSwitcher/Switch.svelte
@@ -38,6 +38,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <button
   bind:this="{ref}"
   role="tab"

diff --git a/src/DataTable/DataTableSkeleton.svelte b/src/DataTable/DataTableSkeleton.svelte
@@ -41,6 +41,7 @@
   );
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--skeleton="{true}"
   class:bx--data-table-container="{true}"

diff --git a/src/DataTable/TableCell.svelte b/src/DataTable/TableCell.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <td {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
   <slot />
 </td>
diff --git a/src/DataTable/TableHead.svelte b/src/DataTable/TableHead.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <thead {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
   <slot />
 </thead>
diff --git a/src/DataTable/TableHeader.svelte b/src/DataTable/TableHeader.svelte
@@ -27,6 +27,7 @@
   $: ariaLabel = translateWithId();
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if $tableSortable && !disableSorting}
   <th
     aria-sort="{active ? $sortHeader.sortDirection : 'none'}"

diff --git a/src/DataTable/TableRow.svelte b/src/DataTable/TableRow.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <tr {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
   <slot />
 </tr>
diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte
@@ -200,6 +200,7 @@
   }}"
 />
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}

diff --git a/src/DatePicker/DatePickerSkeleton.svelte b/src/DatePicker/DatePickerSkeleton.svelte
@@ -6,6 +6,7 @@
   export let id = "ccs-" + Math.random().toString(36);
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}

diff --git a/src/Dropdown/DropdownSkeleton.svelte b/src/Dropdown/DropdownSkeleton.svelte
@@ -3,6 +3,7 @@
   export let inline = false;
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--skeleton="{true}"
   class:bx--dropdown-v2="{true}"

diff --git a/src/FileUploader/FileUploader.svelte b/src/FileUploader/FileUploader.svelte
@@ -76,6 +76,7 @@
   });
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}

diff --git a/src/FileUploader/FileUploaderItem.svelte b/src/FileUploader/FileUploaderItem.svelte
@@ -39,6 +39,7 @@
   const dispatch = createEventDispatcher();
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <span
   id="{id}"
   class:bx--file__selected-file="{true}"

diff --git a/src/FileUploader/FileUploaderSkeleton.svelte b/src/FileUploader/FileUploaderSkeleton.svelte
@@ -3,6 +3,7 @@
   import { SkeletonText } from "../SkeletonText";
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}

diff --git a/src/Form/Form.svelte b/src/Form/Form.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <form
   class:bx--form="{true}"
   {...$$restProps}

diff --git a/src/FormGroup/FormGroup.svelte b/src/FormGroup/FormGroup.svelte
@@ -18,6 +18,7 @@
   export let legendId = "";
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <fieldset
   data-invalid="{invalid || undefined}"
   class:bx--fieldset="{true}"

diff --git a/src/FormItem/FormItem.svelte b/src/FormItem/FormItem.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
   class:bx--form-item="{true}"
   {...$$restProps}

diff --git a/src/FormLabel/FormLabel.svelte b/src/FormLabel/FormLabel.svelte
@@ -3,6 +3,7 @@
   export let id = "ccs-" + Math.random().toString(36);
 </script>
 
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <label
   class:bx--label="{true}"
   for="{id}"
-Original file line number
+Diff line change
@@ Expand Up / @@ -200,6 +200,7 @@ @@
       }}"
     />
+    <!-- svelte-ignore a11y-mouse-events-have-key-events -->
     <div
       class:bx--form-item="{true}"
       {...$$restProps}
@@ Expand Down @@