Add more Octicon support (#1694)

simurai · web-flow · commit b0e1687a562a · 2021-10-25T00:49:49.000Z
* Add colored octicon support to .suggester

* Add octicon support for .radio-group

+ disabled state

* Add support for octicon in .btn in .flash

* Create dry-tips-scream.md
diff --git a/.changeset/dry-tips-scream.md b/.changeset/dry-tips-scream.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Add more Octicon icon support to components
diff --git a/docs/content/components/alerts.md b/docs/content/components/alerts.md
@@ -69,25 +69,25 @@ Add an icon to the left of the flash message to give it some funky fresh attenti
 ```html live
 <div class="flash">
   <!-- <%= octicon "info" %> -->
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><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 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"></path></svg>
+  <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><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 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"></path></svg>
   Flash message with an icon
 </div>
 
 <div class="flash mt-3 flash-warn">
   <!-- <%= octicon "alert" %> -->
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path></svg>
+  <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path></svg>
   Flash message with an icon
 </div>
 
 <div class="flash mt-3 flash-error">
   <!-- <%= octicon "stop" %> -->
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4.47.22A.75.75 0 015 0h6a.75.75 0 01.53.22l4.25 4.25c.141.14.22.331.22.53v6a.75.75 0 01-.22.53l-4.25 4.25A.75.75 0 0111 16H5a.75.75 0 01-.53-.22L.22 11.53A.75.75 0 010 11V5a.75.75 0 01.22-.53L4.47.22zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5H5.31zM8 4a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 4zm0 8a1 1 0 100-2 1 1 0 000 2z"></path></svg>
+  <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4.47.22A.75.75 0 015 0h6a.75.75 0 01.53.22l4.25 4.25c.141.14.22.331.22.53v6a.75.75 0 01-.22.53l-4.25 4.25A.75.75 0 0111 16H5a.75.75 0 01-.53-.22L.22 11.53A.75.75 0 010 11V5a.75.75 0 01.22-.53L4.47.22zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5H5.31zM8 4a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 4zm0 8a1 1 0 100-2 1 1 0 000 2z"></path></svg>
   Flash message with an icon
 </div>
 
 <div class="flash mt-3 flash-success">
   <!-- <%= octicon "check" %> -->
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><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></svg>
+  <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><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></svg>
   Flash message with an icon
 </div>
 ```
@@ -147,22 +147,29 @@ A flash message with an action button.
 ```html live
 <div class="flash">
   Flash message with action here.
-  <button type="submit" class="btn btn-sm primary flash-action">Complete action</button>
+  <button type="submit" class="btn btn-sm flash-action">Complete action</button>
 </div>
 
 <div class="flash mt-3 flash-warn">
   Flash message with action here.
-  <button class="btn btn-sm primary flash-action" type="submit">Complete action</button>
+  <button class="btn btn-sm flash-action" type="submit">Complete action</button>
 </div>
 
 <div class="flash mt-3 flash-error">
   Flash message with action here.
-  <button class="btn btn-sm primary flash-action" type="submit">Complete action</button>
+  <button class="btn btn-sm flash-action" type="submit">
+    <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path></svg>
+    Complete action
+  </button>
 </div>
 
 <div class="flash mt-3 flash-success">
+  <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M5.75 7.5a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zm5.25.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5z"></path><path fill-rule="evenodd" d="M6.25 0a.75.75 0 000 1.5H7.5v2H3.75A2.25 2.25 0 001.5 5.75V8H.75a.75.75 0 000 1.5h.75v2.75a2.25 2.25 0 002.25 2.25h8.5a2.25 2.25 0 002.25-2.25V9.5h.75a.75.75 0 000-1.5h-.75V5.75a2.25 2.25 0 00-2.25-2.25H9V.75A.75.75 0 008.25 0h-2zM3 5.75A.75.75 0 013.75 5h8.5a.75.75 0 01.75.75v6.5a.75.75 0 01-.75.75h-8.5a.75.75 0 01-.75-.75v-6.5z"></path></svg>
   Flash message with action here.
-  <button class="btn btn-sm primary flash-action" type="submit">Complete action</button>
+  <button class="btn btn-sm flash-action" type="submit">
+    <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 010 1.5h-2.5a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 010 1.5h-2.5A1.75 1.75 0 012 13.25V2.75zm10.44 4.5H6.75a.75.75 0 000 1.5h5.69l-1.97 1.97a.75.75 0 101.06 1.06l3.25-3.25a.75.75 0 000-1.06l-3.25-3.25a.75.75 0 10-1.06 1.06l1.97 1.97z"></path></svg>
+    Complete action
+  </button>
 </div>
 ```
 
diff --git a/docs/content/components/autocomplete.md b/docs/content/components/autocomplete.md
@@ -58,11 +58,26 @@ The `.suggester` component is meant for showing suggestions while typing in a la
 <div class="form-group position-relative">
   <textarea class="form-control width-full" placeholder="Leave a comment" aria-label="Comment body">This is on top of #</textarea>
   <ul class="suggester suggester-container" role="listbox" style="top: 4px; left: 125px;">
-    <li aria-selected="true"> <small>#924</small> <span>Markdown tables are inaccessible</span> </li>
-    <li> <small>#980</small> <span>Use actual book emoji in Flexbox docs</span> </li>
-    <li> <small>#979</small> <span>Add `.radio-group` component</span> </li>
-    <li> <small>#925</small> <span>Release 14.0.0</span> </li>
-    <li> <small>#978</small> <span>Add `.css-truncate-overflow`</span> </li>
+    <li aria-selected="true">
+      <svg class="octicon color-fg-subtle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><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></svg>
+      <small>#924</small> <span>Markdown tables are inaccessible</span>
+    </li>
+    <li>
+      <svg class="octicon color-fg-success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><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></svg>
+      <small>#980</small> <span>Use actual book emoji in Flexbox docs</span>
+    </li>
+    <li>
+      <svg class="octicon color-fg-attention" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><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></svg>
+      <small>#979</small> <span>Add `.radio-group` component</span>
+    </li>
+    <li>
+      <svg class="octicon color-fg-danger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><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></svg>
+      <small>#925</small> <span>Release 14.0.0</span>
+    </li>
+    <li>
+      <svg class="octicon color-fg-done" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><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></svg>
+      <small>#978</small> <span>Add `.css-truncate-overflow`</span>
+    </li>
   </ul>
 </div>
 
diff --git a/docs/content/components/forms.md b/docs/content/components/forms.md
@@ -392,3 +392,27 @@ Radio groups are tab like controls. Their blue border gives extra emphasis to wh
   </div>
 </form>
 ```
+
+Adding `octicon` icons is also supported. To disable an option, use the `disabled` attribute.
+
+```html live
+<form>
+  <div class="radio-group">
+    <input class="radio-input" id="option-a" type="radio" name="options">
+    <label class="radio-label" for="option-a">
+      <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg>
+      Option A
+    </label>
+    <input class="radio-input" id="option-b" type="radio" name="options">
+    <label class="radio-label" for="option-b">
+      <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"></path></svg>
+      Option B
+    </label>
+    <input class="radio-input" id="option-c" type="radio" name="options" disabled>
+    <label class="radio-label" for="option-c">
+      <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.5 1.75a.25.25 0 01.25-.25h2.5a.25.25 0 01.25.25V3h-3V1.75zm4.5 0V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"></path></svg>
+      Option C
+    </label>
+  </div>
+</form>
+```
diff --git a/src/alerts/flash.scss b/src/alerts/flash.scss
@@ -57,6 +57,15 @@
   margin-top: -3px;
   margin-left: $spacer-4;
   background-clip: padding-box;
+
+  &.btn .octicon {
+    margin-right: $spacer-1;
+    color: var(--color-fg-muted);
+  }
+
+  &.btn-primary .octicon {
+    color: inherit;
+  }
 }
 
 //
diff --git a/src/autocomplete/suggester.scss b/src/autocomplete/suggester.scss
@@ -46,6 +46,10 @@
       small {
         color: var(--color-fg-on-emphasis);
       }
+
+      .octicon {
+        color: inherit !important;
+      }
     }
 
     &[aria-selected="true"],
@@ -57,6 +61,10 @@
       small {
         color: var(--color-fg-on-emphasis);
       }
+
+      .octicon {
+        color: inherit !important;
+      }
     }
   }
 }
diff --git a/src/forms/radio-group.scss b/src/forms/radio-group.scss
@@ -33,11 +33,30 @@
     border-top-right-radius: $border-radius;
     border-bottom-right-radius: $border-radius;
   }
+
+  .octicon {
+    margin-left: $spacer-1;
+    color: var(--color-fg-subtle);
+  }
 }
 
 .radio-input {
   z-index: 3;
   float: left;
   // stylelint-disable-next-line primer/spacing
   margin: 10px (-$spacer-5) 0 $spacer-3;
+
+  &:disabled {
+    position: relative; // enables z-index
+
+    + .radio-label {
+      color: var(--color-primer-fg-disabled);
+      cursor: default;
+      background-color: var(--color-neutral-subtle);
+
+      .octicon {
+        color: inherit;
+      }
+    }
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,10 @@`
`46`	`46`	`small {`
`47`	`47`	`color: var(--color-fg-on-emphasis);`
`48`	`48`	`}`
	`49`	`+`
	`50`	`+ .octicon {`
	`51`	`+ color: inherit !important;`
	`52`	`+ }`
`49`	`53`	`}`
`50`	`54`
`51`	`55`	`&[aria-selected="true"],`
`@@ -57,6 +61,10 @@`
`57`	`61`	`small {`
`58`	`62`	`color: var(--color-fg-on-emphasis);`
`59`	`63`	`}`
	`64`	`+`
	`65`	`+ .octicon {`
	`66`	`+ color: inherit !important;`
	`67`	`+ }`
`60`	`68`	`}`
`61`	`69`	`}`
`62`	`70`	`}`