Skip to content

BREAKING.md

Latest commit

 

History

History
83 lines (66 loc) · 2.78 KB

BREAKING.md

File metadata and controls

83 lines (66 loc) · 2.78 KB

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

  • 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 removed. The similar look can be achieved with the newly added property `order`.
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>