Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add more Octicon support #1694

Merged
merged 5 commits into from
Oct 25, 2021
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 15 additions & 8 deletions docs/content/components/alerts.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```
Expand Down Expand Up @@ -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>
```

Expand Down
25 changes: 20 additions & 5 deletions docs/content/components/autocomplete.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
24 changes: 24 additions & 0 deletions docs/content/components/forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```
9 changes: 9 additions & 0 deletions src/alerts/flash.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Comment on lines +61 to +68
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This adds support for Octicon icons in .btn in .flash alerts. Without this override the icon picks up the color for icons outside of .btn.

Before After
Screen Shot 2021-10-22 at 16 30 20 Screen Shot 2021-10-22 at 16 30 31

}

//
Expand Down
8 changes: 8 additions & 0 deletions src/autocomplete/suggester.scss
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@
small {
color: var(--color-fg-on-emphasis);
}

.octicon {
color: inherit !important;
}
Comment on lines +50 to +52
Copy link
Contributor Author

@simurai simurai Oct 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This allows adding colored Octicon icons to a .suggester. The !important is needed when utilities like color-fg-danger are used.

Before After
Screen Shot 2021-10-22 at 13 17 39 Screen Shot 2021-10-22 at 13 21 35

}

&[aria-selected="true"],
Expand All @@ -57,6 +61,10 @@
small {
color: var(--color-fg-on-emphasis);
}

.octicon {
color: inherit !important;
}
}
}
}
Expand Down
19 changes: 19 additions & 0 deletions src/forms/radio-group.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Comment on lines +37 to +40
Copy link
Contributor Author

@simurai simurai Oct 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This adds Octicon support for .radio-group. As well as making options disabled.

Screen Shot 2021-10-22 at 14 31 29

}

.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;
}
}
}
}