Merge branch 'main' into mp/segmented-control-fullWidth-responsive

Author: mperrotti

.changeset/hip-buses-eat.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Change `createSlots` to use layout effects when registering slots

.github/workflows/deploy_preview.yml

@@ -9,7 +9,10 @@ permissions:
 
 jobs:
   deploy-preview:
-    if: ${{ github.repository == 'primer/react' }}
+    # if the source repository for pull request is a fork, we don't want to run this workflow,
+    # we run deploy_preview_forks.yml which uses pull_request_target instead.
+    # see https://github.com/primer/react/pull/2207 for details
+    if: ${{ github.event.pull_request.head.repo.full_name == 'primer/react' }} # source repository for pull_request
     name: Preview
     uses: primer/.github/.github/workflows/deploy_preview.yml@main
     permissions:

.github/workflows/deploy_preview_forks.yml

@@ -0,0 +1,23 @@
+name: Deploy (fork)
+on:
+  pull_request_target:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy-preview:
+    if: ${{ github.repository == 'primer/react' }} # target repository for pull_request
+    name: Preview
+    uses: primer/.github/.github/workflows/deploy_preview.yml@main
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    with:
+      node_version: 14
+      install: npm ci && cd docs && npm ci && cd ..
+      build: npm run build:docs:preview
+      output_dir: docs/public

src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap

@@ -12,19 +12,46 @@ exports[`CheckboxGroup renders consistently 1`] = `
   padding: 0;
 }
 
-.c3 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c4 > input {
+.c5 > input {
   margin-left: 0;
   margin-right: 0;
 }
 
+.c7 {
+  margin-left: 8px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
 .c2 {
+  display: block;
+  font-size: 16px;
+}
+
+.c8 {
+  font-weight: 600;
+  font-size: 14px;
+  display: block;
+  color: #24292f;
+  cursor: pointer;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+}
+
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -37,25 +64,25 @@ exports[`CheckboxGroup renders consistently 1`] = `
   padding: 0;
 }
 
-.c2 > * + * {
+.c3 > * + * {
   margin-top: 8px;
 }
 
-.c5 {
+.c6 {
   cursor: pointer;
 }
 
-.c5:focus:not(:disabled) {
+.c6:focus:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
 }
 
-.c5:focus:not(:disabled):not(:focus-visible) {
+.c6:focus:not(:disabled):not(:focus-visible) {
   outline: solid 1px transparent;
 }
 
-.c5:focus-visible:not(:disabled) {
+.c6:focus-visible:not(:disabled) {
   box-shadow: none;
   outline: 2px solid #0969da;
   outline-offset: 0;
@@ -68,72 +95,111 @@ exports[`CheckboxGroup renders consistently 1`] = `
   >
     <legend
       className="c1"
-    />
+    >
+      <span
+        className="c2"
+      >
+        Choices
+      </span>
+    </legend>
     <div
-      className="c2"
+      className="c3"
     >
       <div
-        className="c3"
+        className="c4"
         display="flex"
       >
         <div
-          className="c4"
+          className="c5"
         >
           <input
             aria-checked="false"
             aria-disabled="false"
             aria-invalid="false"
             aria-required="false"
-            className="c5"
+            className="c6"
             id="react-aria-2"
             name="one"
             onChange={[Function]}
             type="checkbox"
             value="one"
           />
         </div>
+        <div
+          className="c7"
+          display="flex"
+        >
+          <label
+            className="c8"
+            htmlFor="react-aria-2"
+          >
+            Choice one
+          </label>
+        </div>
       </div>
       <div
-        className="c3"
+        className="c4"
         display="flex"
       >
         <div
-          className="c4"
+          className="c5"
         >
           <input
             aria-checked="false"
             aria-disabled="false"
             aria-invalid="false"
             aria-required="false"
-            className="c5"
+            className="c6"
             id="react-aria-3"
             name="two"
             onChange={[Function]}
             type="checkbox"
             value="two"
           />
         </div>
+        <div
+          className="c7"
+          display="flex"
+        >
+          <label
+            className="c8"
+            htmlFor="react-aria-3"
+          >
+            Choice two
+          </label>
+        </div>
       </div>
       <div
-        className="c3"
+        className="c4"
         display="flex"
       >
         <div
-          className="c4"
+          className="c5"
         >
           <input
             aria-checked="false"
             aria-disabled="false"
             aria-invalid="false"
             aria-required="false"
-            className="c5"
+            className="c6"
             id="react-aria-4"
             name="three"
             onChange={[Function]}
             type="checkbox"
             value="three"
           />
         </div>
+        <div
+          className="c7"
+          display="flex"
+        >
+          <label
+            className="c8"
+            htmlFor="react-aria-4"
+          >
+            Choice three
+          </label>
+        </div>
       </div>
     </div>
   </fieldset>