@primer/components 31.0.2-rc.1e80de40 → 31.1.0

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

@@ -1,44 +0,0 @@
-// 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.test.tsx.snap

@@ -1,53 +0,0 @@
-// 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.test.tsx.snap

@@ -1,469 +0,0 @@
-// 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: #8c959f;
-  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.test.tsx.snap

@@ -1,123 +0,0 @@
-// 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: #8c959f;
-  background-color: #f6f8fa;
-  border-color: rgba(27,31,36,0.15);
-}
-
-.c2 {
-  margin-left: 4px;
-}
-
-<div
-  className="c0"
-  color="fg.default"
-  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>
-`;