Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(sbb-radio-button, sbb-radio-button-panel): implement native form support #3160

Merged
merged 35 commits into from
Nov 19, 2024

Conversation

TomMenga
Copy link
Contributor

@TomMenga TomMenga commented Oct 18, 2024

This PR Closes #3035

For reviewers, a quick summary of the changes:

  • Implement the form-associated-mixin stuff
  • Add the possibility to use radio-buttons outside of a group. This means that most of the group handling logic, like the tabindex and the select/deselect, have been moved to the radio-button (precisely to radio-button-form-associated-mixin)

TODOS:

  • Discuss sbb-radio-button-group value preservation ✅

BREAKING CHANGE: Removed SbbRadioButtonGroupEventDetail from the change, input and didChange events of the sbb-radio-button-group.
As an alternative to event.detail.value use radioButtonGroup.value

@TomMenga TomMenga changed the title feat(sbb-radio-button, sbb-radio-button-panel): implement native form support feat(sbb-radio-button, sbb-radio-button-panel): implement native form support [WIP] Oct 18, 2024
@github-actions github-actions bot added the pr: peer review required A peer review is required for this pull request label Oct 18, 2024
@TomMenga TomMenga added the pr: lead review required A lead review is required for this pull request label Oct 18, 2024
@github-actions github-actions bot temporarily deployed to pr3160 October 18, 2024 14:06 Inactive
@github-actions github-actions bot temporarily deployed to pr3160-diff October 18, 2024 14:07 Inactive
@github-actions github-actions bot temporarily deployed to pr3160 November 14, 2024 08:32 Inactive
@github-actions github-actions bot temporarily deployed to pr3160-diff November 14, 2024 08:33 Inactive
Copy link
Contributor

@jeripeierSBB jeripeierSBB left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thank you for your great effort!

# Conflicts:
#	src/elements/radio-button/radio-button-group/radio-button-group.spec.ts
#	src/elements/radio-button/radio-button-panel/radio-button-panel.spec.ts
#	src/elements/radio-button/radio-button/radio-button.spec.ts
@TomMenga TomMenga merged commit e113c6a into main Nov 19, 2024
16 checks passed
@TomMenga TomMenga deleted the feat/radio-button-form-native branch November 19, 2024 11:07
kyubisation pushed a commit that referenced this pull request Dec 11, 2024
🤖 I have created a release *beep* *boop*
---


##
[2.0.0](v1.14.0...v2.0.0)
(2024-12-11)


### ⚠ BREAKING CHANGES

* react is now a peer dependency of our react package.
* **sbb-image:** Removed `caption`, `copyright`, `copyrightHolder`
attributes; We removed the caption and the copyright from the component
to improve the usage flexibility of the `sbb-image`. The consumer is now
responsible for providing them (see the `sbb-image` readme to know
more).
* **sbb-image:** Removed `borderRadius`, `aspectRatio` attributes. Use
the utility classes instead (see the `sbb-image` readme to know more).
Removed the `--sbb-image-border-radius` CSS var from the `sbb-image`.
Alternatively, use the `border-radius` CSS property.
* **sbb-teaser-hero:** Removed `image-src`, `image-alt` attributes.
Removed `chip` slot. Consumers can slot an `sbb-image` and add overlay
elements on top of it (see the `sbb-teaser-hero` readme to know more).
* `willOpen`, `didOpen`, `willClose`, `didClose`, `willStick`,
`didStick`, `willUnstick` and `didUnstick` events no longer bubble.
* **sbb-alert:** The link properties (`linkContent`, `href`, `target`,
`rel`, `accessibilityLabel`) of the `sbb-alert` have been removed.
Consumers have to slot a `<sbb-link>` into the unnamed content slot.
* **sbb-loading-indicator:** The `sbb-loading-indicator` component no
longer supports the `circle` variant, to achieve this look use
`sbb-loading-indicator-circle` instead. For any other case where it is
used in its `window` variant just remove the `variant` property as it is
no longer needed.
* **sbb-tertiary-button:** `sbb-tertiary-button` was renamed to
`sbb-accent-button`
* **sbb-header:** removed the `logo` slot and the default `sbb-logo`
from the `sbb-header`. Alternatively, add the `sbb-header-logo` CSS
class to the logo or to an `<a>`-element containing the logo and use the
default slot. To align the logo to the right, use a spacer element with
the `sbb-header-spacer` CSS class applied. For more information, see
`sbb-header` docs.
* remove deprecated `didChange` events from `sbb-checkbox`,
`sbb-checkbox-panel`, `sbb-toggle-check`, `sbb-select`, `sbb-toggle` and
`sbb-datepicker`. Use `change` event as alternative.
* **sbb-mini-button:** the `SbbMiniButtonBaseElement` is used only in
the `sbb-mini-button-component`, so it can be safely removed to avoid
redundant code.
* **sbb-datepicker:** This refactoring introduces multiple breaking
changes to the datepicker:
- DateAdapter: return value for invalid dates changed from undefined to
    null
    - Datepicker: removed functions `getAvailableDate()` and
    `isDateAvailable()`
    - Datepicker: moved functions `findPreviousAvailableDate()` and
