chore(button): removes fast foundation (VIV-2250) (#2057)

* chore: decouples button component * chore: formatting * chore: removes comment * chore: removes unrelated changes
Vonage · Dec 16, 2024 · 1d12083 · 1d12083
1 parent f316924
commit 1d12083
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 9 deletions.
diff --git a/libs/components/src/lib/button/button.ts b/libs/components/src/lib/button/button.ts
@@ -1,11 +1,8 @@
-import {
-	applyMixins,
-	Button as FoundationButton,
-} from '@microsoft/fast-foundation';
 import { attr } from '@microsoft/fast-element';
-
 import type { Appearance, Connotation, Shape, Size } from '../enums.js';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
+import { VividFoundationButton } from '../../shared/foundation/button/button.js';
+import { applyMixins } from '../../shared/foundation/utilities/apply-mixins.js';
 
 /**
  * Types of button connotation.
@@ -57,7 +54,7 @@ export type ButtonSize = Extract<
  * @component button
  * @slot icon - Add an icon to the component.
  */
-export class Button extends FoundationButton {
+export class Button extends VividFoundationButton {
 	@attr({
 		converter: {
 			fromView: (value) => value || null,

diff --git a/libs/components/src/shared/foundation/button/button.ts b/libs/components/src/shared/foundation/button/button.ts
@@ -1,15 +1,15 @@
 /* eslint-disable @typescript-eslint/explicit-member-accessibility */
 import { attr } from '@microsoft/fast-element';
-import { applyMixins } from '@microsoft/fast-foundation';
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { VividComponentDefinition } from '../../design-system/defineVividComponent';
 import { ARIAGlobalStatesAndProperties } from '../patterns/index';
+import { applyMixins } from '../utilities/apply-mixins';
 import { FormAssociatedButton } from './button.form-associated';
 
 /**
  * Button configuration options
  * @public
  */
-export type ButtonOptions = FoundationElementDefinition;
+export type ButtonOptions = VividComponentDefinition;
 
 /**
  * A Button Custom HTML Element.
@@ -167,6 +167,7 @@ export class VividFoundationButton extends FormAssociatedButton {
 		super.connectedCallback();
 
 		this.proxy.setAttribute('type', this.type);
+		this.handleUnsupportedDelegatesFocus();
 
 		const elements = Array.from(this.control.children) as HTMLSpanElement[];
 		if (elements) {
@@ -223,6 +224,27 @@ export class VividFoundationButton extends FormAssociatedButton {
 	};
 
 	public control!: HTMLButtonElement;
+
+	/**
+	 * Overrides the focus call for where delegatesFocus is unsupported.
+	 * This check works for Chrome, Edge Chromium, FireFox, and Safari
+	 * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
+	 */
+	private handleUnsupportedDelegatesFocus = () => {
+		// Check to see if delegatesFocus is supported
+		if (this.$fastController.definition.shadowOptions) {
+			if (
+				window.ShadowRoot &&
+				/* eslint-disable-next-line */
+				!window.ShadowRoot.prototype.hasOwnProperty('delegatesFocus') &&
+				this.$fastController.definition.shadowOptions.delegatesFocus
+			) {
+				this.focus = () => {
+					this.control.focus();
+				};
+			}
+		}
+	};
 }
 
 /**