@synergy-design-system/metadata 3.16.1 → 3.18.0

package/data/layers/examples/component/component:syn-radio-button.md

@@ -0,0 +1,200 @@
+## Default
+
+Radio buttons allow the user to select a single option from a group using a button-like control.Radio buttons are designed to be used with radio groups. When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.
+
+```html
+<syn-radio-group label="Select an option" name="a" value="1">
+  <syn-radio-button value="1"> Option 1 </syn-radio-button>
+
+  <syn-radio-button value="2">Option 2</syn-radio-button>
+  <syn-radio-button value="3">Option 3</syn-radio-button>
+</syn-radio-group>
+```
+
+---
+
+## Checked
+
+To set the initial value and checked state, use the value attribute on the containing radio group.
+
+```html
+<syn-radio-group label="Select an option" name="b" value="2">
+  <syn-radio-button value="1">Option 1</syn-radio-button>
+  <syn-radio-button value="2">Option 2</syn-radio-button>
+  <syn-radio-button value="3">Option 3</syn-radio-button>
+</syn-radio-group>
+```
+
+---
+
+## Focus
+
+The focus event gives the user feedback that the radio button has been focused by the keyboard interaction.
+
+```html
+<syn-radio-group label="Select an option" name="b" value="1">
+  <syn-radio-button value="1">Option 1</syn-radio-button>
+  <syn-radio-button value="2">Option 2</syn-radio-button>
+  <syn-radio-button value="3">Option 3</syn-radio-button>
+</syn-radio-group>
+```
+
+---
+
+## Disabled
+
+Use the disabled attribute to disable a radio button.
+
+```html
+<syn-radio-group label="Select an option" name="b" value="1">
+  <syn-radio-button value="1" disabled="">Option 1</syn-radio-button>
+  <syn-radio-button value="2" disabled="">Option 2</syn-radio-button>
+  <syn-radio-button value="3">Option 3</syn-radio-button>
+</syn-radio-group>
+```
+
+---
+
+## Readonly
+
+Add the read-only attribute to render a readonly radio button. Please note that you need to enable the readonly state for each individual radio button.
+
+```html
+<div
+  style="display: flex; flex-direction: column; gap: var(--syn-spacing-medium)"
+>
+  <syn-radio-group label="Select an option" name="b" value="1">
+    <syn-radio-button value="1" readonly="">Option 1</syn-radio-button>
+    <syn-radio-button value="2" readonly="">Option 2</syn-radio-button>
+    <syn-radio-button value="3" readonly="">Option 3</syn-radio-button>
+  </syn-radio-group>
+  <syn-radio-group label="Select an option" name="b" value="1">
+    <syn-radio-button value="1" readonly="">Option 1</syn-radio-button>
+    <syn-radio-button value="2" readonly="">Option 2</syn-radio-button>
+    <syn-radio-button value="3">Option 3</syn-radio-button>
+  </syn-radio-group>
+</div>
+```
+
+---
+
+## Sizes
+
+Use the size attribute to change a radio button’s size.
+
+```html
+<div
+  style="display: flex; flex-direction: column; gap: var(--syn-spacing-medium)"
+>
+  <syn-radio-group label="Select an option" name="size" value="1" size="small">
+    <syn-radio-button value="1">Option 1</syn-radio-button>
+    <syn-radio-button value="2">Option 2</syn-radio-button>
+    <syn-radio-button value="3">Option 3</syn-radio-button>
+  </syn-radio-group>
+
+  <syn-radio-group label="Select an option" name="size" value="1" size="medium">
+    <syn-radio-button value="1">Option 1</syn-radio-button>
+    <syn-radio-button value="2">Option 2</syn-radio-button>
+    <syn-radio-button value="3">Option 3</syn-radio-button>
+  </syn-radio-group>
+
+  <syn-radio-group label="Select an option" name="size" value="1" size="large">
+    <syn-radio-button value="1">Option 1</syn-radio-button>
+    <syn-radio-button value="2">Option 2</syn-radio-button>
+    <syn-radio-button value="3">Option 3</syn-radio-button>
+  </syn-radio-group>
+</div>
+```
+
+---
+
+## Invalid
+
+The invalid status is used to warn the user that the Radio Group is invalid. For example, if the radio-button is mandatory and nothing has been checked.
+
+```html
+<form
+  onsubmit="
+    event.preventDefault();
+    event.stopPropagation();
+  "
+  id="components-syn-radio-button--invalid"
+>
+  <syn-radio-group
+    label="Select an option"
+    name="a"
+    help-text="This is required"
+    required=""
+  >
+    <syn-radio-button value="1">Option 1</syn-radio-button>
+    <syn-radio-button value="2">Option 2</syn-radio-button>
+    <syn-radio-button value="3">Option 3</syn-radio-button>
+  </syn-radio-group>
+
+  <syn-button type="submit" variant="filled">Submit</syn-button>
+</form>
+<style>
+  #components-syn-radio-button--invalid {
+    display: flex;
+    flex-direction: column;
+    gap: var(--syn-spacing-large);
+  }
+  syn-button {
+    align-self: flex-start;
+  }
+</style>
+```
+
+---
+
+## Prefix And Suffix Icons
+
+Use the prefix and suffix slots to add icons.
+
+```html
+<syn-radio-group label="Select an option" name="b" value="1">
+  <syn-radio-button value="1">
+    <syn-icon slot="prefix" name="wallpaper"></syn-icon>
+    Option 1
+  </syn-radio-button>
+  <syn-radio-button value="2">
+    Option 2
+    <syn-icon slot="suffix" name="wallpaper"></syn-icon>
+  </syn-radio-button>
+  <syn-radio-button value="3">
+    <syn-icon slot="prefix" name="wallpaper"></syn-icon>
+    Option 3
+    <syn-icon slot="suffix" name="wallpaper"></syn-icon>
+  </syn-radio-button>
+</syn-radio-group>
+```
+
+---
+
+## Buttons With Icons
+
+You can omit button labels and use icons instead. Make sure to set a label attribute on each icon so screen readers will announce each option correctly.
+
+```html
+<syn-radio-group label="Select an option" name="a" value="neutral">
+  <syn-radio-button value="angry">
+    <syn-icon name="face_5" label="Angry"></syn-icon>
+  </syn-radio-button>
+
+  <syn-radio-button value="sad">
+    <syn-icon name="face_4" label="Sad"></syn-icon>
+  </syn-radio-button>
+
+  <syn-radio-button value="neutral">
+    <syn-icon name="face_3" label="Neutral"></syn-icon>
+  </syn-radio-button>
+
+  <syn-radio-button value="happy">
+    <syn-icon name="face_2" label="Happy"></syn-icon>
+  </syn-radio-button>
+
+  <syn-radio-button value="laughing">
+    <syn-icon name="face_6" label="Laughing"></syn-icon>
+  </syn-radio-button>
+</syn-radio-group>
+```