`findNextAvailableDate()` into `SbbDatepickerElement` and removed all
    params but `date`
    - Datepicker: removed properties `dateParser` and `format`, as
    alternative use custom DateAdapter
- Datepicker: `now` property newly accepts `null` instead of `undefined`
- Datepicker: removed methods `getValueAsDate()` and `setValueAsDate()`.
    Use getter/setter `valueAsDate` instead.
* **sbb-dialog, sbb-link:** Removed the `word-break: break-word;` CSS
rule from lyne components. They will follow the default [break
rules](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break).
Impacted components are: `sbb-dialog-content`, `sbb-link` and variants;
* **sbb-file-selector:** The `sbb-file-selector` has been split into two
components based on the values of the `variant` property. The `files`
property has now `Readonly<File>[]` type instead than `File[]` to not
allow the direct modification of the inner `File` properties. Changes:
- the `variant` property has been removed from the `sbb-file-selector`
component;
- the `sbb-file-selector` now corresponds to the old `default` variant;
- a new component named `sbb-file-selector-dropzone` has been created;
it corresponds to the old `dropzone` variant;
- the 'titleContent' property has been removed from the
`sbb-file-selector` (since it refers only to dropzone case);
    - the `files` property now returns a `Readonly<File>[]`;
    - the deprecated `getFiles()` method has been removed.
* **sbb-time-input:** `getValueAsDate()` and `setValueAsDate()` methods
of the `sbb-time-input` have been replaced by getter/setter
`valueAsDate`.
* **sbb-alert, sbb-alert-group:** The deprecated `dismissalRequested`
event and `requestDismissal()` method of `sbb-alert` have been removed.
The `sbb-alert` handles its closing and DOM removal on his own. If the
closing should be prevented, the `willClose` event can be canceled. The
`didDismissAlert` of the `sbb-alert-group` has been removed. As
alternative, consumers can listen to the `didClose` event of an
`sbb-alert`.
* **sbb-form-field:** The `getInputElement()` method of the
`sbb-form-field` has been removed. Use `inputElement` property as
alternative.
* **sbb-option,sbb-autocomplete-grid-option:** `active` property from
`sbb-option` and `sbb-autocomplete-grid-option` has been removed
* Several deprecated core functionality has been removed.
    - dom.js `getDocumentWritingMode()` removed
    - dom.js `getLocalName()` removed
    - eventing.js `formElementHandlerAspect()` removed
    - eventing.js `HandlerRepository`, `HandlerAspectParams` and
    `HandlerAspect` removed
    - mixins.js `SbbFocusableDisabledActionMixin` removed
    - observers.js completely removed (containing
    `NodeIntersectionObserver`, `AgnosticIntersectionObserver`,
`NodeMutationObserver`, `AgnosticMutationObserver`, `NodeResizeObserver`
    and `AgnosticResizeObserver`)
