fix(calcite-filter): added rtl check and updated styles

* Added RTL check in calite-filter. Updated related styles. @jcfranco could use a hand getting filter to see element direction. (#959) * getElementDir for filter Co-authored-by: Matt Driscoll <MDriscoll@esri.com>
Esri · May 8, 2020 · f226c41 · f226c41
1 parent eb3ef56
commit f226c41
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 27 deletions.
diff --git a/src/components/calcite-filter/calcite-filter.scss b/src/components/calcite-filter/calcite-filter.scss
@@ -32,46 +32,53 @@ input[type="text"] {
   }
 }
 
-input[type="text"]:focus {
-  border-color: var(--calcite-app-foreground-active);
-  box-shadow: 0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);
-  outline: none;
-  padding-left: var(--calcite-app-side-spacing-quarter);
-  padding-right: var(--calcite-app-side-spacing-quarter);
-}
-
 .search-icon {
   color: var(--calcite-app-foreground-subtle);
   display: flex;
   left: 0;
   position: absolute;
   transition: left var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function),
+    right var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function),
     opacity var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);
 }
 
-.clear-button {
-  color: var(--calcite-app-foreground);
-  background: none;
-  border: 0;
-  cursor: pointer;
-  &:hover,
-  &:focus {
-    color: var(--calcite-app-foreground-hover);
+.calcite--rtl .search-icon {
+  left: unset;
+  right: 0;
+}
+
+input[type="text"]:focus {
+  border-color: var(--calcite-app-foreground-active);
+  box-shadow: 0 calc(var(--calcite-app-cap-spacing-minimum) * 2) 0 var(--calcite-app-foreground-active);
+  outline: none;
+  padding-left: var(--calcite-app-side-spacing-quarter);
+  padding-right: var(--calcite-app-side-spacing-quarter);
+  & ~ .search-icon {
+    left: calc(var(--calcite-app-icon-size) * -1);
+    opacity: 0;
   }
 }
 
 .calcite--rtl {
   input[type="text"] {
     padding-left: var(--calcite-app-side-spacing-quarter);
     padding-right: var(--calcite-app-side-spacing-plus-half);
-  }
-  .search-icon {
-    left: unset;
-    right: 0;
+    &:focus {
+      padding-right: var(--calcite-app-side-spacing-plus-quarter);
+      & ~ .search-icon {
+        right: calc(var(--calcite-app-icon-size) * -1);
+      }
+    }
   }
 }
 
-input[type="text"]:focus ~ .search-icon {
-  left: calc(var(--calcite-app-icon-size) * -1);
-  opacity: 0;
+.clear-button {
+  color: var(--calcite-app-foreground);
+  background: none;
+  border: 0;
+  cursor: pointer;
+  &:hover,
+  &:focus {
+    color: var(--calcite-app-foreground-hover);
+  }
 }
diff --git a/src/components/calcite-filter/calcite-filter.tsx b/src/components/calcite-filter/calcite-filter.tsx
@@ -11,6 +11,8 @@ import {
 } from "@stencil/core";
 import { debounce, forIn } from "lodash-es";
 import { CSS, ICONS, TEXT } from "./resources";
+import { CSS_UTILITY } from "../utils/resources";
+import { getElementDir } from "../utils/dom";
 
 const filterDebounceInMs = 250;
 
@@ -140,9 +142,11 @@ export class CalciteFilter {
   // --------------------------------------------------------------------------
 
   render(): VNode {
+    const rtl = getElementDir(this.el) === "rtl";
+
     return (
       <Host>
-        <label>
+        <label class={rtl ? CSS_UTILITY.rtl : null}>
           <input
             type="text"
             value=""

diff --git a/src/components/calcite-pick-list/shared-list-render.tsx b/src/components/calcite-pick-list/shared-list-render.tsx
@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
 import CalciteScrim from "../utils/CalciteScrim";
 import { VNode } from "@stencil/core/internal";
 import { CSS } from "./resources";
+import { getElementDir } from "../utils/dom";
 
 const renderScrim = (loading, disabled): VNode => {
   return <CalciteScrim loading={loading} disabled={disabled} />;
@@ -14,13 +15,15 @@ export const List = ({ props, ...rest }): VNode => {
     filterEnabled,
     dataForFilter,
     handleFilter,
-    textFilterPlaceholder
+    textFilterPlaceholder,
+    el
   } = props;
   return (
     <Host role="menu" aria-disabled={disabled.toString()} aria-busy={loading.toString()} {...rest}>
       <header class={{ [CSS.sticky]: true }}>
         {filterEnabled ? (
           <calcite-filter
+            dir={getElementDir(el)}
             data={dataForFilter}
             textPlaceholder={textFilterPlaceholder}
             aria-label={textFilterPlaceholder}

diff --git a/src/demos/pick-list/advanced.html b/src/demos/pick-list/advanced.html
@@ -231,8 +231,8 @@ <h2>grouped single-select</h2>
       <!-- RTL -->
       <section class="example-container" style="width: 28vw; margin-top: 2em;" dir="rtl">
         <h1>RTL</h1>
-        <h2>multi-select</h2>
-        <calcite-pick-list id="one_rtl" multiple>
+        <h2>multi-select w/ filter</h2>
+        <calcite-pick-list id="one_rtl" multiple filter-enabled>
           <calcite-pick-list-item text-label="2018 Population Density (NO SUMMARY) (Esri)" value="POPDENS_CY">
             <calcite-action
               slot="secondary-action"