javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(themes): update border radius to new logical properties (#29002)

Browse Source 
Issue number: internal

---------

## What is the current behavior?
The old `border-radius` mixin added additional selectors and styles
depending on whether the direction was set to `ltr` or `rtl`.

Old mixin usage:

```scss
.old-border-radius {
  @include border-radius(5px, 6px, 7px, 8px)
}
```

generates:

```css
.old-border-radius {
  border-top-left-radius: 5px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 7px;
  border-bottom-left-radius: 8px;
}

:host-context([dir=rtl]) .old-border-radius {
  border-top-left-radius: 6px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 7px;
}

[dir=rtl] .old-border-radius {
  border-top-left-radius: 6px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 7px;
}

@supports selector(:dir(rtl)) {
  .old-border-radius:dir(rtl) {
    border-top-left-radius: 6px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 7px;
  }
}
```

## What is the new behavior?
The new `border-radius` mixin uses the [logical
properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Margins_borders_padding)
which handles switching based on the
[writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode),
[direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction),
and
[text-orientation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation):

| Before                       | After                       |
| -----------------------------| ----------------------------|
| `border-top-left-radius`     | `border-start-start-radius` |
| `border-bottom-left-radius`  | `border-end-start-radius`   |
| `border-top-right-radius`    | `border-start-end-radius`   |
| `border-bottom-right-radius` | `border-end-end-radius`     |

New mixin usage:

```scss
.new-border-radius {
  @include border-radius(5px, 6px, 7px, 8px)
}
```

```css
.new-border-radius {
  border-start-start-radius: 5px;
  border-start-end-radius: 6px;
  border-end-end-radius: 7px;
  border-end-start-radius: 8px;
}
```

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

The `select` styles have been updated to use the mixin instead of
hardcoding `border-radius`.
This commit is contained in:
Brandy Carney
2024-02-12 15:12:29 -05:00
committed by GitHub
parent 5daa3e6b7f
commit 1543b0e608
3 changed files with 10 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
core/src/components/range/range.md.scss
View File

@ -178,6 +178,7 @@
@include position(null, null, -1px, 50%);
@include margin-horizontal(-13px, null);
// Border radius for the pin should not change based on the direction
@include multi-dir() {
/* stylelint-disable-next-line property-disallowed-list */
border-radius: 50% 50% 50% 0;

20
core/src/components/select/select.md.outline.scss
View File

@ -199,14 +199,8 @@
@include border(null, null, null, var(--border-width) var(--border-style) var(--border-color));
}
:host(.select-ltr.select-fill-outline) .select-outline-start {
// stylelint-disable-next-line property-disallowed-list
border-radius: var(--border-radius) 0px 0px var(--border-radius);
}
:host(.select-rtl.select-fill-outline) .select-outline-start {
// stylelint-disable-next-line property-disallowed-list
border-radius: 0px var(--border-radius) var(--border-radius) 0px;
:host(.select-fill-outline) .select-outline-start {
@include border-radius(var(--border-radius), 0px, 0px, var(--border-radius));
}
:host(.select-fill-outline) .select-outline-start {
@ -225,14 +219,8 @@
@include border(null, var(--border-width) var(--border-style) var(--border-color), null, null);
}
:host(.select-ltr.select-fill-outline) .select-outline-end {
// stylelint-disable-next-line property-disallowed-list
border-radius: 0px var(--border-radius) var(--border-radius) 0px;
}
:host(.select-rtl.select-fill-outline) .select-outline-end {
// stylelint-disable-next-line property-disallowed-list
border-radius: var(--border-radius) 0px 0px var(--border-radius);
:host(.select-fill-outline) .select-outline-end {
@include border-radius(0px, var(--border-radius), var(--border-radius), 0px);
}
:host(.select-fill-outline) .select-outline-end {