* **sbb-train-formation:** The `hide-wagen-label` property of the
`sbb-train-formation` was removed. Now it automatically doesn't show the
label if no label is set on all the wagons. The i18n
`i18nClosedCompartmentLabel()` method doesn't take `wagonNumber` as an
argument anymore but is a constant now. Additionally, there are some
visual changes:
- `sbb-train-wagon`: The `ouccpancy` property doesn't default to `none`
anymore but to `null`. Please replace the currently undefined occupancy
    property with the value `none`.
    - `sbb-train-wagon`: Previously for the locomotive the label was not
    displayed, but now it would, as soon as there is one provided
- `sbb-train-formation`: The inline padding (left / right) was removed
    but can be set by CSS variable. See documentation.
* **sbb-radio-button, sbb-radio-button-panel:** Removed
`SbbRadioButtonGroupEventDetail` from the `change`, `input` and
`didChange` events of the `sbb-radio-button-group`. As an alternative to
`event.detail.value` use `radioButtonGroup.value`
* waitForEvent() method was removed in favor of using EventSpy class
* **sbb-chip-label:** sbb-chip has been renamed to sbb-chip-label.
* Previously the `disabledInteractive` property had to be used along
with the `disabled` property. With this change, either `disabled` or
`disabledInteractive` should be used.
* **sbb-teaser-hero, sbb-teaser-paid:** `sbb-teaser-paid` was removed
and integrated in `sbb-teaser-hero`. Replacing the component / selector
should be enough, as the API remains the same. `sbb-teaser-hero` moved
from `@sbb-esta/experimental` into `@sbb-esta/elements` package,
therefore imports need to be adapted.

### Features

