feat: add toggle element #7
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
renet
commented
Aug 4, 2021
renet
commented
Aug 4, 2021
borisdiakur
reviewed
Aug 4, 2021
| border-radius: 1rem; | ||
| border: 0; | ||
| display: inline-flex; | ||
| height: 2rem; |
There was a problem hiding this comment.
I noticed a difference in height between ld-toggle and button.ld-toggle. First has a computed height of 33px while the latter has a height of 32px. If you give the ld-toggle a font-size: 0;, the issue will be resolved. I think this is related to using display: inline-block; somewhere.
There was a problem hiding this comment.
If you use component-internal CSS custom props for height and width, then a consumer of the lib could easily customize the size of the toggle, if necessary. You could write something like this:
.ld-toggle {
--ld-toggle-height-md: 2rem;
--ld-toggle-width-md: 3.375rem;
--ld-toggle-height-lg: 2.5rem;
--ld-toggle-width-lg: 4.1875rem;
...And then you could set the size of the knob using relative units. Something like this:
height: 86%;
width: calc(50% + 0.0625rem);There was a problem hiding this comment.
I tried your last suggestion, and it looks almost good but not quite when the large toggle is checked. But it binds the knob to the size-ratio of the outer element. Also, do we really want to give devs the possibility to customize the toggle size? Nevertheless moving the size to custom vars makes it a little easier to maintain.
There was a problem hiding this comment.
display: block; resolved the first issue. Good catch!
There was a problem hiding this comment.
The second issue was resolved by custom variables. But I had to use static values for the knob size as the ratio of the toggle is not stable. I used only one custom var each for width/height, overriding these for the "large" and "with icons" variants of the toggle.
|
|
||
| &:where([aria-checked='true']) { | ||
| .ld-toggle__knob { | ||
| transform: translateX(calc(1.375rem)); |
There was a problem hiding this comment.
Here you could use either a relative unit or a CSS custom prop with calc. Something like translateX(calc(0.5 * var(--ld-toggle-width))) or simply using some percentage value.
| render() { | ||
| return ( | ||
| <Host> | ||
| <button |
There was a problem hiding this comment.
I believe a11y tests will fail as the button doesn't have any text content nor an aria-label. Can you check?
I know that one would usually use a label with the toggle, but maybe we can give it an aria-label="toggle"? I would then definitely make sure that a screen reader still reads out what we expect. I would expect something like "toggle checked" in that case. But aria-label is usually kind of aggressive and may overwrite other things...
There was a problem hiding this comment.
Damn, I'm sorry. I just noticed that we need to use a checkbox implementation for the toggle as otherwise the CSS component doesn't make really much sense here.
|
|
||
| Please refer to the [ld-label](components/ld-label/) docs for more information on the label component. | ||
|
|
||
| ### With label and input message |
There was a problem hiding this comment.
I noticed a visual difference between the Web Component and the CSS Component implementations in this example. Can you check, please?
There was a problem hiding this comment.
It's due to the min-width property of the child selector of the ld-label element (.ld-label--left>:not(ld-input-message):not(.ld-input-message), .ld-label--right>:not(ld-input-message):not(.ld-input-message)). In case of the ld-checkbox you overrode this explicitly. Wouldn't it be cleaner not to handle this problem inside the ld-toggle, but rather in ld-label?
There was a problem hiding this comment.
Would you like to dig into this and make the change in ld-label?
There was a problem hiding this comment.
As with the new <input type="checkbox /> implementation this happened for both, the web- and the css-component, I fixed this the same way you did with ld-checkbox now. But I'll put a refactoring on my to-do list.
|
Coverage after merging feature/toggle into develop
Coverage Report
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
borisdiakur
pushed a commit
that referenced
this pull request
Aug 24, 2021
# 1.0.0-rc.1 (2021-08-24) ### Bug Fixes * **ld-notification:** animate notifications only once by preventing re-rendering with correct keys ([5430a34](5430a34)) * **ld-notification:** transition out last notification in queue ([09a5c78](09a5c78)) * invalid style (design review) ([#9](#9)) ([bc34676](bc34676)) * **label:** gap between label and input ([b1f01be](b1f01be)) * **ld-button:** aria disabled false should not prevent default behaviour ([da93a80](da93a80)) * **ld-button:** focus active states ([e4f3e33](e4f3e33)) * **ld-button:** focus state in secondary and ghost mode ([d17e91d](d17e91d)) * **ld-button:** increase css specificity for better interop with tailwind ([b20b7df](b20b7df)) * **ld-button:** ocean theme focus state on touch device ([b891b5b](b891b5b)) * **ld-button:** prevent event propagation on aria disabled button click ([0e0da81](0e0da81)) * **ld-button:** spacings and colors ([7eee836](7eee836)) * **ld-button:** use transparent rich colors ([3a40600](3a40600)) * **ld-checkbox:** checked and disabled props must be applied after clone attributes ([804685a](804685a)) * **ld-heading:** increase css specificity for better interop with tailwind ([1b2b97e](1b2b97e)) * **ld-heading:** ld-heading should be display block by default ([6a51298](6a51298)) * **ld-input:** all focused inputs should have a white background ([b06de8f](b06de8f)) * **ld-input:** change bg color of dark input ([cc20a5b](cc20a5b)) * **ld-input:** fix input height ([e51f492](e51f492)) * **ld-input:** inherit min-height in multiline mode ([3e3e201](3e3e201)) * **ld-input:** make textarea take full height of its container ([6ed36a9](6ed36a9)) * **ld-input:** overflow on placeholder element ([a66f05d](a66f05d)) * **ld-input:** remove usage of unused custom css prop ([c5921e6](c5921e6)) * **ld-input:** use darker color for icons for more contrast ([4ed2db8](4ed2db8)) * **ld-notification:** screen reader now announces notifications correctly ([ce7f2c1](ce7f2c1)) * **ld-paragraph:** ld-paragraph should be display block by default ([a6cd566](a6cd566)) * **ld-select:** css custom props not available in popper ([bb091ef](bb091ef)) * **ld-select:** custom icon size and paddings ([3e211da](3e211da)) * **ld-select:** events ([730e755](730e755)) * **ld-select:** make arrow up and down behave just like with the native select ([f52f1c1](f52f1c1)) * **ld-select:** maximum call stack size exceeded error ([cbe7d70](cbe7d70)) * **ld-select:** more item vertical position ([64b71ca](64b71ca)) * **ld-select:** set theme class with js on popper ([8bfacdd](8bfacdd)) * **ld-select:** text ellipsis on trigger button ([429714e](429714e)) * **ld-select:** theming for ld-select css component ([b540fe9](b540fe9)) * **ld-select:** typeahead with none-matching query ([6eff101](6eff101)) * **ld-select:** use tether in place of popper ([b09e0d2](b09e0d2)) * **ld-select:** using touchend for click outside detection on mobile safari ([337e63c](337e63c)) * **ld-sr-live:** listen for events on window and use correct suffix ([c7e6a07](c7e6a07)) * **ld-sr-live:** remove console log calls ([64d4a9a](64d4a9a)) * **typography:** update line heights in design tokens ([32cd3a1](32cd3a1)) * **utils:** pass false attribute value as is ([3584956](3584956)) ### Features * **button:** disabled but focusable with aria-disabled ([daf58d8](daf58d8)) * **button:** implement button ([50d76c7](50d76c7)) * **input:** implement input ([058c0fb](058c0fb)) * **input:** input slots and aria-disabled support ([17861c8](17861c8)) * **ld-button:** on-brand and secondary-on-brand modes ([372a5e4](372a5e4)) * **ld-button:** progress button ([aefdf0b](aefdf0b)) * **ld-checkbox:** ld-checkbox component ([1c46911](1c46911)) * **ld-heading:** heading theming and coloring ([124b26f](124b26f)) * **ld-heading:** set aria-label on b headings implicitly ([c045ca3](c045ca3)) * **ld-input:** custom date picker icon for webkit browsers ([7fa79bd](7fa79bd)) * **ld-input:** custom time picker icon for webkit browsers ([2b92d5b](2b92d5b)) * **ld-input:** multiline mode ([0303f41](0303f41)) * **ld-input:** size prop ([530f2aa](530f2aa)) * **ld-input:** support for various input types ([3ea272d](3ea272d)) * **ld-loading:** implement loading indicator ([8d242a6](8d242a6)) * **ld-notification:** add in and out transitions ([f881d27](f881d27)) * **ld-notification:** implement notification component ([9511b39](9511b39)) * **ld-notification:** placement prop ([d109cbc](d109cbc)) * **ld-paragraph:** paragraph component ([64e812f](64e812f)) * **ld-radio:** radio button component ([775b834](775b834)) * **ld-select:** add caret icon to select trigger ([9e0b789](9e0b789)) * **ld-select:** clear selection with minus key ([a6e566e](a6e566e)) * **ld-select:** css component ([35e849e](35e849e)) * **ld-select:** dispatch input change blur events ([4e9acfd](4e9acfd)) * **ld-select:** implement clear button for multiselect ([6bf2919](6bf2919)) * **ld-select:** implement clear buttons for multiselect ([864ef69](864ef69)) * **ld-select:** implement focus states ([31246bb](31246bb)) * **ld-select:** implement keyboard navigation ([c1828c5](c1828c5)) * **ld-select:** implement scrollable options container ([a3b2ab0](a3b2ab0)) * **ld-select:** implement select component ([f8415c0](f8415c0)) * **ld-select:** implement select component ([e3dc119](e3dc119)) * **ld-select:** invalid prop and checkbox mode for multiselect ([ec46f6a](ec46f6a)) * **ld-select:** max rows ([a783c88](a783c88)) * **ld-select:** observe slot and create copy for popper ([f194521](f194521)) * **ld-select:** size prop ([0a5e3e3](0a5e3e3)) * **ld-select:** use hidden input on web component for standard form submissions ([17a673a](17a673a)) * **ld-theme:** ld-theme component and theming docs ([64fc5af](64fc5af)) * **ld-tooltip:** add tooltip component ([974450a](974450a)) * **shadows:** generate drop shadow css custom variables ([6b6dc95](6b6dc95)) * **tailwindcss:** generate and bundle tailwindcss preset ([eba2d1b](eba2d1b)) * add ld-bg-cells component ([9712d12](9712d12)) * add toggle element ([#7](#7)) ([6fd3b0b](6fd3b0b)) * import icons via Figma API ([44cffca](44cffca)) * **ld-select:** typeahead to focus an option ([240fed8](240fed8)) * **ld-select:** use virtual key and ref props ([14df7a5](14df7a5)) * **ld-select:** visual modes and customization options ([4c7f3b0](4c7f3b0)) * **react:** prop aliases ([4165e23](4165e23))
renet
pushed a commit
that referenced
this pull request
Aug 24, 2021
# 1.0.0-rc.1 (2021-08-24) ### Bug Fixes * **ld-notification:** animate notifications only once by preventing re-rendering with correct keys ([5430a34](5430a34)) * **ld-notification:** transition out last notification in queue ([09a5c78](09a5c78)) * invalid style (design review) ([#9](#9)) ([bc34676](bc34676)) * **label:** gap between label and input ([b1f01be](b1f01be)) * **ld-button:** aria disabled false should not prevent default behaviour ([da93a80](da93a80)) * **ld-button:** focus active states ([e4f3e33](e4f3e33)) * **ld-button:** focus state in secondary and ghost mode ([d17e91d](d17e91d)) * **ld-button:** increase css specificity for better interop with tailwind ([b20b7df](b20b7df)) * **ld-button:** ocean theme focus state on touch device ([b891b5b](b891b5b)) * **ld-button:** prevent event propagation on aria disabled button click ([0e0da81](0e0da81)) * **ld-button:** spacings and colors ([7eee836](7eee836)) * **ld-button:** use transparent rich colors ([3a40600](3a40600)) * **ld-checkbox:** checked and disabled props must be applied after clone attributes ([804685a](804685a)) * **ld-heading:** increase css specificity for better interop with tailwind ([1b2b97e](1b2b97e)) * **ld-heading:** ld-heading should be display block by default ([6a51298](6a51298)) * **ld-input:** all focused inputs should have a white background ([b06de8f](b06de8f)) * **ld-input:** change bg color of dark input ([cc20a5b](cc20a5b)) * **ld-input:** fix input height ([e51f492](e51f492)) * **ld-input:** inherit min-height in multiline mode ([3e3e201](3e3e201)) * **ld-input:** make textarea take full height of its container ([6ed36a9](6ed36a9)) * **ld-input:** overflow on placeholder element ([a66f05d](a66f05d)) * **ld-input:** remove usage of unused custom css prop ([c5921e6](c5921e6)) * **ld-input:** use darker color for icons for more contrast ([4ed2db8](4ed2db8)) * **ld-notification:** screen reader now announces notifications correctly ([ce7f2c1](ce7f2c1)) * **ld-paragraph:** ld-paragraph should be display block by default ([a6cd566](a6cd566)) * **ld-select:** css custom props not available in popper ([bb091ef](bb091ef)) * **ld-select:** custom icon size and paddings ([3e211da](3e211da)) * **ld-select:** events ([730e755](730e755)) * **ld-select:** make arrow up and down behave just like with the native select ([f52f1c1](f52f1c1)) * **ld-select:** maximum call stack size exceeded error ([cbe7d70](cbe7d70)) * **ld-select:** more item vertical position ([64b71ca](64b71ca)) * **ld-select:** set theme class with js on popper ([8bfacdd](8bfacdd)) * **ld-select:** text ellipsis on trigger button ([429714e](429714e)) * **ld-select:** theming for ld-select css component ([b540fe9](b540fe9)) * **ld-select:** typeahead with none-matching query ([6eff101](6eff101)) * **ld-select:** use tether in place of popper ([b09e0d2](b09e0d2)) * **ld-select:** using touchend for click outside detection on mobile safari ([337e63c](337e63c)) * **ld-sr-live:** listen for events on window and use correct suffix ([c7e6a07](c7e6a07)) * **ld-sr-live:** remove console log calls ([64d4a9a](64d4a9a)) * **typography:** update line heights in design tokens ([32cd3a1](32cd3a1)) * **utils:** pass false attribute value as is ([3584956](3584956)) ### Features * **button:** disabled but focusable with aria-disabled ([daf58d8](daf58d8)) * **button:** implement button ([50d76c7](50d76c7)) * **input:** implement input ([058c0fb](058c0fb)) * **input:** input slots and aria-disabled support ([17861c8](17861c8)) * **ld-button:** on-brand and secondary-on-brand modes ([372a5e4](372a5e4)) * **ld-button:** progress button ([aefdf0b](aefdf0b)) * **ld-checkbox:** ld-checkbox component ([1c46911](1c46911)) * **ld-heading:** heading theming and coloring ([124b26f](124b26f)) * **ld-heading:** set aria-label on b headings implicitly ([c045ca3](c045ca3)) * **ld-input:** custom date picker icon for webkit browsers ([7fa79bd](7fa79bd)) * **ld-input:** custom time picker icon for webkit browsers ([2b92d5b](2b92d5b)) * **ld-input:** multiline mode ([0303f41](0303f41)) * **ld-input:** size prop ([530f2aa](530f2aa)) * **ld-input:** support for various input types ([3ea272d](3ea272d)) * **ld-loading:** implement loading indicator ([8d242a6](8d242a6)) * **ld-notification:** add in and out transitions ([f881d27](f881d27)) * **ld-notification:** implement notification component ([9511b39](9511b39)) * **ld-notification:** placement prop ([d109cbc](d109cbc)) * **ld-paragraph:** paragraph component ([64e812f](64e812f)) * **ld-radio:** radio button component ([775b834](775b834)) * **ld-select:** add caret icon to select trigger ([9e0b789](9e0b789)) * **ld-select:** clear selection with minus key ([a6e566e](a6e566e)) * **ld-select:** css component ([35e849e](35e849e)) * **ld-select:** dispatch input change blur events ([4e9acfd](4e9acfd)) * **ld-select:** implement clear button for multiselect ([6bf2919](6bf2919)) * **ld-select:** implement clear buttons for multiselect ([864ef69](864ef69)) * **ld-select:** implement focus states ([31246bb](31246bb)) * **ld-select:** implement keyboard navigation ([c1828c5](c1828c5)) * **ld-select:** implement scrollable options container ([a3b2ab0](a3b2ab0)) * **ld-select:** implement select component ([f8415c0](f8415c0)) * **ld-select:** implement select component ([e3dc119](e3dc119)) * **ld-select:** invalid prop and checkbox mode for multiselect ([ec46f6a](ec46f6a)) * **ld-select:** max rows ([a783c88](a783c88)) * **ld-select:** observe slot and create copy for popper ([f194521](f194521)) * **ld-select:** size prop ([0a5e3e3](0a5e3e3)) * **ld-select:** use hidden input on web component for standard form submissions ([17a673a](17a673a)) * **ld-theme:** ld-theme component and theming docs ([64fc5af](64fc5af)) * **ld-tooltip:** add tooltip component ([974450a](974450a)) * **shadows:** generate drop shadow css custom variables ([6b6dc95](6b6dc95)) * **tailwindcss:** generate and bundle tailwindcss preset ([eba2d1b](eba2d1b)) * add ld-bg-cells component ([9712d12](9712d12)) * add toggle element ([#7](#7)) ([6fd3b0b](6fd3b0b)) * import icons via Figma API ([44cffca](44cffca)) * **ld-select:** typeahead to focus an option ([240fed8](240fed8)) * **ld-select:** use virtual key and ref props ([14df7a5](14df7a5)) * **ld-select:** visual modes and customization options ([4c7f3b0](4c7f3b0)) * **react:** prop aliases ([4165e23](4165e23))
github-actions bot
pushed a commit
that referenced
this pull request
Feb 9, 2022
# 1.0.0 (2022-02-09) ### Bug Fixes * **eleventy:** dynamic import of node-fetch ([162f48f](162f48f)) * **ld-button:** remove Safari button styles when type prop is used ([ffa69f6](ffa69f6)) * **ld-input:** cannot focus year on safari ([0c2137d](0c2137d)) * make disabled attributes work with false in react ([5a3ee62](5a3ee62)), closes [#229](#229) [#235](#235) * **clone-attributes:** determining attributes from props is unnecessary ([a0648ef](a0648ef)), closes [#190](#190) * **ld-button:** non-reflected props are not cloned as attributes ([b081be2](b081be2)) * **ld-button:** non-reflected props are not cloned as attributes ([658a838](658a838)) * **ld-button:** prop forwarding ([dfd53da](dfd53da)) * **ld-button:** prop forwarding ([e086a62](e086a62)) * **ld-button:** quick-fix anchor button not working in docs-page-nav ([1b7add7](1b7add7)) * **ld-button:** quick-fix anchor button not working in docs-page-nav ([7c1d388](7c1d388)) * **ld-button:** revert removal of hover media query ([c0cdc1d](c0cdc1d)) * **ld-button:** revert removal of hover media query ([02ba181](02ba181)) * **ld-checkbox:** prop forwarding and indeterminate state ([572e711](572e711)) * **ld-checkbox:** prop forwarding and indeterminate state ([e3274e6](e3274e6)) * **ld-icon:** keep xmlns string in icon assets for a better dx ([ffb144c](ffb144c)) * **ld-input:** change ld-input disabled background color to grey ([6fc32e0](6fc32e0)), closes [#214](#214) * **ld-input:** change ld-input disabled background color to grey ([8de9e7a](8de9e7a)), closes [#214](#214) * **ld-input:** hidden input ([690e495](690e495)) * **ld-input:** prop forwarding ([191e048](191e048)) * **ld-input:** submit associated form on return ([ec0332d](ec0332d)) * **ld-tabs:** show tabpanel according to preselected tab ([1428d3d](1428d3d)), closes [#179](#179) * **react:** add alternative approach for setting the asset path ([7b7f044](7b7f044)) * conditionally disconnect attribute observer ([84259b9](84259b9)) * **ld-input:** submit associated form on return ([f74d88c](f74d88c)) * clone attributes from component props instead of attributes ([b5d13f1](b5d13f1)) * conditionally disconnect attribute observer ([99f6494](99f6494)) * **ld-input:** remove unnecessary watch decorator on required prop ([c31237d](c31237d)) * **ld-radio:** prop forwarding ([5f7026b](5f7026b)) * **ld-select:** prop forwarding ([9273538](9273538)) * **ld-select:** update hidden inputs on attribute changes ([256c37c](256c37c)) * **ld-select:** update hidden inputs on attribute changes ([29f4680](29f4680)) * **ld-tabs:** show tabpanel according to preselected tab ([b52263f](b52263f)), closes [#179](#179) * clone attributes from component props instead of attributes ([d468293](d468293)) * remove unnecessary append child call ([8688ba6](8688ba6)) * **changelog:** remove redundant entries ([54a5a32](54a5a32)) * **changelog:** remove redundant entries ([f1bb6bc](f1bb6bc)) * **dist-custom-elements:** build custom elements bundle ([2a03561](2a03561)) * **dist-custom-elements:** build custom elements bundle ([8bf6210](8bf6210)) * **ld-button:** reset margin for safari ([58f0e3f](58f0e3f)) * **ld-checkbox:** emits input event on click from outside ([bf2985c](bf2985c)) * **ld-checkbox:** emits input event on click from outside ([f456f50](f456f50)) * **ld-checkbox:** remove redundant input event dispatch ([0e95969](0e95969)) * **ld-icon:** apply styles on slotted svg ([cded2ef](cded2ef)) * **ld-icon:** make sure shadow dom style element is not removed ([7cb5746](7cb5746)), closes [#124](#124) * **ld-icon:** replace icon instead of appending it on name change ([16605f0](16605f0)) * **ld-icon:** replace icon instead of appending it on name change ([90fbcfe](90fbcfe)) * **ld-input:** add box-sizing border-box to textarea ([dc689e4](dc689e4)) * **ld-input:** add box-sizing border-box to textarea ([31a60c1](31a60c1)) * **ld-input:** let textarea inherit max/min sizes ([6c80ffb](6c80ffb)) * **ld-input:** let textarea inherit max/min sizes ([60afed0](60afed0)) * **ld-notification:** center content vertically ([5b114fe](5b114fe)) * **ld-notification:** center content vertically ([99fd1bc](99fd1bc)) * **ld-option-internal:** disabled text color ([d6db1bc](d6db1bc)) * **ld-radio:** emits input event on click from outside ([c07d5a1](c07d5a1)) * **ld-radio:** emits input event on click from outside ([d465d2b](d465d2b)) * **ld-radio:** prop forwarding ([58daab5](58daab5)) * **ld-radio:** remove redundant input event dispatch ([b063726](b063726)) * **ld-select:** add focus inner method for click on label ([700da3b](700da3b)) * **ld-select:** add focus inner method for click on label ([cad4501](cad4501)) * **ld-select:** always set ignore slot changes to false on next tick ([06e4cd1](06e4cd1)) * **ld-select:** focus outline styles for Safari ([16c1f30](16c1f30)) * **ld-select:** focus outline styles for Safari ([86a3c3c](86a3c3c)) * **ld-select:** init ld-option-internal with up-to-date props ([6eb4216](6eb4216)) * **ld-select:** ld-select not opening up on mobile safari ([8eb01c3](8eb01c3)), closes [#122](#122) * **ld-select:** ld-select not opening up on mobile safari ([5762271](5762271)), closes [#122](#122) * **ld-select:** remove unnecessary settimeout for autofocus ([9fcd2c6](9fcd2c6)) * **ld-select:** use value instead of get attribute value ([7e6d98f](7e6d98f)) * **ld-select-popper:** use up-to-date css custom props ([626dfe2](626dfe2)) * **ld-toggle:** icon placement in safari ([3f0e35d](3f0e35d)) * **ld-toggle:** prop forwarding ([eb3d168](eb3d168)) * **ld-toggle:** prop forwarding ([bbf9a29](bbf9a29)) * **ld-toggle:** update to match current design ([8a5b800](8a5b800)) * **ld-typo:** apply code review suggestions ([1f87846](1f87846)) * **theming:** update success theme colors ([c8015db](c8015db)) * 1.0rem safari issue ([3b2bbfe](3b2bbfe)) * default color refs, allow non-default refs in tailwind preset ([0bd1849](0bd1849)) * properly create default colors, remove color variants ([0479741](0479741)) * **build:** export types ([c0d0a59](c0d0a59)) * **build:** export types ([e8dc84d](e8dc84d)) * **css-reset:** make css reset work in safari ([2b2d98d](2b2d98d)) * **engines:** allow node 14 and higher ([2ec2314](2ec2314)) * **engines:** allow node 14 and higher ([28d9040](28d9040)) * **l-heading:** theming selectors specifity ([81d1b27](81d1b27)) * **ld-bg-cells:** optimize svg assets ([080523c](080523c)) * **ld-bg-cells:** optimize svg assets ([f4cc3dd](f4cc3dd)) * **ld-button:** active states on safari ([2a1eaa5](2a1eaa5)) * **ld-button:** prevent event propagation on aria disabled button click ([0e0da81](0e0da81)) * **ld-button:** progress bar overflow issue on safari ([ad010bd](ad010bd)), closes [#32](#32) * **ld-button, ld-heading:** host style ([b1e90e6](b1e90e6)) * **ld-input:** button and icon styles ([f0eb0ac](f0eb0ac)) * **ld-input:** clean up styling ([8e2c462](8e2c462)) * **ld-input:** click event handler fired twice ([21b2274](21b2274)) * **ld-label:** focus inner input element on click (wip) ([ba22b1b](ba22b1b)) * **ld-notification:** animate notifications only once by preventing re-rendering with correct keys ([5430a34](5430a34)) * **ld-notification:** screen reader now announces notifications correctly ([ce7f2c1](ce7f2c1)) * **ld-notification:** transition out last notification in queue ([09a5c78](09a5c78)) * **ld-radio:** change selection with arrow buttons ([a071221](a071221)) * **ld-select:** apply props explicitly to make it work in vue ([a6fca8f](a6fca8f)) * **ld-select:** css component ([1a3bcab](1a3bcab)) * **ld-select:** custom popper class ([936f6d7](936f6d7)) * **ld-select:** custom trigger icon ([460de73](460de73)) * **ld-select:** form validation / event timing ([8a4a58e](8a4a58e)) * **ld-select:** mutation observer and click on disabled and focus outline ([d0428a3](d0428a3)) * **ld-select:** pinned mode ([63d0e41](63d0e41)) * **ld-select:** swap more indicator color and background-color ([c0e580b](c0e580b)) * **ld-sr-live:** use aria-relevant all to also announce first message ([5c607b7](5c607b7)) * **ld-tabs:** emit tab change event from within the ld-tabs component ([6b31d70](6b31d70)) * **ld-tooltip:** lighthouse issue buttons do not have an accessible name ([a8fb585](a8fb585)) * **ld-tooltip:** rename property id in order to prevent dom exception ([b623b18](b623b18)) * **reset:** apply reset to everything except examples ([b84d631](b84d631)) * **tailwindcss:** extend default spacings instead of replacing them ([3b9750d](3b9750d)) * **types:** annotate boolean prop types explicitly as booleans ([d18f141](d18f141)) * **types:** annotate boolean prop types explicitly as booleans ([c1e3b38](c1e3b38)) * **utils:** do not clone slot-attribute ([6e3673c](6e3673c)) * invalid style (design review) ([#9](#9)) ([bc34676](bc34676)) * TS error ([28e5794](28e5794)) * **label:** gap between label and input ([b1f01be](b1f01be)) * **ld-button:** aria disabled false should not prevent default behaviour ([da93a80](da93a80)) * **ld-button:** focus active states ([e4f3e33](e4f3e33)) * **ld-button:** focus state in secondary and ghost mode ([d17e91d](d17e91d)) * **ld-button:** increase css specificity for better interop with tailwind ([b20b7df](b20b7df)) * **ld-button:** ocean theme focus state on touch device ([b891b5b](b891b5b)) * **ld-button:** spacings and colors ([7eee836](7eee836)) * **ld-button:** use transparent rich colors ([3a40600](3a40600)) * **ld-checkbox:** checked and disabled props must be applied after clone attributes ([804685a](804685a)) * **ld-heading:** increase css specificity for better interop with tailwind ([1b2b97e](1b2b97e)) * **ld-heading:** ld-heading should be display block by default ([6a51298](6a51298)) * **ld-input:** all focused inputs should have a white background ([b06de8f](b06de8f)) * **ld-input:** change bg color of dark input ([cc20a5b](cc20a5b)) * **ld-input:** fix input height ([e51f492](e51f492)) * **ld-input:** inherit min-height in multiline mode ([3e3e201](3e3e201)) * **ld-input:** make textarea take full height of its container ([6ed36a9](6ed36a9)) * **ld-input:** overflow on placeholder element ([a66f05d](a66f05d)) * **ld-input:** remove usage of unused custom css prop ([c5921e6](c5921e6)) * **ld-input:** use darker color for icons for more contrast ([4ed2db8](4ed2db8)) * **ld-paragraph:** ld-paragraph should be display block by default ([a6cd566](a6cd566)) * **ld-select:** css custom props not available in popper ([bb091ef](bb091ef)) * **ld-select:** custom icon size and paddings ([3e211da](3e211da)) * **ld-select:** events ([730e755](730e755)) * **ld-select:** make arrow up and down behave just like with the native select ([f52f1c1](f52f1c1)) * **ld-select:** maximum call stack size exceeded error ([cbe7d70](cbe7d70)) * **ld-select:** more item vertical position ([64b71ca](64b71ca)) * **ld-select:** set theme class with js on popper ([8bfacdd](8bfacdd)) * **ld-select:** text ellipsis on trigger button ([429714e](429714e)) * **ld-select:** theming for ld-select css component ([b540fe9](b540fe9)) * **ld-select:** typeahead with none-matching query ([6eff101](6eff101)) * **ld-select:** use tether in place of popper ([b09e0d2](b09e0d2)) * **ld-select:** using touchend for click outside detection on mobile safari ([337e63c](337e63c)) * **ld-sr-live:** listen for events on window and use correct suffix ([c7e6a07](c7e6a07)) * **ld-sr-live:** remove console log calls ([64d4a9a](64d4a9a)) * **typography:** update line heights in design tokens ([32cd3a1](32cd3a1)) * **utils:** pass false attribute value as is ([3584956](3584956)) ### Features * **cloneAttributes:** test for name, exclude part ([caf5270](caf5270)) * **design-tokens:** add bin command to generate custom design tokens ([37cd41b](37cd41b)) * **design-tokens:** add bin command to generate custom design tokens ([2ea32c1](2ea32c1)) * **ld-button:** add ghost on brand variant ([032bc31](032bc31)) * **ld-button:** add ghost on brand variant ([2540246](2540246)) * **ld-button:** implicit form submit ([821c7ae](821c7ae)) * **ld-checkbox:** use shadow dom ([f4d6787](f4d6787)) * **ld-header:** add basic header component ([fa4b1c8](fa4b1c8)) * **ld-header:** add basic header component ([db51098](db51098)) * **ld-icon:** add hyperlink and copy icon ([77a058f](77a058f)), closes [#258](#258) [#259](#259) * **ld-input:** add parts ([180bd39](180bd39)) * **ld-input:** add resize prop ([fb30f1b](fb30f1b)) * **ld-input:** add resize prop ([8d699c0](8d699c0)), closes [#223](#223) * **ld-input:** autocomplete support for input field ([b88369f](b88369f)) * **ld-input:** make component fully themeable ([4507c5c](4507c5c)) * **ld-input-message:** add parts ([76ba14d](76ba14d)) * **ld-input-message:** add theme colors to icons ([8c4e768](8c4e768)) * **ld-label:** add parts ([97c7244](97c7244)) * **ld-label:** use up-to-date css custom props ([8d1c931](8d1c931)) * **ld-notice:** add text notice component ([b10ca2a](b10ca2a)) * **ld-notice:** remove bg color of error mode ([fbed5d6](fbed5d6)) * **ld-tablist:** change border color to match hover state ([23de1ac](23de1ac)) * add font-weight to design tokens ([b026440](b026440)) * unify event handling ([59b4e28](59b4e28)) * **ld-notification:** use shadow dom ([22cdd6d](22cdd6d)) * **ld-pagination:** add pagination component ([978a58e](978a58e)) * import border radii from Figma ([b344954](b344954)) * recursively auto-define children components ([3f7b305](3f7b305)), closes [#244](#244) * **ld-button:** add parts ([6d16834](6d16834)) * **ld-button, ld-input:** manipulate size attributes of slotted components ([ccc0271](ccc0271)) * **ld-heading:** add parts ([6a704fe](6a704fe)) * **ld-icon:** add parts ([91fa753](91fa753)) * **ld-input, ld-select:** hidden inputs inside form ([958937c](958937c)) * **ld-loading:** use new color vars ([c681698](c681698)) * **ld-notification:** add part focusable ([999f036](999f036)) * **ld-notification:** use up-to-date css custom props ([3abda92](3abda92)) * **ld-tabs:** add methods for switching tabs ([e6efa27](e6efa27)) * **ld-tabs:** add parts ([79592fb](79592fb)) * **ld-tabs:** scrollable tab list ([787c5ba](787c5ba)) * **ld-tabs:** support full width tabs ([4337569](4337569)) * **ld-tabs:** use new color vars ([ccbe7db](ccbe7db)) * **ld-theme:** replace component with global css classes ([b78df5f](b78df5f)) * **ld-tooltip:** use up-to-date css custom props ([9084bf3](9084bf3)) * add ld-typo component ([275a908](275a908)) * update design tokens and color vars ([44c3bc4](44c3bc4)) * **ld-toggle:** hidden input inside form ([43cb8e6](43cb8e6)) * **ld-toggle:** use up-to-date css custom props ([ced2d59](ced2d59)) * update tailwind preset, add sensitive colors ([0b7cfe0](0b7cfe0)) * **button:** disabled but focusable with aria-disabled ([daf58d8](daf58d8)) * **button:** implement button ([50d76c7](50d76c7)) * **input:** implement input ([058c0fb](058c0fb)) * **input:** input slots and aria-disabled support ([17861c8](17861c8)) * **ld-button:** on-brand and secondary-on-brand modes ([372a5e4](372a5e4)) * **ld-button:** progress button ([aefdf0b](aefdf0b)) * **ld-checkbox:** ld-checkbox component ([1c46911](1c46911)) * **ld-heading:** heading theming and coloring ([124b26f](124b26f)) * **ld-heading:** set aria-label on b headings implicitly ([c045ca3](c045ca3)) * **ld-input:** custom date picker icon for webkit browsers ([7fa79bd](7fa79bd)) * **ld-input:** custom time picker icon for webkit browsers ([2b92d5b](2b92d5b)) * **ld-input:** multiline mode ([0303f41](0303f41)) * **ld-input:** size prop ([530f2aa](530f2aa)) * **ld-input:** support for various input types ([3ea272d](3ea272d)) * **ld-label:** allow html content ([246352c](246352c)) * **ld-label:** allow html content ([9bbb125](9bbb125)) * **ld-loading:** implement loading indicator ([8d242a6](8d242a6)) * **ld-notification:** add in and out transitions ([f881d27](f881d27)) * **ld-notification:** implement notification component ([9511b39](9511b39)) * **ld-notification:** placement prop ([d109cbc](d109cbc)) * **ld-notification:** theming ([3f83255](3f83255)) * **ld-paragraph:** paragraph component ([64e812f](64e812f)) * **ld-radio:** radio button component ([775b834](775b834)) * **ld-select:** add caret icon to select trigger ([9e0b789](9e0b789)) * **ld-select:** clear selection with minus key ([a6e566e](a6e566e)) * **ld-select:** css component ([35e849e](35e849e)) * **ld-select:** dispatch input change blur events ([4e9acfd](4e9acfd)) * **ld-select:** implement clear button for multiselect ([6bf2919](6bf2919)) * **ld-select:** implement clear buttons for multiselect ([864ef69](864ef69)) * **ld-select:** implement focus states ([31246bb](31246bb)) * **ld-select:** implement keyboard navigation ([c1828c5](c1828c5)) * **ld-select:** implement scrollable options container ([a3b2ab0](a3b2ab0)) * **ld-select:** implement select component ([f8415c0](f8415c0)) * **ld-select:** implement select component ([e3dc119](e3dc119)) * **ld-select:** invalid prop and checkbox mode for multiselect ([ec46f6a](ec46f6a)) * **ld-select:** observe slot and create copy for popper ([f194521](f194521)) * **ld-select:** size prop ([0a5e3e3](0a5e3e3)) * **ld-select:** typeahead to focus an option ([240fed8](240fed8)) * **ld-select:** use up-to-date css custom props ([151edcb](151edcb)) * **ld-select:** use virtual key and ref props ([14df7a5](14df7a5)) * **ld-tabs:** tabs tablist tab tabpanellist tabpanel ([acc5964](acc5964)) * **ld-theme:** add theme colors as dynamic css custom props ([acc077f](acc077f)) * **shadows:** generate drop shadow css custom variables ([6b6dc95](6b6dc95)) * **tailwindcss:** generate and bundle tailwindcss preset ([eba2d1b](eba2d1b)) * add ld-bg-cells component ([9712d12](9712d12)) * add react bindings ([b1cc028](b1cc028)) * import icons via Figma API ([44cffca](44cffca)) * **ld-select:** max rows ([a783c88](a783c88)) * **ld-select:** use hidden input on web component for standard form submissions ([17a673a](17a673a)) * **ld-tooltip:** add tooltip component ([974450a](974450a)) * add toggle element ([#7](#7)) ([6fd3b0b](6fd3b0b)) * convert ld-input-message and ld-heading to shadow dom ([53e22aa](53e22aa)) * move alpha to colors, add disabled variant ([25b00f1](25b00f1)) * replace headings and paragraphs with ld-typo ([455f455](455f455)) * **ld-select:** visual modes and customization options ([4c7f3b0](4c7f3b0)) * **ld-theme:** ld-theme component and theming docs ([64fc5af](64fc5af)) * **react:** prop aliases ([4165e23](4165e23))
|
🎉 This PR is included in version 1.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Adds a new toggle/switch element.
Type of change
How Has This Been Tested?
Please describe the tests that you've added and run to verify your changes.
Provide instructions, so we can reproduce.
Please also list any relevant details for your test configuration.
Checklist: