UI component switch toggle #924
Conversation
Angi-Kinas
force-pushed
the
UI-component-switch-toggle
branch
from
b8a3599
to
e8e3b52
Compare
|
Affected libs:
|
|
📷 Screenshots are here! |
|
GitHub Pages links:
|
| @Output() selectedValue = new EventEmitter<SwitchToggleOption>() | ||
|
|
||
| onChange(selectedOption: SwitchToggleOption) { | ||
| this.options.forEach((option) => { |
There was a problem hiding this comment.
Small possible improvement here (nothing critical): as you can't select several options at the same time, you don't need to loop over the whole array, you can stop as soon as you've found the selected element.
To do this, you can use the array.find method.
There was a problem hiding this comment.
I tried this and it works! I'm just wondering how it sets the other options.checked to false? Maybe it does not need to because as you already said, it is not possible to select multiple at a time. But how does the component know which to style differently if all options.checked are true?
There was a problem hiding this comment.
I didn't read the Angular Material toggle implementation, but most probably they rely on some behavior (native radio button or custom one) to make sure that if one option is checked, the other ones are unchecked. It almost never makes sense to explicitly set an option to unchecked, unless you allow your toggle switch to be in a an "all unchecked" state.
| @Component({ | ||
| selector: 'gn-ui-switch-toggle', | ||
| templateUrl: './switch-toggle.component.html', | ||
| styleUrls: ['./switch-toggle.component.css'], | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| }) |
There was a problem hiding this comment.
This component should be created as standalone.
| @@ -46,6 +48,7 @@ import { ImageInputComponent } from './image-input/image-input.component' | |||
| CopyTextButtonComponent, | |||
| CheckboxComponent, | |||
| SearchInputComponent, | |||
| SwitchToggleComponent, | |||
There was a problem hiding this comment.
All the changes in this file won't be needed anymore when switching to standalone component.
change logic, remove imports in ui-inputs module
|
Thank you for the review @LHBruneton-C2C :-) |
Description
This PR introduces a new UI Input component "SwitchToggleComponent", which is able to toggle between options similar to radio buttons.
The component should be accessible with the keyboard. Please verify this in the Storybook.
Screenshots
Quality Assurance Checklist
breaking changelabelbackport <release branch>label