feat: add ability to hide the highlight border (#186)

README.md

@@ -161,6 +161,7 @@ Add the `d2l-navigation-main-footer` component, and provide elements for the `ma
 | `disabled` | Boolean | Disables the button |
 | `text` | String, required | Text for the button |
 | `icon` | String | Preset icon key (e.g. `tier1:gear`) |
+| `no-highlight-border` | Boolean | Visually hides the highlight border when hovered/focused |
 | `text-hidden` | Boolean | Visually hides the text |
 
 ---

d2l-navigation-button-icon.js

@@ -29,6 +29,11 @@ class NavigationButtonIcon extends FocusMixin(LitElement) {
 			 * @type {'start'|'end'}
 			 */
 			iconPosition: { attribute: 'icon-position', type: String },
+			/**
+			 * Visually hides the highlight border when hovered/focused
+			 * @type {boolean}
+			 */
+			noHighlightBorder: { attribute: 'no-highlight-border', type: Boolean },
 			/**
 			 * REQUIRED: Text for the button
 			 * @type {string}
@@ -58,6 +63,7 @@ class NavigationButtonIcon extends FocusMixin(LitElement) {
 		super();
 		this.disabled = false;
 		this.iconPosition = 'start';
+		this.noHighlightBorder = false;
 		this.textHidden = false;
 		this._buttonId = getUniqueId();
 	}
@@ -68,7 +74,7 @@ class NavigationButtonIcon extends FocusMixin(LitElement) {
 
 	render() {
 		const { ariaLabel, id, text, tooltip } = this._getRenderSettings();
-		const highlightBorder = !this.disabled ? html`<span class="d2l-navigation-highlight-border"></span>` : nothing;
+		const highlightBorder = (!this.disabled && !this.noHighlightBorder) ? html`<span class="d2l-navigation-highlight-border"></span>` : nothing;
 		const icon = html`<d2l-icon icon="${this.icon}"></d2l-icon>`;
 		return html`
 			<button id="${ifDefined(id)}" ?disabled="${this.disabled}" aria-label="${ifDefined(ariaLabel)}" type="button">

test/button.visual-diff.html

@@ -39,6 +39,9 @@
 		<div class="visual-diff">
 			<d2l-navigation-button-icon id="icon-text-flip" icon="tier3:classes" icon-position="end" text="Classes"></d2l-navigation-button-icon>
 		</div>
+		<div class="visual-diff">
+			<d2l-navigation-button-icon id="icon-text-no-highlight-border" icon="tier3:classes" text="Classes" no-highlight-border></d2l-navigation-button-icon>
+		</div>
 		<div class="visual-diff" id="icon-text-hidden-container" style="display: inline-block; padding: 0 30px 60px 30px;">
 			<d2l-navigation-button-icon id="icon-text-hidden" icon="tier3:classes" text="Classes" text-hidden></d2l-navigation-button-icon>
 		</div>

test/button.visual-diff.js

@@ -29,6 +29,7 @@ describe('d2l-navigation-button', () => {
 		{ category: 'disabled', tests: ['normal', 'hover', 'focus'] },
 		{ category: 'icon-text', tests: ['normal', 'hover', 'focus'] },
 		{ category: 'icon-text-disabled', tests: ['normal', 'hover', 'focus'] },
+		{ category: 'icon-text-no-highlight-border', tests: ['normal', 'hover', 'focus'] },
 		{ category: 'icon-text-flip', tests: ['normal', 'hover', 'focus'] },
 		{ category: 'icon-text-hidden', tooltip: true, rectSelector: 'icon-text-hidden-container', tests: ['normal', 'hover', 'focus'] },
 		{ category: 'icon-text-hidden-disabled', tests: ['normal', 'hover', 'focus'] },