@primer/components 31.2.0-rc.c7f73427 → 31.2.1-rc.0e01900c

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

@@ -21,6 +21,7 @@ exports[`CircleBadge CircleBadge.Icon renders consistently 1`] = `
   style={
     Object {
       "display": "inline-block",
+      "overflow": "visible",
       "userSelect": "none",
       "verticalAlign": "text-bottom",
     }

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

@@ -52,6 +52,7 @@ exports[`CircleOcticon renders consistently 1`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }

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

@@ -163,6 +163,7 @@ Array [
         style={
           Object {
             "display": "inline-block",
+            "overflow": "visible",
             "userSelect": "none",
             "verticalAlign": "text-bottom",
           }

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

@@ -95,6 +95,7 @@ exports[`DropdownMenu renders consistently 1`] = `
     style={
       Object {
         "display": "inline-block",
+        "overflow": "visible",
         "userSelect": "none",
         "verticalAlign": "text-bottom",
       }

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

@@ -0,0 +1,300 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button renders consistently 1`] = `
+.c0 {
+  border-radius: 6px;
+  border: 1px solid;
+  border-color: rgba(27,31,36,0.15);
+  display: grid;
+  grid-template-areas: "leadingIcon text trailingIcon";
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 16px;
+  padding-right: 16px;
+  font-size: 14px;
+  color: #24292f;
+  background-color: #f6f8fa;
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c0 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  color: #8c959f;
+  background-color: btn.disabledBg;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c0 [data-component="leadingIcon"] {
+  grid-area: leadingIcon;
+}
+
+.c0 [data-component="text"] {
+  grid-area: text;
+}
+
+.c0 [data-component="trailingIcon"] {
+  grid-area: trailingIcon;
+}
+
+.c0 [data-component="ButtonCounter"] {
+  font-size: 14px;
+}
+
+.c0:hover:not([disabled]) {
+  background-color: #f3f4f6;
+}
+
+.c0:focus:not([disabled]) {
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0:active:not([disabled]) {
+  background-color: hsla(220,14%,94%,1);
+  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
+}
+
+<button
+  className="c0"
+>
+  <span
+    data-component="text"
+  />
+</button>
+`;
+
+exports[`Button respects the "disabled" prop 1`] = `
+.c0 {
+  border-radius: 6px;
+  border: 1px solid;
+  border-color: rgba(27,31,36,0.15);
+  display: grid;
+  grid-template-areas: "leadingIcon text trailingIcon";
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 16px;
+  padding-right: 16px;
+  font-size: 14px;
+  color: #24292f;
+  background-color: #f6f8fa;
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c0 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  color: #8c959f;
+  background-color: btn.disabledBg;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c0 [data-component="leadingIcon"] {
+  grid-area: leadingIcon;
+}
+
+.c0 [data-component="text"] {
+  grid-area: text;
+}
+
+.c0 [data-component="trailingIcon"] {
+  grid-area: trailingIcon;
+}
+
+.c0 [data-component="ButtonCounter"] {
+  font-size: 14px;
+}
+
+.c0:hover:not([disabled]) {
+  background-color: #f3f4f6;
+}
+
+.c0:focus:not([disabled]) {
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0:active:not([disabled]) {
+  background-color: hsla(220,14%,94%,1);
+  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
+}
+
+<button
+  className="c0"
+  disabled={true}
+>
+  <span
+    data-component="text"
+  >
+     Disabled
+  </span>
+</button>
+`;
+
+exports[`Button styles icon only button to make it a square 1`] = `
+.c1 {
+  display: inline-block;
+}
+
+.c0 {
+  border-radius: 6px;
+  border: 1px solid;
+  border-color: rgba(27,31,36,0.15);
+  display: grid;
+  grid-template-areas: "leadingIcon text trailingIcon";
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 7px;
+  padding-right: 7px;
+  font-size: 14px;
+  color: #24292f;
+  background-color: #f6f8fa;
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c0 > :not(:last-child) {
+  margin-right: 8px;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  color: #8c959f;
+  background-color: btn.disabledBg;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c0 [data-component="leadingIcon"] {
+  grid-area: leadingIcon;
+}
+
+.c0 [data-component="text"] {
+  grid-area: text;
+}
+
+.c0 [data-component="trailingIcon"] {
+  grid-area: trailingIcon;
+}
+
+.c0 [data-component="ButtonCounter"] {
+  font-size: 14px;
+}
+
+.c0:hover:not([disabled]) {
+  background-color: #f3f4f6;
+}
+
+.c0:focus:not([disabled]) {
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0:active:not([disabled]) {
+  background-color: hsla(220,14%,94%,1);
+  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
+}
+
+<button
+  className="c0"
+>
+  <span
+    data-component="text"
+    hidden={true}
+  >
+    Search icon only button
+  </span>
+  <span
+    aria-hidden={false}
+    className="c1"
+    data-component="icon-only"
+  >
+    <svg
+      aria-hidden="true"
+      className="octicon octicon-search"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<path fill-rule=\\"evenodd\\" d=\\"M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z\\"></path>",
+        }
+      }
+      fill="currentColor"
+      height={16}
+      role="img"
+      style={
+        Object {
+          "display": "inline-block",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 16 16"
+      width={16}
+    />
+  </span>
+</button>
+`;

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

@@ -352,6 +352,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
             style={
               Object {
                 "display": "inline-block",
+                "overflow": "visible",
                 "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
@@ -383,6 +384,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
             style={
               Object {
                 "display": "inline-block",
+                "overflow": "visible",
                 "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
@@ -418,6 +420,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
             style={
               Object {
                 "display": "inline-block",
+                "overflow": "visible",
                 "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }
@@ -448,6 +451,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
             style={
               Object {
                 "display": "inline-block",
+                "overflow": "visible",
                 "userSelect": "none",
                 "verticalAlign": "text-bottom",
               }

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

@@ -108,6 +108,7 @@ exports[`SelectPanel renders consistently 1`] = `
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }

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

@@ -36,7 +36,7 @@ exports[`StateLabel renders children 1`] = `
     className="c1"
     dangerouslySetInnerHTML={
       Object {
-        "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
+        "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
       }
     }
     fill="currentColor"
@@ -45,6 +45,7 @@ exports[`StateLabel renders children 1`] = `
     style={
       Object {
         "display": "inline-block",
+        "overflow": "visible",
         "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
@@ -92,7 +93,7 @@ exports[`StateLabel renders consistently 1`] = `
     className="c1"
     dangerouslySetInnerHTML={
       Object {
-        "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
+        "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
       }
     }
     fill="currentColor"
@@ -101,6 +102,7 @@ exports[`StateLabel renders consistently 1`] = `
     style={
       Object {
         "display": "inline-block",
+        "overflow": "visible",
         "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
@@ -148,7 +150,7 @@ exports[`StateLabel respects the status prop 1`] = `
     className="c1"
     dangerouslySetInnerHTML={
       Object {
-        "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
+        "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
       }
     }
     fill="currentColor"
@@ -157,6 +159,7 @@ exports[`StateLabel respects the status prop 1`] = `
     style={
       Object {
         "display": "inline-block",
+        "overflow": "visible",
         "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
@@ -203,7 +206,7 @@ exports[`StateLabel respects the status prop 2`] = `
     className="c1"
     dangerouslySetInnerHTML={
       Object {
-        "__html": "<path fill-rule=\\"evenodd\\" d=\\"M1.5 8a6.5 6.5 0 0110.65-5.003.75.75 0 00.959-1.153 8 8 0 102.592 8.33.75.75 0 10-1.444-.407A6.5 6.5 0 011.5 8zM8 12a1 1 0 100-2 1 1 0 000 2zm0-8a.75.75 0 01.75.75v3.5a.75.75 0 11-1.5 0v-3.5A.75.75 0 018 4zm4.78 4.28l3-3a.75.75 0 00-1.06-1.06l-2.47 2.47-.97-.97a.749.749 0 10-1.06 1.06l1.5 1.5a.75.75 0 001.06 0z\\"></path>",
+        "__html": "<path d=\\"M11.28 6.78a.75.75 0 00-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l3.5-3.5z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M16 8A8 8 0 110 8a8 8 0 0116 0zm-1.5 0a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z\\"></path>",
       }
     }
     fill="currentColor"
@@ -212,6 +215,7 @@ exports[`StateLabel respects the status prop 2`] = `
     style={
       Object {
         "display": "inline-block",
+        "overflow": "visible",
         "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
@@ -267,6 +271,7 @@ exports[`StateLabel respects the status prop 3`] = `
     style={
       Object {
         "display": "inline-block",
+        "overflow": "visible",
         "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
@@ -313,7 +318,7 @@ exports[`StateLabel respects the variant prop 1`] = `
     className="c1"
     dangerouslySetInnerHTML={
       Object {
-        "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
+        "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
       }
     }
     fill="currentColor"
@@ -322,6 +327,7 @@ exports[`StateLabel respects the variant prop 1`] = `
     style={
       Object {
         "display": "inline-block",
+        "overflow": "visible",
         "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
@@ -368,7 +374,7 @@ exports[`StateLabel respects the variant prop 2`] = `
     className="c1"
     dangerouslySetInnerHTML={
       Object {
-        "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
+        "__html": "<path d=\\"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z\\"></path>",
       }
     }
     fill="currentColor"
@@ -377,6 +383,7 @@ exports[`StateLabel respects the variant prop 2`] = `
     style={
       Object {
         "display": "inline-block",
+        "overflow": "visible",
         "userSelect": "none",
         "verticalAlign": "text-bottom",
       }

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

@@ -15,6 +15,7 @@ exports[`StyledOcticon renders consistently 1`] = `
   style={
     Object {
       "display": "inline-block",
+      "overflow": "visible",
       "userSelect": "none",
       "verticalAlign": "text-bottom",
     }