Merge branch 'master' into 1732-experimental-dropdown-error-state

carbon-design-system · Feb 8, 2019 · 9d5cdec · 9d5cdec
2 parents 4aa5294 + 3f12199
commit 9d5cdec
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 49 deletions.
diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss
@@ -133,7 +133,7 @@
   }
 
   .#{$prefix}--label--disabled {
-    color: $disabled;
+    color: $disabled-02;
     cursor: not-allowed;
   }
 

diff --git a/src/components/inline-loading/inline-loading.hbs b/src/components/inline-loading/inline-loading.hbs
@@ -1,12 +1,12 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 2018
 
   This source code is licensed under the Apache-2.0 license found in the
   LICENSE file in the root directory of this source tree.
 -->
 
 <!-- Loading Success State -->
-<div data-inline-loading class="{{@root.prefix}}--inline-loading">
+<div data-inline-loading class="{{@root.prefix}}--inline-loading" role="alert" aria-live="assertive">
   <div class="{{@root.prefix}}--inline-loading__animation">
     <div data-inline-loading-spinner class="{{@root.prefix}}--loading {{@root.prefix}}--loading--small">
       <svg class="{{@root.prefix}}--loading__svg" viewBox="-75 -75 150 150">
@@ -25,4 +25,4 @@
 </div>
 {{#if showToggleButton}}
   <button data-inline-loading-demo-button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--primary">Toggle state</button>
-{{/if}}
+{{/if}}
diff --git a/src/components/text-input/_text-input.scss b/src/components/text-input/_text-input.scss
@@ -169,12 +169,12 @@
     // THIS SHOULD BE MOVED TO AN INLINE SVG IN NEXT MAJOR RELEASE
     background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' class='ibm-icons ibm-icons--error--filled' fill='%23bebebe'%3e%3cpath d='M6.95 26.66A14 14 0 0 0 26.67 6.93zM16 2A14 14 0 0 0 5.35 25.07L25.08 5.34A13.93 13.93 0 0 0 16 2z'/%3e%3c/svg%3e");
     outline: none;
-    background-color: $disabled-background-color;
+    background-color: $disabled-01;
     border-bottom: 1px solid transparent;
   }
 
   .#{$prefix}--text-input:disabled::-webkit-input-placeholder {
-    color: $disabled;
+    color: $disabled-03;
   }
 
   //-----------------------------

diff --git a/src/components/toggle/README.md b/src/components/toggle/README.md
@@ -10,6 +10,6 @@ Use these modifiers with `.bx--toggle` class.
 
 ### FAQ
 
-#### Best Practice
+#### Best practice
 
 Since Toggle uses Checkbox inputs, it's best practice to use `<fieldset>` and `<legend>` elements to label the the group. See Form for more details.
diff --git a/src/components/ui-shell/_side-nav.scss b/src/components/ui-shell/_side-nav.scss
@@ -307,11 +307,16 @@
   }
 
   .#{$prefix}--side-nav__menu[role='menu'] {
-    display: none;
+    display: block;
+    visibility: hidden;
+    max-height: 0;
+    transition: $transition--expansion max-height $carbon--ease-out, $transition--expansion visibility $carbon--standard-easing;
   }
 
   .#{$prefix}--side-nav__submenu[aria-expanded='true'] + .#{$prefix}--side-nav__menu[role='menu'] {
-    display: block;
+    max-height: 1500px;
+    visibility: inherit;
+    transition: $transition--expansion max-height $carbon--ease-in, $transition--expansion visibility $carbon--standard-easing;
   }
 
   .#{$prefix}--side-nav__menu[role='menu'] a.#{$prefix}--side-nav__link[role='menuitem'] {

diff --git a/src/components/ui-shell/side-nav-fixed.hbs b/src/components/ui-shell/side-nav-fixed.hbs
@@ -1,4 +1,4 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 2018
 
   This source code is licensed under the Apache-2.0 license found in the
@@ -14,31 +14,21 @@
         </a>
       </li>
       <li class="{{@root.prefix}}--side-nav__item {{@root.prefix}}--side-nav__item--active">
-        <a
-          class="{{@root.prefix}}--side-nav__link {{@root.prefix}}--side-nav__link--current"
-          href="javascript:void(0)"
+        <a class="{{@root.prefix}}--side-nav__link {{@root.prefix}}--side-nav__link--current" href="javascript:void(0)"
           aria-current="page">
           <span class="{{@root.prefix}}--side-nav__link-text">
             Link with really long text that should wrap - active
           </span>
         </a>
       </li>
       <li class="{{@root.prefix}}--side-nav__item">
-        <button
-          class="{{@root.prefix}}--side-nav__submenu"
-          role="button"
-          aria-haspopup="true"
-          aria-expanded="false">
+        <button class="{{@root.prefix}}--side-nav__submenu" role="button" aria-haspopup="true" aria-expanded="false">
           <span class="{{@root.prefix}}--side-nav__submenu-title">
             Category title that is really long and probably should overflow
           </span>
-          <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small {{@root.prefix}}--side-nav__submenu-chevron">
-            <svg
-              aria-hidden="true"
-              width="20"
-              height="20"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 32 32">
+          <div
+            class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small {{@root.prefix}}--side-nav__submenu-chevron">
+            <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
               <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
             </svg>
           </div>
@@ -55,28 +45,20 @@
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="menuitem">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
               Link
             </a>
           </li>
         </ul>
       </li>
       <li class="{{@root.prefix}}--side-nav__item {{@root.prefix}}--side-nav__item--active">
-        <button
-          class="{{@root.prefix}}--side-nav__submenu"
-          role="button"
-          aria-haspopup="true"
-          aria-expanded="true">
+        <button class="{{@root.prefix}}--side-nav__submenu" role="button" aria-haspopup="true" aria-expanded="true">
           <span class="{{@root.prefix}}--side-nav__submenu-title">
             Category title that is really long and probably should overflow
           </span>
-          <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small {{@root.prefix}}--side-nav__submenu-chevron">
-            <svg
-              aria-hidden="true"
-              width="20"
-              height="20"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 32 32">
+          <div
+            class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small {{@root.prefix}}--side-nav__submenu-chevron">
+            <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
               <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
             </svg>
           </div>
@@ -90,11 +72,7 @@
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a
-              class="{{@root.prefix}}--side-nav__link"
-              href="javascript:void(0)"
-              role="menuitem"
-              aria-current="page">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
               <span class="{{@root.prefix}}--side-nav__link-text">
                 Link with really long text that probably should be truncated
               </span>
@@ -106,11 +84,7 @@
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a
-              class="{{@root.prefix}}--side-nav__link"
-              href="javascript:void(0)"
-              role="menuitem"
-              aria-current="page">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
               <span class="{{@root.prefix}}--side-nav__link-text">Link</span>
             </a>
           </li>

diff --git a/src/components/ui-shell/side-nav.hbs b/src/components/ui-shell/side-nav.hbs
@@ -1,4 +1,4 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 2018
 
   This source code is licensed under the Apache-2.0 license found in the