@charcoal-ui/react 3.3.0 → 3.5.0

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

@@ -0,0 +1,555 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots DropdownSelector/MenuList Basic 1`] = `
+.c1 {
+  list-style: none;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 40px;
+  cursor: pointer;
+  outline: none;
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.c2:disabled,
+.c2[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c2[aria-disabled="true"] {
+  cursor: default;
+}
+
+.c2:hover,
+.c2:focus,
+.c2:focus-within {
+  background-color: var(--charcoal-surface3);
+}
+
+.c0 {
+  padding: 0;
+  margin: 0;
+}
+
+<div
+  data-dark={false}
+>
+  <ul
+    className="c0"
+  >
+    <li
+      className="c1"
+      role="option"
+    >
+      <div
+        className="c2"
+        data-key="0"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        tabIndex={-1}
+        value="0"
+      >
+        Menu 
+        0
+      </div>
+    </li>
+    <li
+      className="c1"
+      role="option"
+    >
+      <div
+        className="c2"
+        data-key="1"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        tabIndex={-1}
+        value="1"
+      >
+        Menu 
+        1
+      </div>
+    </li>
+    <li
+      className="c1"
+      role="option"
+    >
+      <div
+        className="c2"
+        data-key="2"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        tabIndex={-1}
+        value="2"
+      >
+        Menu 
+        2
+      </div>
+    </li>
+    <li
+      className="c1"
+      role="option"
+    >
+      <div
+        className="c2"
+        data-key="3"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        tabIndex={-1}
+        value="3"
+      >
+        Menu 
+        3
+      </div>
+    </li>
+    <li
+      className="c1"
+      role="option"
+    >
+      <div
+        className="c2"
+        data-key="4"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        tabIndex={-1}
+        value="4"
+      >
+        Menu 
+        4
+      </div>
+    </li>
+    <li
+      className="c1"
+      role="option"
+    >
+      <div
+        className="c2"
+        data-key="5"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        tabIndex={-1}
+        value="5"
+      >
+        Menu 
+        5
+      </div>
+    </li>
+    <li
+      className="c1"
+      role="option"
+    >
+      <div
+        className="c2"
+        data-key="6"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        tabIndex={-1}
+        value="6"
+      >
+        Menu 
+        6
+      </div>
+    </li>
+    <li
+      className="c1"
+      role="option"
+    >
+      <div
+        className="c2"
+        data-key="7"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        tabIndex={-1}
+        value="7"
+      >
+        Menu 
+        7
+      </div>
+    </li>
+    <li
+      className="c1"
+      role="option"
+    >
+      <div
+        className="c2"
+        data-key="8"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        tabIndex={-1}
+        value="8"
+      >
+        Menu 
+        8
+      </div>
+    </li>
+    <li
+      className="c1"
+      role="option"
+    >
+      <div
+        className="c2"
+        data-key="9"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        tabIndex={-1}
+        value="9"
+      >
+        Menu 
+        9
+      </div>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Storyshots DropdownSelector/MenuList Disabled 1`] = `
+.c1 {
+  list-style: none;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 40px;
+  cursor: pointer;
+  outline: none;
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.c2:disabled,
+.c2[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c2[aria-disabled="true"] {
+  cursor: default;
+}
+
+.c2:hover,
+.c2:focus,
+.c2:focus-within {
+  background-color: var(--charcoal-surface3);
+}
+
+.c0 {
+  padding: 0;
+  margin: 0;
+}
+
+<div
+  data-dark={false}
+>
+  <ul
+    className="c0"
+  >
+    <li
+      className="c1"
+      role="option"
+    >
+      <div
+        className="c2"
+        data-key="1"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        tabIndex={-1}
+        value="1"
+      >
+        MenuItem
+      </div>
+    </li>
+    <li
+      className="c1"
+      role="option"
+    >
+      <div
+        aria-disabled={true}
+        className="c2"
+        data-key="2"
+        disabled={true}
+        onKeyDown={[Function]}
+        tabIndex={-1}
+        value="2"
+      >
+        Disabled MenuItem
+      </div>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Storyshots DropdownSelector/MenuList Group 1`] = `
+.c4 {
+  list-style: none;
+}
+
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 40px;
+  cursor: pointer;
+  outline: none;
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.c5:disabled,
+.c5[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c5[aria-disabled="true"] {
+  cursor: default;
+}
+
+.c5:hover,
+.c5:focus,
+.c5:focus-within {
+  background-color: var(--charcoal-surface3);
+}
+
+.c0 {
+  padding: 0;
+  margin: 0;
+}
+
+.c2 {
+  display: block;
+  color: #858585;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 12px 0 8px 16px;
+}
+
+.c3 {
+  padding-left: 0;
+  margin: 0;
+  box-sizing: border-box;
+  list-style: none;
+  overflow: hidden;
+}
+
+.c1 {
+  display: block;
+}
+
+<div
+  data-dark={false}
+>
+  <ul
+    className="c0"
+  >
+    <li
+      className="c1"
+      role="presentation"
+    >
+      <span
+        className="c2"
+      >
+        Section1
+      </span>
+      <ul
+        className="c3"
+        role="group"
+      >
+        <li
+          className="c4"
+          role="option"
+        >
+          <div
+            className="c5"
+            data-key="0"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={-1}
+            value="0"
+          >
+            Menu 
+            0
+          </div>
+        </li>
+        <li
+          className="c4"
+          role="option"
+        >
+          <div
+            className="c5"
+            data-key="1"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={-1}
+            value="1"
+          >
+            Menu 
+            1
+          </div>
+        </li>
+        <li
+          className="c4"
+          role="option"
+        >
+          <div
+            className="c5"
+            data-key="2"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={-1}
+            value="2"
+          >
+            Menu 
+            2
+          </div>
+        </li>
+        <li
+          className="c4"
+          role="option"
+        >
+          <div
+            className="c5"
+            data-key="3"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={-1}
+            value="3"
+          >
+            Menu 
+            3
+          </div>
+        </li>
+        <li
+          className="c4"
+          role="option"
+        >
+          <div
+            className="c5"
+            data-key="4"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={-1}
+            value="4"
+          >
+            Menu 
+            4
+          </div>
+        </li>
+      </ul>
+    </li>
+    <li
+      className="c1"
+      role="presentation"
+    >
+      <span
+        className="c2"
+      >
+        Section2
+      </span>
+      <ul
+        className="c3"
+        role="group"
+      >
+        <li
+          className="c4"
+          role="option"
+        >
+          <div
+            className="c5"
+            data-key="5"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={-1}
+            value="5"
+          >
+            Menu 
+            5
+          </div>
+        </li>
+        <li
+          className="c4"
+          role="option"
+        >
+          <div
+            className="c5"
+            data-key="6"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={-1}
+            value="6"
+          >
+            Menu 
+            6
+          </div>
+        </li>
+        <li
+          className="c4"
+          role="option"
+        >
+          <div
+            className="c5"
+            data-key="7"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={-1}
+            value="7"
+          >
+            Menu 
+            7
+          </div>
+        </li>
+        <li
+          className="c4"
+          role="option"
+        >
+          <div
+            className="c5"
+            data-key="8"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={-1}
+            value="8"
+          >
+            Menu 
+            8
+          </div>
+        </li>
+        <li
+          className="c4"
+          role="option"
+        >
+          <div
+            className="c5"
+            data-key="9"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={-1}
+            value="9"
+          >
+            Menu 
+            9
+          </div>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+`;

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

@@ -0,0 +1,174 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots DropdownSelector/Popover Basic 1`] = `
+.c0 {
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
+  outline: none;
+  color: inherit;
+  text-rendering: inherit;
+  -webkit-letter-spacing: inherit;
+  -moz-letter-spacing: inherit;
+  -ms-letter-spacing: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c1 {
+  width: -webkit-min-content;
+  width: -moz-min-content;
+  width: min-content;
+  display: inline-grid;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  padding-right: 24px;
+  padding-left: 24px;
+  border-radius: 999999px;
+  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  height: 40px;
+}
+
+.c1:hover:not(:disabled):not([aria-disabled]),
+.c1:hover[aria-disabled=false] {
+  color: var(--charcoal-text2-hover);
+}
+
+.c1:active:not(:disabled):not([aria-disabled]),
+.c1:active[aria-disabled=false] {
+  color: var(--charcoal-text2-press);
+}
+
+.c1:hover:not(:disabled):not([aria-disabled]),
+.c1:hover[aria-disabled=false] {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.c1:active:not(:disabled):not([aria-disabled]),
+.c1:active[aria-disabled=false] {
+  background-color: var(--charcoal-surface3-press);
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled=false]:focus,
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled=false]:active {
+  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),
+.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c1[aria-disabled=false]:active:not(:focus-visible) {
+  outline: 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);
+}
+
+<div
+  data-dark={false}
+>
+  <button
+    className="c0 c1"
+    disabled={false}
+    onClick={[Function]}
+    style={
+      Object {
+        "position": "absolute",
+      }
+    }
+  >
+    button
+  </button>
+  <button
+    className="c0 c1"
+    disabled={false}
+    onClick={[Function]}
+    style={
+      Object {
+        "position": "absolute",
+        "right": 8,
+      }
+    }
+  >
+    button
+  </button>
+  <button
+    className="c0 c1"
+    disabled={false}
+    onClick={[Function]}
+    style={
+      Object {
+        "bottom": 8,
+        "position": "absolute",
+      }
+    }
+  >
+    button
+  </button>
+  <button
+    className="c0 c1"
+    disabled={false}
+    onClick={[Function]}
+    style={
+      Object {
+        "bottom": 8,
+        "position": "absolute",
+        "right": 8,
+      }
+    }
+  >
+    button
+  </button>
+</div>
+`;