package/data/layers/examples/component/component:syn-radio-group.md

@@ -140,7 +140,13 @@ The size of Radios and Radio Buttons will be determined by the Radio Group’s s
 The invalid status is used to warn the user that the Radio Group is invalid. For example, if the radio is mandatory and nothing has been checked.
 
 ```html
-<form class="custom-validity">
+<form
+  onsubmit="
+    event.preventDefault();
+    event.stopPropagation();
+  "
+  id="components-syn-radio-group--invalid"
+>
   <syn-radio-group
     label="Select an option"
     name="a"
@@ -151,10 +157,11 @@ The invalid status is used to warn the user that the Radio Group is invalid. For
     <syn-radio value="2">Option 2</syn-radio>
     <syn-radio value="3">Option 3</syn-radio>
   </syn-radio-group>
+
   <syn-button type="submit" variant="filled">Submit</syn-button>
 </form>
 <style>
-  .custom-validity {
+  #components-syn-radio-group--invalid {
     display: flex;
     flex-direction: column;
     gap: var(--syn-spacing-large);
@@ -182,3 +189,21 @@ Use the setCustomValidity() method to set a custom validation message. This will
   <syn-button type="submit" variant="filled">Submit</syn-button>
 </form>
 ```
+
+---
+
+## Radio Buttons
+
+Radio buttons offer an alternate way to display radio controls. In this case, an internal button group is used to group the buttons into a single, cohesive control.
+
+```html
+<syn-radio-group
+  label="Select an option"
+  value="Option 1"
+  help-text="Select an option that makes you proud."
+>
+  <syn-radio-button value="Option 1">Option 1</syn-radio-button>
+  <syn-radio-button value="Option 2">Option 2</syn-radio-button>
+  <syn-radio-button value="Option 3">Option 3</syn-radio-button>
+</syn-radio-group>
+```

