Skip to content

Commit

Permalink
Icon updates (#810)
Browse files Browse the repository at this point in the history 
* feat(icons): start updating icons

* feat(icons): update more icons

* feat(icons): continue icon work

* feat(icons): finish up icon updates

* fix(overflow): fix hover colors on overflow menu
  • Loading branch information
@tw15egan
tw15egan authored May 25, 2018
1 parent aa76c18 commit 7e732c8
Show file tree
Hide file tree
Showing 42 changed files with 487 additions and 464 deletions.
2 changes: 1 addition & 1 deletion src/components/accordion/accordion--legacy.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,4 +47,4 @@
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</li>
</ul>
</ul>
16 changes: 8 additions & 8 deletions src/components/accordion/accordion.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<ul data-accordion class="bx--accordion">
<li data-accordion-item class="bx--accordion__item">
<button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane1">
<svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
<path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
<svg class="bx--accordion__arrow" width="7" height="12" viewBox="0 0 7 12">
<path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
</svg>
<p class="bx--accordion__title">Section 1 title </p>
</button>
Expand All @@ -13,8 +13,8 @@
</li>
<li data-accordion-item class="bx--accordion__item">
<button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane2">
<svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
<path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
<svg class="bx--accordion__arrow" width="7" height="12" viewBox="0 0 7 12">
<path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
</svg>
<p class="bx--accordion__title">Section 2 title</p>
</button>
Expand All @@ -25,8 +25,8 @@
</li>
<li data-accordion-item class="bx--accordion__item">
<button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane3">
<svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
<path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
<svg class="bx--accordion__arrow" width="7" height="12" viewBox="0 0 7 12">
<path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
</svg>
<p class="bx--accordion__title">Section 3 title</p>
</button>
Expand All @@ -37,8 +37,8 @@
</li>
<li data-accordion-item class="bx--accordion__item">
<button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane4">
<svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
<path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
<svg class="bx--accordion__arrow" width="7" height="12" viewBox="0 0 7 12">
<path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
</svg>
<p class="bx--accordion__title">Section 4 title</p>
</button>
Expand Down
5 changes: 5 additions & 0 deletions src/components/button/_button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,11 @@
&:focus:disabled {
color: $ui-05;
}

&:hover > .#{$prefix}--btn__icon,
&:focus > .#{$prefix}--btn__icon {
fill: $inverse-01;
}
}

