refactor(select): use border mixin (#27732)

Issue number: N/A

---------

<!-- 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 outline select uses `border-left` and `border-right` properties to
handle LTR vs RTL borders. However, our border mixin takes care of this
by using logical border properties.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updates the outline select to use the border mixin.

Note 1: There should be no visual changes as a result of this. This is
simpler way of doing what we are already doing.
Note 2: There do exist logical border radius properties (for the other
explicit LTR vs RTL work we do), but Ionic 7 supports browsers that do
not support these properties yet. (I created FW-4661 to track this)

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
This commit is contained in:
Liam DeBeasi
2023-07-05 08:49:06 -04:00
committed by GitHub
parent a4197a5c74
commit e5ab6d8804

View File

@ -196,16 +196,16 @@
pointer-events: none; pointer-events: none;
} }
:host(.select-fill-outline) .select-outline-start {
@include border(null, null, null, var(--border-width) var(--border-style) var(--border-color));
}
:host(.select-ltr.select-fill-outline) .select-outline-start { :host(.select-ltr.select-fill-outline) .select-outline-start {
// stylelint-disable-next-line property-disallowed-list
border-left: var(--border-width) var(--border-style) var(--border-color);
// stylelint-disable-next-line property-disallowed-list // stylelint-disable-next-line property-disallowed-list
border-radius: var(--border-radius) 0px 0px var(--border-radius); border-radius: var(--border-radius) 0px 0px var(--border-radius);
} }
:host(.select-rtl.select-fill-outline) .select-outline-start { :host(.select-rtl.select-fill-outline) .select-outline-start {
// stylelint-disable-next-line property-disallowed-list
border-right: var(--border-width) var(--border-style) var(--border-color);
// stylelint-disable-next-line property-disallowed-list // stylelint-disable-next-line property-disallowed-list
border-radius: 0px var(--border-radius) var(--border-radius) 0px; border-radius: 0px var(--border-radius) var(--border-radius) 0px;
} }
@ -222,16 +222,16 @@
width: calc(var(--padding-start) - #{$select-md-floating-label-padding}); width: calc(var(--padding-start) - #{$select-md-floating-label-padding});
} }
:host(.select-fill-outline) .select-outline-end {
@include border(null, var(--border-width) var(--border-style) var(--border-color), null, null);
}
:host(.select-ltr.select-fill-outline) .select-outline-end { :host(.select-ltr.select-fill-outline) .select-outline-end {
// stylelint-disable-next-line property-disallowed-list
border-right: var(--border-width) var(--border-style) var(--border-color);
// stylelint-disable-next-line property-disallowed-list // stylelint-disable-next-line property-disallowed-list
border-radius: 0px var(--border-radius) var(--border-radius) 0px; border-radius: 0px var(--border-radius) var(--border-radius) 0px;
} }
:host(.select-rtl.select-fill-outline) .select-outline-end { :host(.select-rtl.select-fill-outline) .select-outline-end {
// stylelint-disable-next-line property-disallowed-list
border-left: var(--border-width) var(--border-style) var(--border-color);
// stylelint-disable-next-line property-disallowed-list // stylelint-disable-next-line property-disallowed-list
border-radius: var(--border-radius) 0px 0px var(--border-radius); border-radius: var(--border-radius) 0px 0px var(--border-radius);
} }