Skip to content

Commit

Permalink
Feat/toggle group improvements (#507)
Browse files Browse the repository at this point in the history 
* fix: storybook singleSelect story

* style: css adaptions

* refactor: adapt variant prop

* feat: add story with icons

* feat: selected buttons get solid icons

* fix: build, format, lint, adapt tests

* fix: stories; selected icon initially solid

* fix: adapt snapshot

* docs: add _beta_ badge in Toggle Group stories

* refactor: default border; adapt disabled border

* feat: implement kebab case events

* refactor: rename prop boxType: string to fullWidth: boolean

* fix: replace 'secondary' with 'white-background'

* refactor: drop toggle-button stories

* refactor: add icon stories

* feat: add prop colorScheme; add stories colorScheme

* refactor: add aria-label to icon-only

* feat: move border from toggle-group to toggle-button

* fix: remove scaleChange from .mdx

* refactor: rename prop 'variant' to 'background'; make 'white' default background

* refactor: change values of prop 'colorScheme' to 'color' and 'momochrome'

* refactor: reduce stories

* feat: add storybook description _de and _en

* refactor: make 'regular' the default size

* refactor: rename/reactivate toggle-group stories; drop toggle-button stories (mdx.x)

* style: format

Co-authored-by: Arturo <ac@iconstorm.com>
  • Loading branch information
@ChrisPaj
ChrisPaj and Arturo authored Oct 20, 2021
1 parent 759754e commit 0121f44
Show file tree
Hide file tree
Showing 20 changed files with 620 additions and 862 deletions.
22 changes: 11 additions & 11 deletions packages/components/src/components/toggle-button/__snapshots__/toggle-button.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`Toggle Button snapshots black color scheme 1`] = `
<scale-toggle-button color-scheme="black" icon-position="before" toggle-button-id="toggle-button-2">
<mock:shadow-root>
<button aria-description="deselected" class="toggle-button toggle-button--black toggle-button--icon-before toggle-button--large toggle-button--primary" id="toggle-button-2" part="toggle-button large primary toggle-button--icon-before black" type="button">
<button aria-description="deselected" class="toggle-button toggle-button--black toggle-button--border toggle-button--icon-before toggle-button--regular toggle-button--secondary" id="toggle-button-2" part="toggle-button regular secondary toggle-button--icon-before black border" type="button">
<slot></slot>
</button>
</mock:shadow-root>
Expand All @@ -14,7 +14,7 @@ exports[`Toggle Button snapshots black color scheme 1`] = `
exports[`Toggle Button snapshots default props 1`] = `
<scale-toggle-button icon-position="before" toggle-button-id="toggle-button-0">
<mock:shadow-root>
<button aria-description="deselected" class="toggle-button toggle-button--icon-before toggle-button--large toggle-button--light toggle-button--primary" id="toggle-button-0" part="toggle-button large primary toggle-button--icon-before light" type="button">
<button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--regular toggle-button--secondary" id="toggle-button-0" part="toggle-button regular secondary toggle-button--icon-before color border" type="button">
<slot></slot>
</button>
</mock:shadow-root>
Expand All @@ -25,7 +25,7 @@ exports[`Toggle Button snapshots default props 1`] = `
exports[`Toggle Button snapshots disabled 1`] = `
<scale-toggle-button disabled="" icon-position="before" size="large" toggle-button-id="toggle-button-3">
<mock:shadow-root>
<button aria-description="deselected" class="toggle-button toggle-button--icon-before toggle-button--large toggle-button--light toggle-button--primary" disabled="" id="toggle-button-3" part="toggle-button large primary toggle-button--icon-before light" type="button">
<button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--large toggle-button--secondary" disabled="" id="toggle-button-3" part="toggle-button large secondary toggle-button--icon-before color border" type="button">
<slot></slot>
</button>
</mock:shadow-root>
Expand All @@ -39,42 +39,42 @@ exports[`Toggle Button snapshots iconAfter 1`] = `
<style>
color:red
</style>
<button aria-description="deselected" class="toggle-button toggle-button--icon-after toggle-button--large toggle-button--left toggle-button--light toggle-button--primary" id="toggle-button-7" part="toggle-button large primary toggle-button--icon-after left light" type="button">
<button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-after toggle-button--left toggle-button--regular toggle-button--secondary" id="toggle-button-7" part="toggle-button regular secondary toggle-button--icon-after left color border" type="button">
<slot></slot>
</button>
</mock:shadow-root>
Test
<scale-icon-action-search size="24"></scale-icon-action-search>
<scale-icon-action-search size="22"></scale-icon-action-search>
</scale-toggle-button>
`;

exports[`Toggle Button snapshots iconBefore 1`] = `
<scale-toggle-button icon-position="before" radius="right" toggle-button-id="toggle-button-6">
<mock:shadow-root>
<button aria-description="deselected" class="toggle-button toggle-button--icon-before toggle-button--large toggle-button--light toggle-button--primary toggle-button--right" id="toggle-button-6" part="toggle-button large primary toggle-button--icon-before right light" type="button">
<button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--regular toggle-button--right toggle-button--secondary" id="toggle-button-6" part="toggle-button regular secondary toggle-button--icon-before right color border" type="button">
<slot></slot>
</button>
</mock:shadow-root>
<scale-icon-action-search size="24"></scale-icon-action-search>
<scale-icon-action-search size="22"></scale-icon-action-search>
Test
</scale-toggle-button>
`;

exports[`Toggle Button snapshots iconOnly 1`] = `
<scale-toggle-button icon-position="after" radius="both" selected="" toggle-button-id="toggle-button-5">
<mock:shadow-root>
<button aria-description="selected" aria-pressed="" class="toggle-button toggle-button--both toggle-button--icon-after toggle-button--large toggle-button--light toggle-button--primary toggle-button--selected" id="toggle-button-5" part="toggle-button large primary toggle-button--icon-after selected both light" type="button">
<button aria-description="selected" aria-pressed="" class="toggle-button toggle-button--border toggle-button--both toggle-button--color toggle-button--icon-after toggle-button--regular toggle-button--secondary toggle-button--selected" id="toggle-button-5" part="toggle-button regular secondary toggle-button--icon-after selected both color border" type="button">
<slot></slot>
</button>
</mock:shadow-root>
<scale-icon-action-search size="24"></scale-icon-action-search>
<scale-icon-action-search selected="true" size="22"></scale-icon-action-search>
</scale-toggle-button>
`;

exports[`Toggle Button snapshots regular size secondary 1`] = `
<scale-toggle-button icon-position="before" size="regular" toggle-button-id="toggle-button-1" variant="secondary">
<mock:shadow-root>
<button aria-description="deselected" class="toggle-button toggle-button--icon-before toggle-button--light toggle-button--regular toggle-button--secondary" id="toggle-button-1" part="toggle-button regular secondary toggle-button--icon-before light" type="button">
<button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--regular toggle-button--secondary" id="toggle-button-1" part="toggle-button regular secondary toggle-button--icon-before color border" type="button">
<slot></slot>
</button>
</mock:shadow-root>
Expand All @@ -85,7 +85,7 @@ exports[`Toggle Button snapshots regular size secondary 1`] = `
exports[`Toggle Button snapshots selected 1`] = `
<scale-toggle-button icon-position="before" selected="" size="xs" toggle-button-id="toggle-button-4">
<mock:shadow-root>
<button aria-description="selected" aria-pressed="" class="toggle-button toggle-button--icon-before toggle-button--light toggle-button--primary toggle-button--selected toggle-button--xs" id="toggle-button-4" part="toggle-button xs primary toggle-button--icon-before selected light" type="button">
<button aria-description="selected" aria-pressed="" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--secondary toggle-button--selected toggle-button--xs" id="toggle-button-4" part="toggle-button xs secondary toggle-button--icon-before selected color border" type="button">
<slot></slot>
</button>
</mock:shadow-root>
Expand Down
42 changes: 22 additions & 20 deletions packages/components/src/components/toggle-button/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,30 +7,32 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ---------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------- | -------------- |
| `ariaDescriptionTranslation` | `aria-description-translation` | a11y text for getting meaningful value. `$buttonNumber` and `$selected` are template variables and will be replaces by their corresponding properties. | `string` | `'$selected'` |
| `ariaLabel` | `aria-label` | (optional) aria-label attribute needed for icon-only buttons | `string` | `undefined` |
| `ariaLangDeselected` | `aria-lang-deselected` | (optional) translation of 'deselected | `string` | `'deselected'` |
| `ariaLangSelected` | `aria-lang-selected` | (optional) translation of 'selected | `string` | `'selected'` |
| `colorScheme` | `color-scheme` | (optional) background color scheme of a selected button | `"dark" \| "light"` | `'light'` |
| `disabled` | `disabled` | (optional) If `true`, the button is disabled | `boolean` | `false` |
| `iconOnly` | `icon-only` | (optional) Button type | `boolean` | `false` |
| `iconPosition` | `icon-position` | (optional) Icon position related to the label | `"after" \| "before"` | `'before'` |
| `position` | `position` | (optional) position within group | `number` | `undefined` |
| `radius` | `radius` | (optional) set the border-radius left, right or both | `"both" \| "left" \| "right"` | `null` |
| `selected` | `selected` | (optional) If `true`, the button is selected | `boolean` | `false` |
| `size` | `size` | (optional) The size of the button | `"large" \| "regular" \| "small" \| "xs"` | `'large'` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `toggleButtonId` | `toggle-button-id` | (optional) toggle button's id | `string` | `undefined` |
| `variant` | `variant` | (optional) Button variant | `"primary" \| "secondary"` | `'primary'` |
| Property | Attribute | Description | Type | Default |
| ---------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ | -------------- |
| `ariaDescriptionTranslation` | `aria-description-translation` | a11y text for getting meaningful value. `$buttonNumber` and `$selected` are template variables and will be replaces by their corresponding properties. | `string` | `'$selected'` |
| `ariaLabel` | `aria-label` | (optional) aria-label attribute needed for icon-only buttons | `string` | `undefined` |
| `ariaLangDeselected` | `aria-lang-deselected` | (optional) translation of 'deselected | `string` | `'deselected'` |
| `ariaLangSelected` | `aria-lang-selected` | (optional) translation of 'selected | `string` | `'selected'` |
| `background` | `background` | (optional) Button background | `"grey" \| "white"` | `'white'` |
| `colorScheme` | `color-scheme` | (optional) background color scheme of a selected button | `"color" \| "monochrome"` | `'color'` |
| `disabled` | `disabled` | (optional) If `true`, the button is disabled | `boolean` | `false` |
| `hideBorder` | `hide-border` | (optional) set the border-radius left, right or both | `boolean` | `undefined` |
| `iconOnly` | `icon-only` | (optional) Button type | `boolean` | `false` |
| `iconPosition` | `icon-position` | (optional) Icon position related to the label | `"after" \| "before"` | `'before'` |
| `position` | `position` | (optional) position within group | `number` | `undefined` |
| `radius` | `radius` | (optional) set the border-radius left, right or both | `"both" \| "left" \| "neither" \| "right"` | `null` |
| `selected` | `selected` | (optional) If `true`, the button is selected | `boolean` | `false` |
| `size` | `size` | (optional) The size of the button | `"large" \| "regular" \| "small" \| "xs"` | `'regular'` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `toggleButtonId` | `toggle-button-id` | (optional) toggle button's id | `string` | `undefined` |


## Events

| Event | Description | Type |
| ------------ | ------------------------------ | ------------------------------------------------- |
| `scaleClick` | Emitted when button is clicked | `CustomEvent<{ id: string; selected: boolean; }>` |
| Event | Description | Type |
| ------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
| `scale-click` | Emitted when button is clicked | `CustomEvent<{ id: string; selected: boolean; }>` |
| `scaleClick` | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<{ id: string; selected: boolean; }>` |


----------------------------------------------
Expand Down
Loading

0 comments on commit 0121f44

Please sign in to comment.