@charcoal-ui/react 3.7.0 → 3.9.0

package/src/components/DropdownSelector/__snapshots__/index.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots DropdownSelector Basic 1`] = `
+exports[`Storybook Tests DropdownSelector Basic 1`] = `
 .c0 {
   display: inline-block;
   width: 100%;
@@ -45,12 +45,18 @@ exports[`Storyshots DropdownSelector Basic 1`] = `
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -59,6 +65,11 @@ exports[`Storyshots DropdownSelector Basic 1`] = `
   background-color: var(--charcoal-surface3-hover);
 }
 
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  background-color: var(--charcoal-surface3-press);
+}
+
 .c2 {
   text-align: left;
   font-size: 14px;
@@ -107,7 +118,7 @@ exports[`Storyshots DropdownSelector Basic 1`] = `
 </div>
 `;
 
-exports[`Storyshots DropdownSelector Custom Children 1`] = `
+exports[`Storybook Tests DropdownSelector CustomChildren 1`] = `
 .c0 {
   display: inline-block;
   width: 100%;
@@ -152,12 +163,18 @@ exports[`Storyshots DropdownSelector Custom Children 1`] = `
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -166,6 +183,11 @@ exports[`Storyshots DropdownSelector Custom Children 1`] = `
   background-color: var(--charcoal-surface3-hover);
 }
 
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  background-color: var(--charcoal-surface3-press);
+}
+
 .c2 {
   text-align: left;
   font-size: 14px;
@@ -223,7 +245,7 @@ exports[`Storyshots DropdownSelector Custom Children 1`] = `
 </div>
 `;
 
-exports[`Storyshots DropdownSelector In Form Tag 1`] = `
+exports[`Storybook Tests DropdownSelector InFormTag 1`] = `
 .c0 {
   display: inline-block;
   width: 100%;
@@ -268,12 +290,18 @@ exports[`Storyshots DropdownSelector In Form Tag 1`] = `
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -282,6 +310,11 @@ exports[`Storyshots DropdownSelector In Form Tag 1`] = `
   background-color: var(--charcoal-surface3-hover);
 }
 
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  background-color: var(--charcoal-surface3-press);
+}
+
 .c2 {
   text-align: left;
   font-size: 14px;
@@ -328,7 +361,7 @@ exports[`Storyshots DropdownSelector In Form Tag 1`] = `
 </div>
 `;
 
-exports[`Storyshots DropdownSelector In Modal 1`] = `
+exports[`Storybook Tests DropdownSelector InModal 1`] = `
 .c11 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -411,12 +444,18 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
 }
 
 .c8:not(:disabled):not([aria-disabled]):focus,
-.c8[aria-disabled='false']:focus,
-.c8:not(:disabled):not([aria-disabled]):active,
-.c8[aria-disabled='false']:active,
+.c8[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c8:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c8[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c8:not(:disabled):not([aria-disabled]):focus-visible,
 .c8[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -425,6 +464,11 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
   background-color: var(--charcoal-surface3-hover);
 }
 
+.c8:not(:disabled):not([aria-disabled]):active,
+.c8[aria-disabled='false']:active {
+  background-color: var(--charcoal-surface3-press);
+}
+
 .c9 {
   text-align: left;
   font-size: 14px;
@@ -468,21 +512,29 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
 
 .c12:not(:disabled):not([aria-disabled]):hover,
 .c12[aria-disabled='false']:hover {
-  background-color: var( --charcoal-transparent-hover );
+  color: var(--charcoal-text3-hover);
+  background-color: var(--charcoal-transparent-hover);
 }
 
 .c12:not(:disabled):not([aria-disabled]):active,
 .c12[aria-disabled='false']:active {
-  background-color: var( --charcoal-transparent-press );
+  color: var(--charcoal-text3-press);
+  background-color: var(--charcoal-transparent-press);
 }
 
 .c12:not(:disabled):not([aria-disabled]):focus,
-.c12[aria-disabled='false']:focus,
-.c12:not(:disabled):not([aria-disabled]):active,
-.c12[aria-disabled='false']:active,
+.c12[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c12:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c12[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c12:not(:disabled):not([aria-disabled]):focus-visible,
 .c12[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -651,8 +703,14 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
     </button>
     <div
       className="c0"
+      onClick={[Function]}
       onPointerDown={[Function]}
-      style={Object {}}
+      style={
+        Object {
+          "backgroundColor": "rgba(0, 0, 0, 0)",
+          "overflow": "hidden",
+        }
+      }
     >
       <div
         className="c1"
@@ -660,7 +718,11 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
         onKeyDown={[Function]}
         role="dialog"
         size="M"
-        style={Object {}}
+        style={
+          Object {
+            "transform": " translateY(100%)",
+          }
+        }
         tabIndex={-1}
       >
         <div
@@ -751,7 +813,7 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
 </div>
 `;
 
-exports[`Storyshots DropdownSelector Long Names 1`] = `
+exports[`Storybook Tests DropdownSelector LongNames 1`] = `
 .c0 {
   display: inline-block;
   width: 100%;
@@ -796,12 +858,18 @@ exports[`Storyshots DropdownSelector Long Names 1`] = `
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -810,6 +878,11 @@ exports[`Storyshots DropdownSelector Long Names 1`] = `
   background-color: var(--charcoal-surface3-hover);
 }
 
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  background-color: var(--charcoal-surface3-press);
+}
+
 .c2 {
   text-align: left;
   font-size: 14px;
@@ -858,7 +931,7 @@ exports[`Storyshots DropdownSelector Long Names 1`] = `
 </div>
 `;
 
-exports[`Storyshots DropdownSelector Playground 1`] = `
+exports[`Storybook Tests DropdownSelector Playground 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -929,13 +1002,19 @@ exports[`Storyshots DropdownSelector Playground 1`] = `
   height: 40px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -1000,12 +1079,18 @@ exports[`Storyshots DropdownSelector Playground 1`] = `
 }
 
 .c3:not(:disabled):not([aria-disabled]):focus,
-.c3[aria-disabled='false']:focus,
-.c3:not(:disabled):not([aria-disabled]):active,
-.c3[aria-disabled='false']:active,
+.c3[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c3:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c3[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c3:not(:disabled):not([aria-disabled]):focus-visible,
 .c3[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -1014,6 +1099,11 @@ exports[`Storyshots DropdownSelector Playground 1`] = `
   background-color: var(--charcoal-surface3-hover);
 }
 
+.c3:not(:disabled):not([aria-disabled]):active,
+.c3[aria-disabled='false']:active {
+  background-color: var(--charcoal-surface3-press);
+}
+
 .c4 {
   text-align: left;
   font-size: 14px;
@@ -1066,7 +1156,7 @@ exports[`Storyshots DropdownSelector Playground 1`] = `
 </div>
 `;
 
-exports[`Storyshots DropdownSelector Section List 1`] = `
+exports[`Storybook Tests DropdownSelector SectionList 1`] = `
 .c0 {
   display: inline-block;
   width: 100%;
@@ -1111,12 +1201,18 @@ exports[`Storyshots DropdownSelector Section List 1`] = `
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -1125,6 +1221,11 @@ exports[`Storyshots DropdownSelector Section List 1`] = `
   background-color: var(--charcoal-surface3-hover);
 }
 
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  background-color: var(--charcoal-surface3-press);
+}
+
 .c2 {
   text-align: left;
   font-size: 14px;