Merge pull request #1 from IBM/master

pull

CHANGELOG.md

@@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 <!-- ## Unreleased -->
 
+## [0.23.1](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.23.1) - 2020-11-22
+
+**Fixes**
+
+- Fix `selected` prop reactivity in RadioButtonGroup so that it can be programmatically updated ([PR #407](https://github.com/IBM/carbon-components-svelte/pull/407), [issue #406](https://github.com/IBM/carbon-components-svelte/issues/406))
+- Allow click propagation in ListBox so that list box menus can close correctly; this fixes behavior in the ComboBox, Dropdown, and MultiSelect components ([PR #405](https://github.com/IBM/carbon-components-svelte/pull/405), [issue #388](https://github.com/IBM/carbon-components-svelte/issues/388))
+
+**Documentation**
+
+- Add [programmatic RadioButton example](https://carbon-svelte.vercel.app/components/RadioButton#programmatic-usage)
+- Add [multiple ComboBox example](https://carbon-svelte.vercel.app/components/ComboBox#multiple-combo-boxes)
+- Add [multiple Dropdown example](https://carbon-svelte.vercel.app/components/Dropdown#multiple-dropdowns)
+- Add [multiple MultiSelect example](https://carbon-svelte.vercel.app/components/MultiSelect#multiple-multi-select-dropdowns)
+- Add [ExpandableAccordion recipe](https://carbon-svelte.vercel.app/recipes/ExpandableAccordion#expandable-accordion)
+
 ## [0.23.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.23.0) - 2020-11-20
 
 **Features**

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 154 components exported from carbon-components-svelte@0.23.0.
+> 154 components exported from carbon-components-svelte@0.23.1.
 
 ## Components
 

docs/src/pages/_layout.svelte

@@ -35,6 +35,13 @@
 </script>
 
 <style global>
+  .body-short-01 {
+    font-size: var(--cds-body-short-01-font-size);
+    font-weight: var(--cds-body-short-01-font-weight);
+    letter-spacing: var(--cds-body-short-01-letter-spacing);
+    line-height: var(--cds-body-short-01-line-height);
+  }
+
   .bx--col > h1 {
     font-size: var(--cds-display-01-font-size);
     font-weight: var(--cds-display-01-font-weight);

docs/src/pages/components/Accordion.svx

@@ -10,6 +10,8 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
+See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a toggleable accordion component.
+
 ### Default
 
 <Accordion>

docs/src/pages/components/Breadcrumb.svx

@@ -10,7 +10,7 @@ components: ["Breadcrumb", "BreadcrumbItem"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for building a reusable breadcrumbs component.
+See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs component.
 
 ### Default
 

docs/src/pages/components/CodeSnippet.svx

@@ -1,5 +1,5 @@
 <script>
-  import { CodeSnippet, InlineNotification } from "carbon-components-svelte";
+  import { CodeSnippet, InlineNotification, Link } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 
   let code = `// helpers.js
@@ -27,7 +27,9 @@ let comment = `
 `
 </script>
 
-<InlineNotification svx-ignore title="Note:" subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic." kind="info" hideCloseButton />
+<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
+</InlineNotification>
 
 ### Default (single-line)
 

docs/src/pages/components/ComposedModal.svx

@@ -1,5 +1,5 @@
 ---
-components: ["ComposedModal", "ModalHeader", "ModalBody", "ModalFooter", "Checkbox"]
+components: ["ComposedModal", "ModalHeader", "ModalBody", "ModalFooter"]
 ---
 
 <script>

docs/src/pages/components/CopyButton.svx

@@ -1,9 +1,11 @@
 <script>
-  import { CopyButton, InlineNotification } from "carbon-components-svelte";
+  import { CopyButton, InlineNotification, Link } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Note:" subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic." kind="info" hideCloseButton />
+<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
+</InlineNotification>
 
 ### Default
 

docs/src/pages/components/RadioButton.svx

@@ -17,6 +17,12 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
   </RadioButtonGroup>
 </FormGroup>
 
+### Programmatic usage
+
+Bind the selected value using the `selected` prop.
+
+<FileSource src="/framed/RadioButton/ProgrammaticRadioButton" />
+
 ### Label text aligned left
 
 <FormGroup legendText="Storage tier (disk)">

docs/src/pages/components/ToggleSmall.svx

@@ -7,9 +7,9 @@ components: ["ToggleSmall", "ToggleSmallSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton>
+<InlineNotification svx-ignore title="Deprecation warning:" kind="warning" hideCloseButton>
   <div>
-    This component will be removed in version 1.0.0. 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>
 </InlineNotification>
 

docs/src/pages/framed/Accordion/ExpandableAccordion.svelte

@@ -0,0 +1,43 @@
+<script>
+  export let items = [
+    {
+      title: "Natural Language Classifier",
+      description:
+        "Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.",
+    },
+    {
+      title: "Natural Language Understanding",
+      description:
+        "Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.",
+    },
+    {
+      title: "Language Translator",
+      description:
+        "Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.",
+    },
+  ];
+
+  import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
+
+  let open = false;
+</script>
+
+<Button
+  kind="ghost"
+  size="field"
+  on:click="{() => {
+    open = !open;
+  }}"
+>
+  {open ? 'Collapse' : 'Expand'}
+  all
+</Button>
+
+<Accordion>
+  {#each items as item}
+    <AccordionItem open="{open}">
+      <h5 slot="title">{item.title}</h5>
+      <p>{item.description}</p>
+    </AccordionItem>
+  {/each}
+</Accordion>

docs/src/pages/framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte

@@ -5,4 +5,4 @@
   import copy from "clipboard-copy";
 </script>
 
-<CodeSnippet on:click="{() => copy(code)}">{code}</CodeSnippet>
+<CodeSnippet on:click="{() => copy(code)}" code="{code}" />

docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte

@@ -0,0 +1,36 @@
+<script>
+  import {
+    ButtonSet,
+    Button,
+    FormGroup,
+    RadioButtonGroup,
+    RadioButton,
+  } from "carbon-components-svelte";
+
+  let plan = "standard";
+</script>
+
+<FormGroup legendText="Storage tier (disk)">
+  <RadioButtonGroup bind:selected="{plan}">
+    <RadioButton labelText="Free (1 GB)" value="free" />
+    <RadioButton labelText="Standard (10 GB)" value="standard" />
+    <RadioButton labelText="Pro (128 GB)" value="pro" />
+  </RadioButtonGroup>
+</FormGroup>
+
+<ButtonSet>
+  {#each ['free', 'standard', 'pro'] as value}
+    <Button
+      on:click="{() => {
+        plan = value;
+      }}"
+    >
+      Select "{value}"
+    </Button>
+  {/each}
+</ButtonSet>
+
+<div style="margin: var(--cds-layout-01) 0">
+  Selected plan:
+  <strong>{plan}</strong>
+</div>

docs/src/pages/recipes/CopyableCodeSnippet.svx

@@ -6,10 +6,12 @@ layout: recipe
   import Preview from "../../components/Preview.svelte";
 </script>
 
-The [CodeSnippet](/components/CodeSnippet) and [CopyButton](/components/CopyButton) do not include logic to copy the supplied `code` text.
+The [CodeSnippet](/components/CodeSnippet) and [CopyButton](/components/CopyButton) components do not include logic to copy the supplied `code` text.
+
+You can use a third party open source module like [clipboard-copy](https://www.npmjs.com/package/clipboard-copy) that is compatible with modern web browsers.
 
 ## clipboard-copy
 
-This example uses [clipboard-copy](https://www.npmjs.com/package/clipboard-copy), a lightweight module designed for the web.
+This documentation website uses [clipboard-copy](https://www.npmjs.com/package/clipboard-copy).
 
 <FileSource src="/framed/CopyableCodeSnippet/CopyableCodeSnippet" />

docs/src/pages/recipes/ExpandableAccordion.svx

@@ -0,0 +1,13 @@
+---
+layout: recipe
+---
+
+<script>
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+## Expandable accordion
+
+This example expands and collapses all accordion items.
+
+<FileSource src="/framed/Accordion/ExpandableAccordion" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.23.0",
+  "version": "0.23.1",
   "license": "Apache-2.0",
   "author": "IBM",
   "description": "Svelte implementation of the Carbon Design System",

src/RadioButtonGroup/RadioButtonGroup.svelte

@@ -26,7 +26,7 @@
    */
   export let id = undefined;
 
-  import { createEventDispatcher, setContext } from "svelte";
+  import { beforeUpdate, createEventDispatcher, onMount, setContext } from "svelte";
   import { writable } from "svelte/store";
 
   const dispatch = createEventDispatcher();
@@ -40,11 +40,21 @@
       }
     },
     update: (value) => {
-      selectedValue.set(value);
+      selected = value;
     },
   });
 
-  $: selected = $selectedValue;
+  onMount(() => {
+    $selectedValue = selected
+  })
+
+  beforeUpdate(() => {
+    $selectedValue = selected
+  })
+
+  $: $selectedValue, (() => {
+    selected = $selectedValue
+  })
   $: dispatch("change", $selectedValue);
 </script>