fix(picker): spinner position in RTL direction (#2567)

* fix(picker): spinner position in RTL direction

* chore(picker): apply styles only to is-loading and is-invalid

* chore(picker): commit mods.md

* chore(picker): add deprecation

Co-authored-by: Melissa Thompson <[email protected]>

* chore(picker): renamed variable

---------

Co-authored-by: rmanole <[email protected]>
Co-authored-by: Melissa Thompson <[email protected]>

Author: 3 people

components/picker/index.css

@@ -35,7 +35,7 @@ governing permissions and limitations under the License.
   --spectrum-picker-spacing-label-to-picker: var(--spectrum-field-label-to-component);
 
   --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100);
-  --spectrum-picker-spacing-text-to-alert-icon-inline-start: var(--spectrum-field-text-to-alert-icon-medium);
+  --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-medium);
   --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium);
   --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium);
   --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-medium);
@@ -93,7 +93,7 @@ governing permissions and limitations under the License.
   --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
   --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75);
   --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-75);
-  --spectrum-picker-spacing-text-to-alert-icon-inline-start: var(--spectrum-field-text-to-alert-icon-small);
+  --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small);
   --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small);
   --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-small);
   --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small);
@@ -114,7 +114,7 @@ governing permissions and limitations under the License.
   --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
   --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200);
   --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-200);
-  --spectrum-picker-spacing-text-to-alert-icon-inline-start: var(--spectrum-field-text-to-alert-icon-large);
+  --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large);
   --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large);
   --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large);
   --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large);
@@ -135,7 +135,7 @@ governing permissions and limitations under the License.
   --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
   --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300);
   --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-300);
-  --spectrum-picker-spacing-text-to-alert-icon-inline-start: var(--spectrum-field-text-to-alert-icon-extra-large);
+  --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large);
   --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large);
   --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large);
   --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large);
@@ -320,6 +320,14 @@ governing permissions and limitations under the License.
     }
   }
 
+  &.is-loading, &.is-invalid {
+    .spectrum-Picker-label {
+      /* @deprecation --mod-picker-spacing-text-to-alert-icon-inline-start has been renamed to --mod-picker-spacing-text-to-icon-inline-end
+	   and will be removed in a future version. */
+      margin-inline-end: var(--mod-picker-spacing-text-to-icon-inline-end, var(--mod-picker-spacing-text-to-alert-icon-inline-start, var(--spectrum-picker-spacing-text-to-icon-inline-end)));
+    }
+  }
+
   &:disabled,
   &.is-disabled {
     cursor: default;
@@ -416,10 +424,6 @@ governing permissions and limitations under the License.
   }
 }
 
-.spectrum-Picker-validationIcon, .spectrum-Picker .spectrum-ProgressCircle {
-  margin-inline-start: var(--mod-picker-spacing-text-to-alert-icon-inline-start, var(--spectrum-picker-spacing-text-to-alert-icon-inline-start));
-}
-
 .spectrum-Picker-validationIcon {
   margin-block-start: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
   margin-block-end: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));

components/picker/metadata/mods.md

@@ -63,6 +63,7 @@
 | `--mod-picker-spacing-picker-to-popover`               |
 | `--mod-picker-spacing-text-to-alert-icon-inline-start` |
 | `--mod-picker-spacing-text-to-icon`                    |
+| `--mod-picker-spacing-text-to-icon-inline-end`         |
 | `--mod-picker-spacing-top-to-alert-icon`               |
 | `--mod-picker-spacing-top-to-disclosure-icon`          |
 | `--mod-picker-spacing-top-to-progress-circle`          |