Merge pull request #99 from ServiceMax-Engineering/svmx-rtl-2

RTL changes to position carat properly
predixdesignsystem · Feb 11, 2019 · aabb279 · aabb279
2 parents aecc4a2 + 638b5dc
commit aabb279
Show file tree

Hide file tree

Showing 8 changed files with 520 additions and 371 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,3 +1,6 @@
+# v4.9.1
+- Fixed Dropdown icon spacing issue when the rendering direction is "rtl" Right-To-Left.
+
 # v4.9.0
 
 - Added `--px-icon-flex-grow` CSS variable for optionally allowing the dropdown to fill its container

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "px-dropdown",
-  "version": "4.9.0",
+  "version": "4.9.1",
   "main": [
     "px-dropdown.html"
   ],

diff --git a/css/px-dropdown-styles.html b/css/px-dropdown-styles.html
diff --git a/demo/rtl_simple_demo.html b/demo/rtl_simple_demo.html
@@ -0,0 +1,143 @@
+<!--
+Copyright (c) 2018, General Electric
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>px-dropdown simple demo</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../polymer/polymer.html" />
+  <link rel="import" href="../../px-theme/px-theme-styles.html">
+  <link rel="import" href="../../px-overlay/px-overlay-container.html"/>
+  <link rel="import" href="../px-dropdown.html" />
+
+</head>
+
+<body dir="rtl">
+  <custom-style>
+    <style include="px-theme-styles" is="custom-style"></style>
+  </custom-style>
+
+  <style>
+    body {
+      height: 200vh;
+    }
+    .rtl {
+      direction: rtl;
+    }
+  </style>
+  <px-overlay-container container-type="foo"></px-overlay-container>
+  <px-overlay-container container-type="bar"></px-overlay-container>
+  <px-overlay-container container-type="baz"></px-overlay-container>
+
+  <div style="width:250px" class="rtl">
+    <p>Single Select</p>
+    <px-dropdown
+      id="foo"
+      hoist
+      container-type="foo"
+      items='[{"key":"1","val":"test test test test test test test test test test test test test test test test iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"I am a menu item so I cannot be selected","disableSelect":true},{"key":"5","val":"Flip Phone","disabled":true}]'>
+    </px-dropdown>
+    </br>
+    <p>Disabled Dropdown</p>
+    <px-dropdown
+      id="disabledDropdown"
+      display-value="Disabled"
+      hoist
+      disabled
+      container-type="disDropdown"
+      items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows Windows Windows Windows Windows Windows Windows Phone"},{"key":"5","val":"Flip Phone","disabled":true}]'
+      multi>
+    </px-dropdown>
+    </br>
+    <p>Disabled Viewable Dropdown</p>
+    <px-dropdown
+      id="disabledViewable"
+      display-value="Disabled Viewable"
+      hoist
+      disabled-viewable
+      container-type="disDropdown"
+      select-by="key"
+      selected-values='["1","3"]'
+      items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows Windows Windows Windows Windows Windows Windows Phone"},{"key":"5","val":"Flip Phone","disabled":true}]'
+      multi>
+    </px-dropdown>
+    </br>
+    <p>Multi Select</p>
+    <px-dropdown
+      id="multiSelect"
+      hoist
+      container-type="bar"
+      selected-values='["2","3","5"]'
+      items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows Windows Windows Windows Windows Windows Windows Phone"},{"key":"5","val":"Flip Phone","disabled":true}]'
+      multi>
+    </px-dropdown>
+    </br>
+    <p>Multi Select and Read Only</p>
+    <px-dropdown
+      id="multiSelect"
+      hoist
+      read-only
+      container-type="bar"
+      display-value-count="3"
+      select-by="key"
+      selected-values='["1","2","3"]'
+      items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows Windows Windows Windows Windows Windows Windows Phone"},{"key":"5","val":"Flip Phone","disabled":true}]'
+      multi>
+    </px-dropdown>
+    </br>
+    <p>Single Select Read Only</p>
+    <px-dropdown
+      id="readOnly"
+      display-value="Read Only Items"
+      container-type="readOnly"
+      read-only items='[{"key":"1","val":"One Read Only"},{"key":"2","val":"Two Read Only"},{"key":"3","val":"Three Read Only","selected":"true"},{"key":"4","val":"Four Read Only","disabled":"true"}]'>
+    </px-dropdown>
+    </br>
+    <p>Disable Select (Like a Menu)</p>
+    <px-dropdown
+      id="disableSelect"
+      display-value="My Menu"
+      container-type="baz"
+      items='[{"key":"1","val":"Do something"},{"key":"2","val":"Do something else"},{"key":"3","val":"Do one"}]'
+      disable-select>
+    </px-dropdown>
+    </br>
+    <p>Search Mode</p>
+    <px-dropdown
+      items='["Alabama", "Alaska", "American Samoa", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "District Of Columbia", "Federated States Of Micronesia", "Florida", "Georgia", "Guam", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Marshall Islands", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio", "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virgin Islands", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]'
+      multi
+      search-mode>
+    </px-dropdown>
+    </br>
+    <p>Simple Items Array</p>
+    <px-dropdown
+      items='["Etc/GMT+1","Etc/GMT+10","Etc/GMT+11","Etc/GMT+12"]'>
+    </px-dropdown>
+    </br>
+    <p>Slot Usage</p>
+    <px-dropdown
+      hoist
+      disable-truncate
+      items='[{"key":"1","val":"10"},{"key":"2","val":"20"},{"key":"3","val":"30"},{"key":"4","val":"50"}]'>
+      <px-icon id="trigger" icon="px-nav:more" slot="trigger" tabindex="0"></px-icon>
+    </px-dropdown>
+  </div>
+</body>
+
+</html>
diff --git a/demo/simple_demo.html b/demo/simple_demo.html
@@ -99,7 +99,7 @@
     </px-dropdown>
     </br>
     <p>Single Select Read Only</p>
-    <px-dropdown 
+    <px-dropdown
       id="readOnly"
       display-value="Read Only Items"
       container-type="readOnly"