@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/src/__tests__/__snapshots__/Position.tsx.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`position components Absolute renders consistently 1`] = `
+.c0 {
+  position: absolute;
+}
+
+<div
+  className="c0"
+/>
+`;
+
+exports[`position components Fixed renders consistently 1`] = `
+.c0 {
+  position: fixed;
+}
+
+<div
+  className="c0"
+/>
+`;
+
+exports[`position components Relative renders consistently 1`] = `
+.c0 {
+  position: relative;
+}
+
+<div
+  className="c0"
+/>
+`;
+
+exports[`position components Sticky renders consistently 1`] = `
+.c0 {
+  top: 0;
+  z-index: 1;
+  position: -webkit-sticky;
+  position: sticky;
+}
+
+<div
+  className="c0"
+/>
+`;

package/src/__tests__/__snapshots__/ProgressBar.tsx.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProgressBar renders consistently 1`] = `
+.c1 {
+  width: 0;
+  background-color: #2da44e;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  overflow: hidden;
+  background-color: #d0d7de;
+  border-radius: 3px;
+  height: 8px;
+}
+
+<span
+  className="c0"
+>
+  <span
+    className="c1"
+  />
+</span>
+`;
+
+exports[`ProgressBar respects the "progress" prop 1`] = `
+.c1 {
+  width: 80%;
+  background-color: #2da44e;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  overflow: hidden;
+  background-color: #d0d7de;
+  border-radius: 3px;
+  height: 8px;
+}
+
+<span
+  className="c0"
+>
+  <span
+    className="c1"
+  />
+</span>
+`;

package/src/__tests__/__snapshots__/SelectMenu.tsx.snap

@@ -0,0 +1,469 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
+.c1 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 16px;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 6px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  font-size: 14px;
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c1:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c1:disabled {
+  cursor: default;
+}
+
+.c1:disabled svg {
+  opacity: 0.6;
+}
+
+.c1:hover {
+  background-color: #f3f4f6;
+  border-color: rgba(27,31,36,0.15);
+}
+
+.c1:focus {
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c1:active {
+  background-color: hsla(220,14%,94%,1);
+  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
+}
+
+.c1:disabled {
+  color: #57606a;
+  background-color: #f6f8fa;
+  border-color: rgba(27,31,36,0.15);
+}
+
+.c6 {
+  padding: 4px 16px;
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: #57606a;
+  background-color: #f6f8fa;
+  border-bottom: 1px solid hsla(210,18%,87%,1);
+}
+
+.c7 {
+  margin-top: -1px;
+  padding: 8px 16px;
+  font-size: 12px;
+  color: #57606a;
+  text-align: center;
+  border-top: 1px solid hsla(210,18%,87%,1);
+}
+
+.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;
+  padding: 16px;
+  overflow: hidden;
+  text-align: left;
+  cursor: pointer;
+  background-color: #ffffff;
+  border: 0;
+  border-bottom: 1px solid hsla(210,18%,87%,1);
+  color: #57606a;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 12px;
+  font-family: inherit;
+  width: 100%;
+}
+
+.c5:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c5:focus {
+  outline: none;
+}
+
+.c5[hidden] {
+  display: none !important;
+}
+
+.c5 .SelectMenu-icon {
+  width: 16px;
+  margin-right: 8px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c5 .SelectMenu-selected-icon {
+  visibility: hidden;
+  -webkit-transition: -webkit-transform 0.12s cubic-bezier(0.5,0.1,1,0.5),visibility 0s 0.12s linear;
+  -webkit-transition: transform 0.12s cubic-bezier(0.5,0.1,1,0.5),visibility 0s 0.12s linear;
+  transition: transform 0.12s cubic-bezier(0.5,0.1,1,0.5),visibility 0s 0.12s linear;
+  -webkit-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+}
+
+.c5[aria-checked='true'] {
+  font-weight: 500;
+  color: #24292f;
+}
+
+.c5[aria-checked='true'] .SelectMenu-selected-icon {
+  visibility: visible;
+  -webkit-transition: -webkit-transform 0.12s cubic-bezier(0,0,0.2,1),visibility 0s linear;
+  -webkit-transition: transform 0.12s cubic-bezier(0,0,0.2,1),visibility 0s linear;
+  transition: transform 0.12s cubic-bezier(0,0,0.2,1),visibility 0s linear;
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+
+.c4 {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: #ffffff;
+  -webkit-overflow-scrolling: touch;
+}
+
+.c3 {
+  position: relative;
+  z-index: 99;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  max-height: 66%;
+  margin: auto 0;
+  overflow: hidden;
+  pointer-events: auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  background-color: #ffffff;
+  border-radius: 6px;
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04);
+  -webkit-animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards;
+  animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards;
+  width: 300px;
+}
+
+.c2 {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 16px;
+  pointer-events: none;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c2::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: '';
+  background-color: rgba(27,31,36,0.5);
+}
+
+.c0 > summary {
+  list-style: none;
+}
+
+.c0 > summary::before {
+  display: none;
+}
+
+.c0 > summary::-webkit-details-marker {
+  display: none;
+}
+
+@media (min-width:544px) {
+  .c7 {
+    padding: 4px 8px;
+  }
+}
+
+@media (min-width:544px) {
+  .c5 {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}
+
+@media (hover:hover) {
+  .c5:hover,
+  .c5:active,
+  .c5:focus {
+    background-color: rgba(234,238,242,0.5);
+  }
+}
+
+@media (hover:none) {
+  .c5 {
+    -webkit-tap-highlight-color: rgba(175,184,193,0.5);
+  }
+
+  .c5:focus,
+  .c5:active {
+    background-color: #f6f8fa;
+  }
+}
+
+@media (hover:hover) {
+  .c4 .SelectMenuTab:focus {
+    background-color: #b6e3ff;
+  }
+
+  .c4 .SelectMenuTab:not([aria-checked='true']):hover {
+    color: #24292f;
+    background-color: #f6f8fa;
+  }
+
+  .c4 .SelectMenuTab:not([aria-checked='true']):active {
+    color: #24292f;
+    background-color: #f6f8fa;
+  }
+}
+
+@media (min-width:544px) {
+  .c3 {
+    height: auto;
+    max-height: 350px;
+    margin: 4px 0 16px 0;
+    font-size: 12px;
+    border: 1px solid #d0d7de;
+    border-radius: 6px;
+    box-shadow: 0 1px 0 rgba(27,31,36,0.04);
+  }
+}
+
+@media (min-width:544px) {
+  .c2::before {
+    display: none;
+  }
+}
+
+@media (min-width:544px) {
+  .c2 {
+    position: absolute;
+    top: auto;
+    right: 0;
+    bottom: auto;
+    left: auto;
+    padding: 0;
+  }
+}
+
+<details
+  className="c0"
+  onToggle={[Function]}
+  open={false}
+>
+  <summary
+    className="c1"
+  >
+    Projects
+  </summary>
+  <div
+    className="c2"
+    role="menu"
+    title="Projects"
+  >
+    <div
+      className="c3"
+      width="300px"
+    >
+      <div
+        className="c4"
+      >
+        <a
+          aria-checked={true}
+          className="c5"
+          href="#"
+          onClick={[Function]}
+          role="menuitemcheckbox"
+        >
+          <svg
+            aria-hidden="true"
+            className="SelectMenu-icon SelectMenu-selected-icon"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+          Primer Components bugs
+        </a>
+        <a
+          aria-checked={false}
+          className="c5"
+          data-test="menu-item"
+          href="#"
+          onClick={[Function]}
+          role="menuitemcheckbox"
+        >
+          <svg
+            aria-hidden="true"
+            className="SelectMenu-icon SelectMenu-selected-icon"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+          Primer Components roadmap
+        </a>
+        <div
+          className="c6"
+        >
+          stuff
+        </div>
+        <a
+          aria-checked={false}
+          className="c5"
+          href="#"
+          onClick={[Function]}
+          role="menuitemcheckbox"
+        >
+          <svg
+            aria-hidden="true"
+            className="SelectMenu-icon SelectMenu-selected-icon"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+           Project 3
+        </a>
+        <a
+          aria-checked={false}
+          className="c5"
+          href="#"
+          onClick={[Function]}
+          role="menuitemcheckbox"
+        >
+          <svg
+            aria-hidden="true"
+            className="SelectMenu-icon SelectMenu-selected-icon"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+          Project 4
+        </a>
+        <footer
+          className="c7"
+        >
+          footer
+        </footer>
+      </div>
+    </div>
+  </div>
+</details>
+`;