package/data/layers/examples/component/component:syn-radio.md

@@ -73,18 +73,25 @@ Add the size attribute to the Radio Group to change the radios’ size.
 The invalid status is used to warn the user that the Radio is invalid. For example, if the radio is mandatory and nothing has been checked.
 
 ```html
-<form class="custom-validity">
-  <syn-radio-group required="" value="2">
+<form
+  onsubmit="
+    event.preventDefault();
+    event.stopPropagation();
+  "
+  id="components-syn-radio--invalid"
+>
+  <syn-radio-group required="">
     <syn-radio value="1">Invalid</syn-radio>
-    <syn-radio value="2">Invalid</syn-radio>
+    <syn-radio value="">Invalid</syn-radio>
   </syn-radio-group>
+
   <syn-button type="submit" variant="filled">Submit</syn-button>
 </form>
 <style>
-  .custom-validity {
+  #components-syn-radio--invalid {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--syn-spacing-large);
   }
   syn-button {
     align-self: flex-start;

package/data/layers/examples/component/component:syn-range.md

@@ -49,30 +49,32 @@ Use the disabled attribute to disable a range.
 The invalid status is used to warn the user that the input is invalid. As range validation is not supported by the browser, you will need to implement your own validation logic.
 
 ```html
-<form class="custom-validity">
+<form
+  onsubmit="
+    event.preventDefault();
+    event.stopPropagation();
+  "
+  id="components-syn-range--invalid"
+>
   <syn-range
     help-text="This is an error text"
     id="range-invalid"
     max="100"
     min="0"
     value="50"
-  >
-  </syn-range>
-  <syn-button type="submit">Submit</syn-button>
-</form>
-<script type="module">
-  document.querySelector("form").addEventListener("submit", (e) => {
-    e.preventDefault();
-  });
+  ></syn-range>
+  <script type="module">
+    const range = document.querySelector("#range-invalid");
+    range.setCustomValidity("Please enter a valid value");
+  </script>
 
-  const range = document.querySelector("#range-invalid");
-  range.setCustomValidity("Please enter a valid value");
-</script>
+  <syn-button type="submit" variant="filled">Submit</syn-button>
+</form>
 <style>
