mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00

Files

Pedro Lourenço 9555a2a09a feat(radio-group): remove radio-group-wrapper and convert to shadow DOM (#30835 )

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The radio-group's wrapper div is responsible for several issues that
have been reported, specially due to making it so that radio elements
are not direct children of radio-groups. Now it is also causing problems
on the OutSystems side.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
The solution involved:
- Removing the radio-group-wrapper div, which was first added as a
workaround to a Stencil issue where radio children would incorrectly
fire blur events on focus;
- Converting the radio-group into a shadow component as another
workaround to the Stencil issue;
- Adjusting the radio-group's styling to the new changes. 

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

2025-12-05 11:25:55 +00:00

4.6 KiB

Raw Permalink Blame History

Breaking Changes

This is a comprehensive list of the breaking changes introduced in the major version releases of Ionic Framework.

Versions

Version 9.x

Components
- Button
- Card
- Chip
- Grid

Components

Button

The border-radius of the ios and md button now defaults to 6px and 999px instead of 14px and 4px, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the shape to "soft" for md and override the --border-radius CSS variable for ios to 14px, or set it to a different value entirely.

Card

The border-radius of the ios and md card now defaults to 14px and 12px instead of 8px and 4px, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the shape to "soft", or override the --border-radius CSS variable to specify a different value.

Chip

The border-radius of the ios and md chip now defaults to 10px and 8px, respectively, instead of 16px in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the shape to "round", or override the --border-radius CSS variable to specify a different value.

Grid

The properties pull and push have been deprecated and no longer work. A similar look can be achieved with the newly added property order.

Radio Group

Converted ion-radio-group to use Shadow DOM.
If you were targeting the internals of ion-radio-group in your CSS, you will need to target the supporting-text, helper-text or error-text Shadow Parts instead, or use the provided CSS Variables.
Additionally, the radio-group-wrapper div element has been removed, causing slotted elements to be direct children of the ion-radio-group.

Example 1: Swap two columns

Version up to 8.x

<ion-grid>
  <ion-row>
    <ion-col push="4">1</ion-col>
    <ion-col pull="4">2</ion-col>
    <ion-col>3</ion-col>
  </ion-row>
</ion-grid>

Version 9.x+

<ion-grid>
  <ion-row>
    <ion-col order="2">1</ion-col>
    <ion-col order="1">2</ion-col>
    <ion-col order="3">3</ion-col>
  </ion-row>
</ion-grid>

Example 2: Reorder columns with specific sizes

To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `size="3" pull="9"`:

Version up to 8.x

<ion-grid>
  <ion-row>
    <ion-col push="3">1</ion-col>
    <ion-col pull="9">2</ion-col>
  </ion-row>
</ion-grid>

Version 9.x+

<ion-grid>
  <ion-row>
    <ion-col order="2">1</ion-col>
    <ion-col size="3" order="1">2</ion-col>
  </ion-row>
</ion-grid>

Example 3: Push

```html

ion-col push 1

``` **Version 9.x+** ```html

ion-col size="auto" offset="1"

ion-col size="auto"

```

Example 4: Push and Pull