♻️ refactor(select): create new component dropdown (#1353)

* Create PR for #1349 * ♻️ refactor(select): create option component (#1356) * Create PR for #1354 * add new component option * add new component option * fix a11y issues * add interface of the component * add output for visuals * adjust ci * update gitignore * update base images * adjust colors and sass vars * update base images * merge --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <[email protected]> Co-authored-by: hirsch88 <[email protected]> * ♻️ refactor(select): create new component option-list (#1357) * Create PR for #1355 * add option list component * update base images * add labelledby for a11y * add changeset --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <[email protected]> Co-authored-by: hirsch88 <[email protected]> * add first dropdown draft * update spinner * refactor in to utils * format files * update with prop options * add docs * format files * support testing * chore: Merge branch 'main' into refactor/issue-1349 * adjust component testing * update component testing * add component test for dropdown * update dropdown * update dropdown * update dropdown * autocomplete * rename * update dropdown * update dropdown * format files * add a11y test * add viusal tests * update base images * format files * update angular output * add testing lib migration * update docs * add required * fix tests * fix tests * update docs * chores * create angular e2e test * create angular e2e test * fix doc styles * update base images * update docs * fix chip hover * remove old styles * adjust invalid and disabled with chips * fix z-index * update multiple always with checkbox and improve form submit * update multiple always with checkbox and improve form submit * hide native select for a11y * fix checkbox issue * add log for visual type * fix visual * update base images * update base images * finish auto-fill * fix safari autofill --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <[email protected]> Co-authored-by: hirsch88 <[email protected]>
baloise · Apr 17, 2024 · d327a34 · d327a34
1 parent 0f7cae7
commit d327a34
Show file tree

Hide file tree

Showing 138 changed files with 5,527 additions and 91 deletions.
diff --git a/.changeset/cuddly-horses-teach.md b/.changeset/cuddly-horses-teach.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**dropdown**: add new component to replace bal-select
diff --git a/.changeset/modern-bags-worry.md b/.changeset/modern-bags-worry.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**option-list**: new child component of drop-down components. Option list component will be used by drop-down, combobox and autocomplete.
diff --git a/.changeset/ten-teachers-appear.md b/.changeset/ten-teachers-appear.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**option**: new child component of option-list. Option list component will be used by drop-down, combobox and autocomplete.
diff --git a/docs/stories/components/bal-dropdown/bal-dropdown.mdx b/docs/stories/components/bal-dropdown/bal-dropdown.mdx
@@ -0,0 +1,119 @@
+import { Canvas, Meta, Markdown } from '@storybook/blocks'
+import { Banner, Lead, PlaygroundBar, StoryHeading, Footer } from '../../../.storybook/blocks'
+import * as DropDownStories from './bal-dropdown.stories'
+
+<Meta of={DropDownStories} />
+
+<StoryHeading of={DropDownStories.Basic} hidden></StoryHeading>
+
+<Banner of={DropDownStories} />
+
+<Lead>**Drop-Down** components are used to gather user-provided information from a range of options.</Lead>
+
+The `bal-dropdown` component serves as a alternative to a traditional `<select>` element and is
+frequently paired with `bal-field`.
+
+<Canvas of={DropDownStories.Basic} sourceState="shown" className="has-visible-overflow" />
+
+<PlaygroundBar of={DropDownStories.Basic}></PlaygroundBar>
+
+{/* STORIES */}
+{/* ------------------------------------------------------ */}
+
+<StoryHeading of={DropDownStories.FieldControl}></StoryHeading>
+
+Combine the component with the `bal-field` components to add a label, validation message and more.
+
+<Canvas of={DropDownStories.FieldControl} className="has-visible-overflow" />
+
+{/* ------------------------------------------------------ */}
+
+<StoryHeading of={DropDownStories.Multiple}></StoryHeading>
+
+The **multiple** prop enables the capability for making multiple selections.
+
+<Canvas of={DropDownStories.Multiple} className="has-visible-overflow" />
+
+{/* ------------------------------------------------------ */}
+
+<StoryHeading of={DropDownStories.MultipleWithChips}></StoryHeading>
+
+Utilize the **chips** prop to showcase selected items as individual tags, which can be deselected.
+
+<Canvas of={DropDownStories.MultipleWithChips} className="has-visible-overflow" />
+
+{/* ------------------------------------------------------ */}
+
+<StoryHeading of={DropDownStories.Clearable}></StoryHeading>
+
+Applying the **clearable** prop will show a cross in the dropdown to clear the current value of the component.
+
+<Canvas of={DropDownStories.Clearable} className="has-visible-overflow" />
+
+{/* ------------------------------------------------------ */}
+
+<StoryHeading of={DropDownStories.Loading}></StoryHeading>
+
+Applying the **loading** prop will indicate that the component is busy.
+
+<Canvas of={DropDownStories.Loading} className="has-visible-overflow" />
+
+{/* ------------------------------------------------------ */}
+
+<StoryHeading of={DropDownStories.Invalid}></StoryHeading>
+
+Applying the **invalid** prop will indicate a incorrect user input.
+
+<Canvas of={DropDownStories.Invalid} className="has-visible-overflow" />
+
+{/* ------------------------------------------------------ */}
+
+<StoryHeading of={DropDownStories.Disabled}></StoryHeading>
+
+Applying the **disabled** prop will prevent a user from interacting with the component.
+
+<Canvas of={DropDownStories.Disabled} className="has-visible-overflow" />
+
+{/* ------------------------------------------------------ */}
+
+<StoryHeading of={DropDownStories.FormReset}></StoryHeading>
+
+The component can be used for server-side forms.
+
+<Canvas of={DropDownStories.FormReset} className="has-visible-overflow" />
+
+{/* ------------------------------------------------------ */}
+
+<StoryHeading of={DropDownStories.Autocomplete}></StoryHeading>
+
+The component supports **autocomplete** so that the browser can fill out the form control.
+
+<Canvas of={DropDownStories.Autocomplete} className="has-visible-overflow" />
+
+{/* ------------------------------------------------------ */}
+
+## Component API
+
+import api from './api.md?raw'
+
+<Markdown>{api}</Markdown>
+
+import balOptionApi from '../bal-option/api.md?raw'
+
+<Markdown>{balOptionApi}</Markdown>
+
+## Integration
+
+import integration from '../../snippets/integration.md?raw'
+
+<Markdown>{integration}</Markdown>
+
+import theming from './theming.md?raw'
+
+<Markdown>{theming}</Markdown>
+
+import testing from './testing.md?raw'
+
+<Markdown>{testing}</Markdown>
+
+<Footer />
diff --git a/docs/stories/components/bal-dropdown/bal-dropdown.stories.ts b/docs/stories/components/bal-dropdown/bal-dropdown.stories.ts
@@ -0,0 +1,166 @@
+import type { JSX } from '@baloise/ds-core'
+import type { Meta } from '@storybook/html'
+import { props, withRender, withComponentControls, StoryFactory } from '../../utils'
+
+type Args = JSX.BalDropdown & { content: string }
+
+const meta: Meta<Args> = {
+  title: 'Components/Form/DropDown',
+  argTypes: {
+    ...withComponentControls({ tag: 'bal-dropdown' }),
+  },
+  args: {
+    placeholder: 'Pick a color',
+  },
+  ...withRender(
+    ({ ...args }) => `<bal-dropdown ${props(args)}>
+  <bal-option value="green" label="Green">Green</bal-option>
+  <bal-option value="purple" label="Purple">Purple</bal-option>
+  <bal-option value="yellow" label="Yellow">Yellow</bal-option>
+  <bal-option value="red" label="Red">Red</bal-option>
+</bal-dropdown>`,
+  ),
+}
+
+export default meta
+
+/**
+ * STORIES
+ * ------------------------------------------------------
+ */
+
+const Story = StoryFactory<Args>(meta)
+
+export const Basic = Story()
+
+export const FieldControl = Story({
+  args: {
+    value: 'purple',
+  },
+  ...withRender(
+    ({ ...args }) => `<bal-field>
+    <bal-field-label>Color</bal-field-label>
+    <bal-field-control>
+      <bal-dropdown ${props(args)}>
+        <bal-option value="green" label="Green">Green</bal-option>
+        <bal-option value="purple" label="Purple">Purple</bal-option>
+        <bal-option value="yellow" label="Yellow">Yellow</bal-option>
+        <bal-option value="red" label="Red">Red</bal-option>
+      </bal-dropdown>
+    </bal-field-control>
+    <bal-field-message color="hint">Field Message</bal-field-message>
+</bal-field>`,
+  ),
+})
+
+export const Multiple = Story({
+  args: {
+    value: ['green', 'red'],
+    multiple: true,
+  },
+})
+
+export const MultipleWithChips = Story({
+  args: {
+    value: ['green', 'red'],
+    multiple: true,
+    chips: true,
+  },
+})
+
+export const Clearable = Story({
+  args: {
+    value: ['yellow'],
+    clearable: true,
+  },
+})
+
+export const Loading = Story({
+  args: {
+    loading: true,
+  },
+})
+
+export const Invalid = Story({
+  args: {
+    invalid: true,
+  },
+})
+
+export const Disabled = Story({
+  args: {
+    disabled: true,
+  },
+})
+
+export const FormReset = Story({
+  args: {
+    value: 'purple',
+  },
+  ...withRender(
+    ({ ...args }) => `<form action="https://www.w3schools.com/action_page.php" target="_blank">
+  <bal-form-grid>
+    <bal-form-col>
+      <bal-field required>
+        <bal-field-control>
+          <bal-dropdown ${props(args)}>
+            <bal-option value="green" label="Green">Green</bal-option>
+            <bal-option value="purple" label="Purple">Purple</bal-option>
+            <bal-option value="yellow" label="Yellow">Yellow</bal-option>
+            <bal-option value="red" label="Red">Red</bal-option>
+          </bal-dropdown>
+        </bal-field-control>
+      </bal-field>
+    </bal-form-col>
+  </bal-form-grid>
+  <bal-button-group>
+    <bal-button element-type="submit" color="primary">Submit</bal-button>
+    <bal-button data-testid="button-reset" element-type="reset" color="link">Reset</bal-button>
+  </bal-button-group>
+</form>`,
+  ),
+})
+
+export const Autocomplete = Story({
+  args: {
+    name: 'country',
+    autocomplete: 'country',
+    placeholder: 'Pick your nationality',
+  },
+  ...withRender(
+    ({ ...args }) => `<form action="https://www.w3schools.com/action_page.php" target="_blank">
+  <bal-form-grid>
+    <bal-form-col>
+      <bal-field>
+        <bal-field-label>First Name</bal-field-label>
+        <bal-field-control>
+          <bal-input name="firstName" placeholder="Enter your firstname" autocomplete="given-name"></bal-input>
+        </bal-field-control>
+      </bal-field>
+    </bal-form-col>
+    <bal-form-col>
+      <bal-field>
+        <bal-field-label>Last Name</bal-field-label>
+        <bal-field-control>
+          <bal-input name="lastName" placeholder="Enter your lastname" autocomplete="family-name"></bal-input>
+        </bal-field-control>
+      </bal-field>
+    </bal-form-col>
+    <bal-form-col>
+      <bal-field>
+        <bal-field-label>Country</bal-field-label>
+        <bal-field-control>
+          <bal-dropdown ${props(args)}>
+            <bal-option value="CH" label="Switzerland">Switzerland</bal-option>
+            <bal-option value="DE" label="Germany">Germany</bal-option>
+            <bal-option value="IT" label="Italy">Italy</bal-option>
+          </bal-dropdown>
+        </bal-field-control>
+      </bal-field>
+    </bal-form-col>
+  </bal-form-grid>
+  <input type="reset" value="Reset" />
+  <input type="submit" value="Submit" />
+</form>`,
+  ),
+})
diff --git a/docs/stories/components/bal-dropdown/testing.md b/docs/stories/components/bal-dropdown/testing.md
@@ -0,0 +1,32 @@
+## Testing
+
+The Baloise Design System provides a collection of custom cypress commands for the components. Moreover, some basic cypress commands like `should` or `click` have been overridden to work with the components.
+
+<a class="sb-unstyled button is-primary" href="../?path=/docs/development-testing--documentation">Go to testing guide</a>
+
+<!-- START: human documentation -->
+
+```ts
+describe('Dropdown', () => {
+  it('should ...', () => {
+    cy.getByPlaceholder('Pick a color').click()
+    cy.getByRole('option', { name: 'Red' }).click()
+
+    cy.getByPlaceholder('Pick a color').should('be.disabled')
+    cy.getByPlaceholder('Pick a color').should('have.value', 'Red')
+  })
+})
+```
+
+<!-- END: human documentation -->
+
+
+### Selectors
+
+| Selector           | Element                              |
+| ------------------ | ------------------------------------ |
+| `dropdown.input`   | Native input element.                |
+| `dropdown.options` | Select option.                       |
+| `dropdown.trigger` | Trigger to open and close the popup. |
+| `dropdown.chips`   | Multi select tag .                   |
+
diff --git a/docs/stories/components/bal-dropdown/theming.md b/docs/stories/components/bal-dropdown/theming.md
@@ -0,0 +1,46 @@
+## Theming
+
+The component can be customization by changing the CSS variables.
+
+<a class="sb-unstyled button is-primary" href="../?path=/docs/development-theming--page">Go to theming guide</a>
+
+<!-- START: human documentation -->
+
+
+
+<!-- END: human documentation -->
+
+### Variables
+
+| Variable                                                               |
+| ---------------------------------------------------------------------- |
+| `--bal-dropdown-control-background`                                    |
+| `--bal-dropdown-control-background-hover`                              |
+| `--bal-dropdown-control-background-invalid`                            |
+| `--bal-dropdown-control-background-disabled`                           |
+| `--bal-dropdown-control-input-background`                              |
+| `--bal-dropdown-control-native-input-background`                       |
+| `--bal-dropdown-control-native-input-background-hover`                 |
+| `--bal-dropdown-control-input-inverted-footer-background`              |
+| `--bal-dropdown-control-input-inverted-footer-background-hover`        |
+| `--bal-dropdown-control-input-multiple-background`                     |
+| `--bal-dropdown-control-input-multiple-background-read-only-selection` |
+| `--bal-dropdown-control-input-option-background`                       |
+| `--bal-dropdown-control-input-option-background-selected`              |
+| `--bal-dropdown-control-input-option-background-focused`               |
+| `--bal-dropdown-control-input-option-background-hover`                 |
+| `--bal-dropdown-control-border-radius`                                 |
+| `--bal-dropdown-popover-border-color`                                  |
+| `--bal-dropdown-control-border-color`                                  |
+| `--bal-dropdown-control-border-color-focused`                          |
+| `--bal-dropdown-control-border-color-hover`                            |
+| `--bal-dropdown-control-border-color-invalid`                          |
+| `--bal-dropdown-control-border-color-disabled`                         |
+| `--bal-dropdown-control-border-color-focus-within`                     |
+| `--bal-dropdown-option-border-top-color`                               |
+| `--bal-dropdown-popover-empty-text-color`                              |
+| `--bal-dropdown-control-text-color`                                    |
+| `--bal-dropdown-control-text-color-focused`                            |
+| `--bal-dropdown-input-text-color-disabled`                             |
+| `--bal-dropdown-control-inverted-footer-native-input-text-color`       |
+| `--bal-dropdown-option-content-label-text-color`                       |
diff --git a/docs/stories/components/bal-option-list/testing.md b/docs/stories/components/bal-option-list/testing.md
@@ -0,0 +1,12 @@
+## Testing
+
+The Baloise Design System provides a collection of custom cypress commands for the components. Moreover, some basic cypress commands like `should` or `click` have been overridden to work with the components.
+
+<a class="sb-unstyled button is-primary" href="../?path=/docs/development-testing--documentation">Go to testing guide</a>
+
+<!-- START: human documentation -->
+
+
+
+<!-- END: human documentation -->
+
diff --git a/docs/stories/components/bal-option-list/theming.md b/docs/stories/components/bal-option-list/theming.md