.#{$prefix}--btn--ghost {
Expand Down
11 changes: 6 additions & 5 deletions src/components/button/button.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" {{#if danger}}aria-label="danger"{{/if}} type="button">Button</button>
<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" {{#if danger}}aria-label="danger"{{/if}} type="button" disabled>Button</button>
<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" {{#if danger}}aria-label="danger"{{/if}} type="button">
<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" {{#if danger}}aria-label="danger" {{/if}} type="button">Button</button>
<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" {{#if danger}}aria-label="danger" {{/if}} type="button"
disabled>Button</button>
<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" {{#if danger}}aria-label="danger" {{/if}} type="button">
With icon
<svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
<svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16">
<path d="M7.5 7.5H4v1h3.5V12h1V8.5H12v-1H8.5V4h-1v3.5zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
</svg>
</button>
64 changes: 33 additions & 31 deletions src/components/card/card.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@
<div class="bx--card__card-overview">
<!-- OverflowMenu -->
<div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
<svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
<svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
<title>list of options</title>
<circle cx="2" cy="2" r="2"></circle>
<circle cx="2" cy="10" r="2"></circle>
<circle cx="2" cy="18" r="2"></circle>
<g fill-rule="evenodd">
<circle cx="1.5" cy="1.5" r="1.5" />
<circle cx="1.5" cy="7.5" r="1.5" />
<circle cx="1.5" cy="13.5" r="1.5" />
</g>
</svg>
<ul class="bx--overflow-menu-options">
<li class="bx--overflow-menu-options__option">
Expand Down Expand Up @@ -37,36 +39,36 @@
</div>
</section>
{{#unless hasStatus}}
<footer class="bx--card-footer">
<button class="bx--btn bx--btn--primary bx--btn--sm" type="button" title="View credentials">View credentials</button>
<a href="" class="bx--card-footer__link">Docs</a>
</footer>
<footer class="bx--card-footer">
<button class="bx--btn bx--btn--primary bx--btn--sm" type="button" title="View credentials">View credentials</button>
<a href="" class="bx--card-footer__link">Docs</a>
</footer>
{{else}}
<div class="bx--card-footer">
<div class="bx--card-footer__app-status">
<div class="bx--card-footer__app-status--running active">
<div class="bx--running__text">Running</div>
</div>
<div class="bx--card-footer__app-status--not-running">
<div class="bx--not-running__text">Not Running</div>
</div>
<div class="bx--card-footer__app-status--stopped">
<div class="bx--stopped__text">Stopped</div>
</div>
<div class="bx--card-footer">
<div class="bx--card-footer__app-status">
<div class="bx--card-footer__app-status--running active">
<div class="bx--running__text">Running</div>
</div>
<div class="bx--card-footer__app-actions">
<button class="bx--app-actions__button" id="restart-app" aria-label="restart-app">
<svg class="bx--app-actions__button--icon" width="12" height="16" viewBox="0 0 12 16" fill-rule="evenodd">
<path d="M6 8l1.3 1.3 1.9-1.9L10.6 6 12 4.7 7.3 0 6 1.2l2.6 2.4H6.1h-.2c-1.7 0-3.3.8-4.4 2C.5 6.7 0 8.1 0 9.6c0 3.3 2.7 6 6 6 1.6 0 3-.6 4-1.6l-1.4-1.4c-.7.6-1.6 1-2.6 1-2.2 0-4-1.8-4-4s1.8-4 4-4H8.8l-.6.6L6 8z"></path>
</svg>
</button>
<button class="bx--app-actions__button" id="load-app" aria-label="load-app">
<svg class="bx--app-actions__button--icon" width="16" height="16" viewBox="-3 5 16 16" fill-rule="evenodd">
<path d="M7.5 12l3.6-3.6V11H13V5H7.1v2h2.5l-3.5 3.5z"></path>
<path d="M11 19H-1V9h5V5h-7v16h16v-7h-2z"></path>
</svg>
</button>
<div class="bx--card-footer__app-status--not-running">
<div class="bx--not-running__text">Not Running</div>
</div>
<div class="bx--card-footer__app-status--stopped">
<div class="bx--stopped__text">Stopped</div>
</div>
</div>
<div class="bx--card-footer__app-actions">
<button class="bx--app-actions__button" id="restart-app" aria-label="restart-app">
<svg class="bx--app-actions__button--icon" width="12" height="16" viewBox="0 0 12 16" fill-rule="evenodd">
<path d="M6 8l1.3 1.3 1.9-1.9L10.6 6 12 4.7 7.3 0 6 1.2l2.6 2.4H6.1h-.2c-1.7 0-3.3.8-4.4 2C.5 6.7 0 8.1 0 9.6c0 3.3 2.7 6 6 6 1.6 0 3-.6 4-1.6l-1.4-1.4c-.7.6-1.6 1-2.6 1-2.2 0-4-1.8-4-4s1.8-4 4-4H8.8l-.6.6L6 8z"></path>
</svg>
</button>
<button class="bx--app-actions__button" id="load-app" aria-label="load-app">
<svg class="bx--app-actions__button--icon" width="16" height="16" viewBox="-3 5 16 16" fill-rule="evenodd">
<path d="M7.5 12l3.6-3.6V11H13V5H7.1v2h2.5l-3.5 3.5z"></path>
<path d="M11 19H-1V9h5V5h-7v16h16v-7h-2z"></path>
</svg>
</button>
</div>
</div>
{{/unless}}
</article>
62 changes: 35 additions & 27 deletions src/components/code-snippet/code-snippet.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
{{#is variant "inline"}}
<p>Here is an example of a text that a user would be reading. In this paragraph would be
<button data-copy-btn="" class="bx--snippet bx--snippet--inline {{#if light}} bx--snippet--light{{/if}}" aria-label="Copy code" tabindex="0">
<code>inline code</code>
<div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
</button>
that the user could look at and copy in to their code editor.</p>
<p>Here is an example of a text that a user would be reading. In this paragraph would be
<button data-copy-btn="" class="bx--snippet bx--snippet--inline {{#if light}} bx--snippet--light{{/if}}" aria-label="Copy code"
tabindex="0">
<code>inline code</code>
<div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
</button>
that the user could look at and copy in to their code editor.</p>
{{else}}

<div class="bx--snippet bx--snippet--{{variant}}" {{#is variant "multi"}}data-code-snippet{{/is}}>
<div class="bx--snippet-container">
<div class="bx--snippet bx--snippet--{{variant}}" {{#is variant "multi"}}data-code-snippet{{/is}}>
<div class="bx--snippet-container">

<pre>
<code>
<pre>
<code>
@mixin grid-container {
width: 100%;
padding-right: padding(mobile);
Expand All @@ -32,23 +33,30 @@ that the user could look at and copy in to their code editor.</p>
hidden : - 1,
overflowHidden: - 1,
floating: 10000
);
);

</code>
</pre>
</div>
<button data-copy-btn class="bx--snippet-button" aria-label="Copy code" tabindex="0">
<svg class="bx--snippet__icon" width="18" height="24" viewBox="0 0 18 24" fill-rule="evenodd">
<path d="M13 5V0H0v19h5v5h13V5h-5zM2 17V2h9v3H5v12H2zm14 5H7V7h9v15z"></path>
<path d="M9 9h5v2H9zM9 12h5v2H9zM9 15h3v2H9z"></path>
</svg>
<div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
</button>
{{#is variant "multi"}}
<button class="bx--btn bx--btn--ghost bx--btn--sm bx--snippet-btn--expand" type="button">
<span class="bx--snippet-btn--text" data-show-more-text="Show more" data-show-less-text="Show less">Show more</span>
<svg class="bx--icon-chevron--down" width='12' height='8' viewBox='0 0 12 8' fill-rule='evenodd' aria-label="Show more icon" alt="Show more icon"><title>Show more icon</title><path d='M10.6 0L6 4.7 1.4 0 0 1.4l6 6.1 6-6.1z'></path></svg>
</button>
{{/is}}
</div>
{{/is}}
<button data-copy-btn class="bx--snippet-button" aria-label="Copy code" tabindex="0">
<svg class="bx--snippet__icon" width="16" height="16" viewBox="0 0 16 16">
<g fill-rule="nonzero">
<path d="M1 10H0V2.008a2 2 0 0 1 1.998-2L9.999 0l.002 1-8.002.008a1 1 0 0 0-1 1V10z" />
<path d="M11 4.207v3.794h3.794L11 4.207zm4 4.794h-4a1 1 0 0 1-1-1V4H4.5a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V9.001zM11 3a.5.5 0 0 1 .354.146l4.5 4.5A.5.5 0 0 1 16 8v6.5a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 3 14.5v-10A1.5 1.5 0 0 1 4.5 3H11z"
/>
</g>
</svg>
<div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
</button>
{{#is variant "multi"}}
<button class="bx--btn bx--btn--ghost bx--btn--sm bx--snippet-btn--expand" type="button">
<span class="bx--snippet-btn--text" data-show-more-text="Show more" data-show-less-text="Show less">Show more</span>
<svg class="bx--icon-chevron--down" width="12" height="7" viewBox="0 0 12 7" aria-label="Show more icon">
<title>Show more icon</title>
<path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
</svg>

</button>
{{/is}}
</div>
{{/is}}
22 changes: 13 additions & 9 deletions src/components/combo-box/combo-box.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,25 @@
<div class="bx--form-item bx--combo-box bx--list-box{{#if disabled}} bx--list-box--disabled{{/if}}">
<div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true"{{#if disabled}} disabled{{/if}}>
<input class="bx--text-input" role="combobox" aria-autocomplete="list" aria-expanded="false" autocomplete="off" value="" id="downshift-input-2" placeholder="Filter..."{{#if disabled}} disabled{{/if}}>
<div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true"
{{#if disabled}} disabled{{/if}}>
<input class="bx--text-input" role="combobox" aria-autocomplete="list" aria-expanded="false" autocomplete="off" value=""
id="downshift-input-2" placeholder="Filter..." {{#if disabled}} disabled{{/if}}>
<div class="bx--list-box__menu-icon">
<svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Open menu">
<title>Open menu</title>
<path d="M10 0L5 5 0 0z"></path>
<svg width="10" height="5" viewBox="0 0 10 5" aria-label="Open menu" name="caret--down" role="img">
<title>Close menu</title>
<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
</svg>
</div>
</div>
</div>
<div class="bx--form-item bx--combo-box bx--list-box{{#if disabled}} bx--list-box--disabled{{/if}}">
<div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true"{{#if disabled}} disabled{{/if}}>
<input class="bx--text-input" role="combobox" aria-autocomplete="list" aria-expanded="true" autocomplete="off" value="" id="downshift-input-2" placeholder="Filter..." aria-activedescendant="downshift-1-item-2"{{#if disabled}} disabled{{/if}}>
<div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true"
{{#if disabled}} disabled{{/if}}>
<input class="bx--text-input" role="combobox" aria-autocomplete="list" aria-expanded="true" autocomplete="off" value="" id="downshift-input-2"
placeholder="Filter..." aria-activedescendant="downshift-1-item-2" {{#if disabled}} disabled{{/if}}>
<div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
<svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Close menu">
<svg width="10" height="5" viewBox="0 0 10 5" aria-label="Open menu" name="caret--down" role="img">
<title>Close menu</title>
<path d="M10 0L5 5 0 0z"></path>
<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
</svg>
</div>
</div>
Expand Down
23 changes: 14 additions & 9 deletions src/components/content-switcher/content-switcher.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
<div data-content-switcher class="bx--content-switcher">
<button class="bx--content-switcher-btn bx--content-switcher--selected" data-target=".demo--panel--opt-1">
{{#if hasIcon}}
<svg class="bx--content-switcher__icon" width="16" height="16" viewBox="0 0 16 16"><path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path></svg>
{{/if}}
First section
<svg class="bx--content-switcher__icon" width="16" height="16" viewBox="0 0 16 16">
<path d="M7.5 7.5H4v1h3.5V12h1V8.5H12v-1H8.5V4h-1v3.5zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
</svg>
{{/if}} First section
</button>
<button class="bx--content-switcher-btn" data-target=".demo--panel--opt-2">
{{#if hasIcon}}
<svg class="bx--content-switcher__icon" width='12' height='9' viewBox='0 0 12 9' fill-rule='evenodd'><path d='M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z'></path></svg>
{{/if}}
Second section
<svg class="bx--content-switcher__icon" width="16" height="16" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
fill-rule="evenodd" />
</svg>
{{/if}} Second section
</button>
<button class="bx--content-switcher-btn" data-target=".demo--panel--opt-3">
{{#if hasIcon}}
<svg class="bx--content-switcher__icon" width='16' height='15' viewBox='0 0 16 15' fill-rule='evenodd'><path d='M8.11 11.75l-4.5 3.2c-.2.1-.5 0-.4-.3l1.5-5.1-4.6-3.2c-.2-.2-.1-.5.1-.5l5.5-.5 2-5.2c.1-.2.4-.2.5 0l2 5.2 5.5.5c.2 0 .3.3.1.4l-4.5 3.3 1.5 5.1c.1.2-.2.4-.4.3l-4.3-3.2z'></path> </svg>
{{/if}}
Third section
<svg class="bx--content-switcher__icon" width="16" height="16" viewBox="0 0 16 16">
<path d="M8.5 7.007h.005v-1h-2v1H7.5v3.991h-2v1h2V12h1v-.002h2v-1h-2V7.007zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM8 4.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"
fill-rule="evenodd" />
</svg>
{{/if}} Third section
</button>
</div>
4 changes: 2 additions & 2 deletions src/components/copy-button/copy-button.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<button data-copy-btn class="bx--btn bx--btn--primary bx--btn--copy bx--btn--sm">
Copy button
<svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
<svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16">
<path d="M7.5 7.5H4v1h3.5V12h1V8.5H12v-1H8.5V4h-1v3.5zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
</svg>
<div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
</button>
Loading

0 comments on commit 7e732c8

Please sign in to comment.