package/src/__tests__/__snapshots__/SelectPanel.tsx.snap

@@ -0,0 +1,123 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectPanel renders consistently 1`] = `
+.c0 {
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+  line-height: 1.5;
+  color: #24292f;
+}
+
+.c1 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 16px;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 6px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  font-size: 14px;
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c1:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c1:focus {
+  outline: none;
+}
+
+.c1:disabled {
+  cursor: default;
+}
+
+.c1:disabled svg {
+  opacity: 0.6;
+}
+
+.c1:hover {
+  background-color: #f3f4f6;
+  border-color: rgba(27,31,36,0.15);
+}
+
+.c1:focus {
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c1:active {
+  background-color: hsla(220,14%,94%,1);
+  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
+}
+
+.c1:disabled {
+  color: #57606a;
+  background-color: #f6f8fa;
+  border-color: rgba(27,31,36,0.15);
+}
+
+.c2 {
+  margin-left: 4px;
+}
+
+<div
+  className="c0"
+  color="text.primary"
+  data-portal-root={true}
+  fontFamily="normal"
+>
+  <button
+    aria-haspopup="true"
+    aria-labelledby="react-aria-1"
+    className="c1"
+    id="react-aria-1"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    Select Items
+    <svg
+      aria-hidden="true"
+      className="c2"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<path d=\\"M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z\\"></path>",
+        }
+      }
+      fill="currentColor"
+      height={16}
+      role="img"
+      style={
+        Object {
+          "display": "inline-block",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 16 16"
+      width={16}
+    />
+  </button>
+  <div
+    id="portal-root"
+  />
+</div>
+`;