-  .custom-validity {
+  #components-syn-range--invalid {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--syn-spacing-large);
   }
   syn-button {
     align-self: flex-start;

package/data/layers/examples/component/component:syn-select.md

@@ -250,19 +250,26 @@ Use the size attribute to change a select’s size. Note that size does not appl
 The invalid status is used to warn the user that the Select is invalid. For example, if the entry of text is mandatory and nothing has been entered.
 
 ```html
-<form class="custom-validity">
+<form
+  onsubmit="
+    event.preventDefault();
+    event.stopPropagation();
+  "
+  id="components-syn-select--invalid"
+>
   <syn-select label="Select one" required="">
     <syn-option value="option-1">Option 1</syn-option>
     <syn-option value="option-2">Option 2</syn-option>
     <syn-option value="option-3">Option 3</syn-option>
   </syn-select>
+
   <syn-button type="submit" variant="filled">Submit</syn-button>
 </form>
 <style>
-  .custom-validity {
+  #components-syn-select--invalid {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--syn-spacing-large);
   }
   syn-button {
     align-self: flex-start;

package/data/layers/examples/component/component:syn-switch.md

@@ -96,15 +96,22 @@ Add descriptive help text to a switch with the help-text attribute. For help tex
 The invalid status is used to warn the user that the Switch is invalid.
 
 ```html
-<form class="custom-validity">
+<form
+  onsubmit="
+    event.preventDefault();
+    event.stopPropagation();
+  "
+  id="components-syn-switch--invalid"
+>
   <syn-switch required="">Option</syn-switch>
+
   <syn-button type="submit" variant="filled">Submit</syn-button>
 </form>
 <style>
-  .custom-validity {
+  #components-syn-switch--invalid {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--syn-spacing-large);
   }
   syn-button {
     align-self: flex-start;

package/data/layers/examples/component/component:syn-textarea.md

@@ -112,19 +112,26 @@ Use the size attribute to change a textarea’s size.
 The invalid status is used to warn the user that the input is invalid. For example, if the entry of text is mandatory and nothing has been entered or if a text has been entered that does not have the correct format.
 
 ```html
-<form class="custom-validity">
+<form
+  onsubmit="
+    event.preventDefault();
+    event.stopPropagation();
+  "
+  id="components-syn-textarea--invalid"
+>
   <syn-textarea
     placeholder="Type something"
     help-text="This textarea is required."
     required=""
   ></syn-textarea>
+
   <syn-button type="submit" variant="filled">Submit</syn-button>
 </form>
 <style>
-  .custom-validity {
+  #components-syn-textarea--invalid {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--syn-spacing-large);
   }
   syn-button {
     align-self: flex-start;

package/data/layers/full/component/component:syn-button/components/button-group.styles.ts

@@ -0,0 +1,66 @@
+import { css } from 'lit';
+
+export default css`
+  /* stylelint-disable no-descending-specificity */
+  /*
+   * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
+   * This means buttons aren't always direct descendants of the button group, thus we can't target them with the
+   * ::slotted selector. To work around this, the button group component does some magic to add these special classes to
+   * buttons and we style them here instead.
+   */
+  :host([data-syn-button-group__button--first]:not([data-syn-button-group__button--last])) .button {
+    border-end-end-radius: 0;
+    border-start-end-radius: 0;
+  }
+
+  :host([data-syn-button-group__button--inner]) .button {
+    border-radius: 0;
+  }
+
+  :host([data-syn-button-group__button--last]:not([data-syn-button-group__button--first])) .button {
+    border-end-start-radius: 0;
+    border-start-start-radius: 0;
+  }
+
+  /* All except the first */
+  :host([data-syn-button-group__button]:not([data-syn-button-group__button--first])) {
+    margin-inline-start: calc(-1 * var(--syn-input-border-width));
+  }
+
+  /* Add a visual separator between solid buttons */
+  :host([data-syn-button-group__button]:not([data-syn-button-group__button--first]):not([data-syn-button-group__button--radio]):not([variant='filled']):not(:hover)) .button::after {
+    border-left: solid 1px rgb(128 128 128 / 33%);
+    bottom: 0;
+    content: '';
+    inset-inline-start: 0;
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    mix-blend-mode: multiply;
+    position: absolute;
+    top: 0;
+  }
+
+  /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
+  :host([data-syn-button-group__button--hover]) {
+    z-index: 1;
+  }
+
+  /* Focus and checked are always on top */
+  :host([data-syn-button-group__button--focus]),
+  :host([data-syn-button-group__button][checked]) {
+    z-index: 2;
+  }
+
+  /* #392: Button Groups */
+  :host([data-syn-button-group__button--inner]) .button--filled.button {
+    border-left-color: var(--syn-panel-background-color);
+    border-right-color: var(--syn-panel-background-color);
+  }
+
+  :host([data-syn-button-group__button--first]:not([data-syn-button-group__button--last])) .button--filled.button {
+    border-right-color: var(--syn-panel-background-color);
+  }
+
+  :host([data-syn-button-group__button--last]:not([data-syn-button-group__button--first])) .button--filled.button {
+    border-left-color: var(--syn-panel-background-color);
+  }
+`;