* add sbb-icon-list styles
([#3038](#3038))
([d081288](d081288))
* **datepicker:** add size s
([#3006](#3006))
([b75c4c5](b75c4c5))
* introduce button form support
([#3170](#3170))
([eeb7a0a](eeb7a0a))
* keep action elements focusable when disabled
([#3040](#3040))
([a9410ba](a9410ba))
* provide lean context config
([#3233](#3233))
([0e2a847](0e2a847))
* provide scrollbar and table styles as CSS classes
([#3285](#3285))
([839c84e](839c84e)),
closes
[#3271](#3271)
* **sbb-autocomplete:** introduce size s
([#3020](#3020))
([aa55e7f](aa55e7f))
* **sbb-calendar, sbb-datepicker-toggle:** allow choosing initial
calendar view
([#2990](#2990))
([7c8a690](7c8a690)),
closes
[#2822](#2822)
* **sbb-container:** support background-expanded for images
([#3004](#3004))
([298b335](298b335))
* **sbb-container:** support for background image
([#2999](#2999))
([ff68e28](ff68e28))
* **sbb-file-selector:** implement native form support
([#3085](#3085))
([449ee6d](449ee6d))
* **sbb-file-selector:** split file-selector variants in separate
components
([#3198](#3198))
([7527030](7527030))
* **sbb-flip-card:** add flip event and isFlipped getter
([#2988](#2988))
([b912dac](b912dac))
* **sbb-form-field:** introduce size s
([#2995](#2995))
([9abb131](9abb131))
* **sbb-header:** introduce active state
([#3154](#3154))
([ffdeec4](ffdeec4))
* **sbb-header:** introduce size s
([#3047](#3047))
([cd60922](cd60922))
* **sbb-icon:** provide compatibility with sbb-angular
([#2971](#2971))
([3c4e4b0](3c4e4b0)),
closes
[#2746](#2746)
* **sbb-image:** support overlapping `sbb-chip-label`
([#3200](#3200))
([a59064e](a59064e))
* **sbb-journey-summary:** provide a11y footpath property
([#3104](#3104))
([05c6d1a](05c6d1a))
* **sbb-lead-container:** add spacing class support for notification
([#3019](#3019))
([2f4c817](2f4c817)),
closes
[#2932](#2932)
* **sbb-link-list-anchor:** component implementation
([#2987](#2987))
([d81a565](d81a565))
* **sbb-map-container:** allow config of sticky offset on mobile
([#3092](#3092))
([520d812](520d812)),
closes
[#3091](#3091)
* **sbb-mini-button-group:** component implementation
([#2959](#2959))
([e732593](e732593))
* **sbb-paginator:** add disabled property
([#3130](#3130))
([d43f64c](d43f64c))
* **sbb-paginator:** add sbb-compact-paginator component variant
([#3142](#3142))
([2f3dc21](2f3dc21))
* **sbb-paginator:** initial implementation
([#2982](#2982))
([8306362](8306362))
* **sbb-radio-button, sbb-radio-button-panel:** implement native form
support
([#3160](#3160))
([e113c6a](e113c6a))
* **sbb-select:** implement native form support
([#3101](#3101))
([b9156ab](b9156ab))
* **sbb-select:** introduce size s
([#3011](#3011))
([b614923](b614923))
* **sbb-selection-expansion-panel:** introduce size s
([#3030](#3030))
([a04b5b4](a04b5b4))
* **sbb-slider:** implement native form support
([#3071](#3071))
([ad35f2f](ad35f2f))
* **sbb-stepper:** add size 's'
([#3026](#3026))
([6c965c5](6c965c5))
* **sbb-sticky-bar:** introduce controllable slide in and out animation
([11884da](11884da)),
closes
[#3072](#3072)
* **sbb-teaser-hero, sbb-teaser-paid:** merge components and move into
elements package
([#2984](#2984))
([2b3f13e](2b3f13e))
* **sbb-teaser-product:** initial implementation
([#2976](#2976))
([79601d2](79601d2))
* **sbb-time-input:** add size 's'
([#3018](#3018))
([375bdad](375bdad))
* **sbb-timetable-row:** provide a11y footpaths
([#3048](#3048))
([cf9e70f](cf9e70f))
* **sbb-train-formation:** introduce new types and refactoring
([#3199](#3199))
([8eb7ae6](8eb7ae6))
* **table:** introduce table size xs
([#3077](#3077))
([9701f84](9701f84))


### Bug Fixes

* assign correct dependency versions for published packages
([#3102](#3102))
([ed99ce9](ed99ce9)),
closes
[#3100](#3100)
* cleanup deprecated core functionality
([#3219](#3219))
([4b129c4](4b129c4))
* fix inert mechanism for overlays
([#2986](#2986))
([92992d2](92992d2)),
closes
[#2969](#2969)
* fix list colors
([#3126](#3126))
([44c2810](44c2810)),
closes
[#3123](#3123)
* fix type of form associated controls
([#3242](#3242))
([cbf839c](cbf839c)),
closes
[#3238](#3238)
* fix width breakpoints of SbbMediaMatcherController
([#3226](#3226))
([f3b192c](f3b192c))
* improve handling of animation events for zero duration
([#3284](#3284))
([6da37fc](6da37fc))
* introduce disabledInteractive property and revert focusing disabled
actions in general
([#3096](#3096))
([74b3e6f](74b3e6f))
* opening and close events no longer bubble
([#3278](#3278))
([eabc4ca](eabc4ca))
* **option-base:** use data-active instead of active attribute
([#3055](#3055))
([92cf0ca](92cf0ca))
* prevent using HTMLElement in SSR context
([#3107](#3107))
([333e90e](333e90e))
* provide correct react typings
([#3269](#3269))
([8e0be99](8e0be99))
* provide jsdom support for focus trap mechanism
([#3113](#3113))
([57179c1](57179c1))
* remove deprecated `didChange` events where possible
([#3253](#3253))
([da64d5d](da64d5d))
* respect disabled interactive elements in focus trap
([#3108](#3108))
([fb0a1bb](fb0a1bb)),
closes
[#3109](#3109)
* **sbb-alert, sbb-alert-group:** remove dismissal event and method
([#3216](#3216))
([4acede6](4acede6))
* **sbb-autocomplete, sbb-autocomplete-grid:** avoid form submission on
enter press
([#3243](#3243))
([fe5b0a9](fe5b0a9)),
closes
[#3239](#3239)
* **sbb-calendar:** fix disabled month selection on wide view
([#3195](#3195))
([f7ae7ea](f7ae7ea))
* **sbb-calendar:** fix month selection on wide view
([#3192](#3192))
([ecfd50d](ecfd50d))
* **sbb-container:** remove relative positioning for non-image case
([#3024](#3024))
([d0d928f](d0d928f))
* **sbb-datepicker-toggle:** fix datepicker toggle empty state
synchronization
([#3032](#3032))
([cae910b](cae910b))
* **sbb-datepicker:** remove deprecated methods and properties
([#3247](#3247))
([ad6b19f](ad6b19f))
* **sbb-dialog:** fix resizing flickering
([#3065](#3065))
([06aa927](06aa927)),
closes
[#3063](#3063)
* **sbb-expansion-panel-header:** fix height if disabled
([#3059](#3059))
([64eca9f](64eca9f))
* **sbb-flip-card:** fix accessibility issues
([#3000](#3000))
([1f107a0](1f107a0)),
closes
[#2983](#2983)
* **sbb-flip-card:** fix animation
([#3001](#3001))
([9885dfc](9885dfc))
* **sbb-flip-card:** fix card summary image position
([#3254](#3254))
([38c4cc5](38c4cc5))
* **sbb-flip-card:** support disabled animation
([#2998](#2998))
([fbb6ca6](fbb6ca6))
* **sbb-flip-card:** use type button to avoid accidental form submission
([#3002](#3002))
([25dbd78](25dbd78))
* **sbb-form-field:** fix disabled state for borderless variant
([#2994](#2994))
([c31cc89](c31cc89))
* **sbb-form-field:** fix textarea bottom padding
([#2997](#2997))
([1540f46](1540f46))
* **sbb-form-field:** remove deprecated `getInputElement()` method
([#3221](#3221))
([23d1fea](23d1fea))
* **sbb-form-field:** update floating label on programmatic changes
([#3277](#3277))
([7b49f3f](7b49f3f)),
closes
[#3274](#3274)
* **sbb-icon:** ensure sbb-angular compatibility
([#3081](#3081))
([ef4b587](ef4b587))
* **sbb-image:** fix skipLqip mode
([#3131](#3131))
([4519006](4519006))
* **sbb-image:** improve default image cdn config
([#3060](#3060))
([546cfd8](546cfd8))
* **sbb-image:** introduce css property to configure object-fit
([#3134](#3134))
([5a4ae41](5a4ae41)),
closes
[#3133](#3133)
* **sbb-loading-indicator:** center component into his box
([#3144](#3144))
([22978f6](22978f6))
* **sbb-map-container:** improve support for tablet devices
([#3214](#3214))
([b1e75ee](b1e75ee)),
closes
[#3091](#3091)
* **sbb-mini-button:** remove useless base class
([#3257](#3257))
([ce8c318](ce8c318))
* **sbb-option,sbb-autocomplete-grid-option:** remove deprecated
`active` property
([#3220](#3220))
([bb62e75](bb62e75))
* **sbb-overlay:** fix padding block
([#3028](#3028))
([6b95be6](6b95be6))
* **sbb-pearl-chain:** fix spacing of bullet points
([#3066](#3066))
([0f10796](0f10796)),
closes
[#3064](#3064)
* **sbb-popover:** ensure correct trigger connection after hydration
([#3016](#3016))
([5e59b8f](5e59b8f)),
closes
[#3012](#3012)
[#3014](#3014)
* **sbb-radio-group:** avoid focusing disabled radios
([#3125](#3125))
([e4745c4](e4745c4))
* **sbb-radio-group:** disable focus when disabling radio
([#3116](#3116))
([6453b6b](6453b6b))
* **sbb-select:** fix display value in SSR context
([#3027](#3027))
([f733b38](f733b38))
* **sbb-select:** improve connected label handling
([#3229](#3229))
([0c41fb2](0c41fb2))
* **sbb-tab-group:** correctly select a new tab if it is 'active'
([#3251](#3251))
([ed975f7](ed975f7))
* **sbb-teaser, sbb-teaser-product:** allow screen readers to navigate
the content
([#3250](#3250))
([487faa3](487faa3))
* **sbb-teaser:** allow teaser usage in flexible layouts
([#3140](#3140))
([a51507b](a51507b)),
closes
[#3136](#3136)
* **sbb-teaser:** css variable typo
([#3143](#3143))
([d3e4fb3](d3e4fb3))
* **sbb-time-input:** create get/set for valueAsDate
([#2244](#2244))
([7d39928](7d39928))
* **sbb-toggle:** avoid console error on checked option click
([#3034](#3034))
([94fa2b6](94fa2b6))
* **sbb-toggle:** fix pill position on value change and initial
rendering
([#3015](#3015))
([bd03798](bd03798)),
closes
[#3013](#3013)
* **step-list:** fix border radius of step list elements
([#3036](#3036))
([cf26d07](cf26d07))
* switch to standard decorators and tighten property types
([#3121](#3121))
([e61bca5](e61bca5))
* warn about nested action elements
([#3058](#3058))
([5b1a823](5b1a823))


### Documentation

* fix link in the contributing guideline
([#3283](#3283))
([16464fb](16464fb))
* fix package names
([#3282](#3282))
([2364424](2364424))
* fix SASS link in getting started docs
([#3151](#3151))
([692a72d](692a72d))
* **sbb-autocomplete-grid:** fix urls in readme.md
([#2979](#2979))
([7aa916f](7aa916f))
* **sbb-card:** cleanup stories and visual tests
([#3225](#3225))
([dd8d644](dd8d644))
* standardize todos in code
([a3d0b51](a3d0b51))
* **teaser-product:** fixed broken link in documentation
([#3029](#3029))
([f7e9807](f7e9807))


### Code Refactoring

* add SbbMediaMatcherController
([#3205](#3205))
([39fa565](39fa565))
* change react to a peer dependency
([1e806ed](1e806ed))
* fix scss mixed declarations
([#2947](#2947))
([ca22eda](ca22eda))
* remove async modifier from willUpdate
([#3223](#3223))
([30292e9](30292e9))
* remove dvh/dvw backwards compatibility
([#3228](#3228))
([ef10abb](ef10abb))
* remove font-smoothing
([#3052](#3052))
([489ef28](489ef28))
* remove obsolete `getLocalName()`
([#3110](#3110))
([f349463](f349463))
* remove obsolete index.ts files
([#3147](#3147))
([837106d](837106d))
* replace [rtl] and [ltr] selectors with :dir
([#3084](#3084))
([164e3bc](164e3bc))
* **sbb-alert:** remove sbb-link from shadow DOM
([#3270](#3270))
([8197bf1](8197bf1))
* **sbb-chip-label:** rename chip to chip-label
([#3188](#3188))
([4b2123d](4b2123d))
* **sbb-header:** removed 'logo' slot
([#3230](#3230))
([0f0066d](0f0066d))
* **sbb-image:** add utility classes for border-radius and aspect-ratio
([#3200](#3200))
([a59064e](a59064e))
* **sbb-image:** extract caption and copyright from the component
([#3200](#3200))
([a59064e](a59064e))
* **sbb-loading-indicator:** split variants into two components and add
missing sizes
([#3211](#3211))
([d450f49](d450f49))
* **sbb-teaser-hero:** adapt to the new `sbb-image` usage
([#3200](#3200))
([a59064e](a59064e))
* **sbb-teaser, sbb-teaser-product, sbb-teaser-product-static:** adapt
to the new `sbb-image` usage
([#3200](#3200))
([a59064e](a59064e))
* **sbb-tertiary-button:** rename tertiary to accent button
([#3260](#3260))
([449b04d](449b04d))
* use --sbb-hover-image-brightness token for images
([#3045](#3045))
([75b44c2](75b44c2))
* use inert attribute instead of property hack
([#3099](#3099))
([fdd2862](fdd2862))
* use lit observers
([#3074](#3074))
([3e554eb](3e554eb))


### Styles

* **sbb-dialog, sbb-link:** removed `break-word` css rule
([#3231](#3231))
([edcdec1](edcdec1))


### Miscellaneous Chores

* release 1.7.0
([b486bb4](b486bb4))
* release 2.0.0
([5e6087f](5e6087f))


### Tests

* remove obsolete waitForEvent() method
([#3210](#3210))
([dba0322](dba0322))

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
diff-available pr: lead review required A lead review is required for this pull request pr: peer review approved Pull request has been approved by a peer review pr: visual review required preview-available
Projects
None yet
Development

Successfully merging this pull request may close these issues.

story(sbb-radio-button): implement native form support
4 participants