From e5ab6d88049b5fd40342bd2f0c42a4da0655648e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 5 Jul 2023 08:49:06 -0400
Subject: [PATCH] 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. -->
---
 .../src/components/select/select.md.outline.scss | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/core/src/components/select/select.md.outline.scss b/core/src/components/select/select.md.outline.scss
index 9e7f5dcc13..8d199aa1be 100644
--- a/core/src/components/select/select.md.outline.scss
+++ b/core/src/components/select/select.md.outline.scss
@@ -196,16 +196,16 @@
   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 {
-  // 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
   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-right: var(--border-width) var(--border-style) var(--border-color);
   // stylelint-disable-next-line property-disallowed-list
   border-radius: 0px var(--border-radius) var(--border-radius) 0px;
 }
@@ -222,16 +222,16 @@
   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 {
-  // 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
   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-left: var(--border-width) var(--border-style) var(--border-color);
   // stylelint-disable-next-line property-disallowed-list
   border-radius: var(--border-radius) 0px 0px var(--border-radius);
 }