Merge pull request #2457 from hashicorp/alex-ju/button-types

`Button` - align types to convention

.changeset/twenty-pumpkins-notice.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`Button` - aligned type names to convention

packages/components/src/components/hds/button/index.ts

@@ -5,27 +5,37 @@
 
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
+
+import {
+  HdsButtonSizeValues,
+  HdsButtonColorValues,
+  HdsButtonIconPositionValues,
+} from './types.ts';
+
+import type {
+  HdsButtonSizes,
+  HdsButtonColors,
+  HdsButtonIconPositions,
+} from './types.ts';
 import type { HdsInteractiveSignature } from '../interactive/';
 import type { HdsIconSignature } from '../icon';
 
-export const DEFAULT_SIZE = 'medium';
-export const DEFAULT_COLOR = 'primary';
-export const DEFAULT_ICONPOSITION = 'leading';
-export const SIZES = ['small', 'medium', 'large'] as const;
-export const COLORS = ['primary', 'secondary', 'tertiary', 'critical'] as const;
-export const ICONPOSITIONS = ['leading', 'trailing'] as const;
-
-export type HdsButtonSize = (typeof SIZES)[number];
-export type HdsButtonColor = (typeof COLORS)[number];
-export type HdsButtonIconPosition = (typeof ICONPOSITIONS)[number];
+export const SIZES: string[] = Object.values(HdsButtonSizeValues);
+export const COLORS: string[] = Object.values(HdsButtonColorValues);
+export const ICONPOSITIONS: string[] = Object.values(
+  HdsButtonIconPositionValues
+);
+export const DEFAULT_SIZE = HdsButtonSizeValues.Medium;
+export const DEFAULT_COLOR = HdsButtonColorValues.Primary;
+export const DEFAULT_ICONPOSITION = HdsButtonIconPositionValues.Leading;
 
 export interface HdsButtonSignature {
   Args: HdsInteractiveSignature['Args'] & {
-    size?: HdsButtonSize;
-    color?: HdsButtonColor;
+    size?: HdsButtonSizes;
+    color?: HdsButtonColors;
     text: string;
     icon?: HdsIconSignature['Args']['name'];
-    iconPosition?: HdsButtonIconPosition;
+    iconPosition?: HdsButtonIconPositions;
     isIconOnly?: boolean;
     isFullWidth?: boolean;
     isInline?: boolean;
@@ -39,7 +49,7 @@ export default class HdsButton extends Component<HdsButtonSignature> {
    * @type {string}
    * @description The text of the button or value of `aria-label` if `isIconOnly` is set to `true`. If no text value is defined an error will be thrown.
    */
-  get text() {
+  get text(): string {
     const { text } = this.args;
 
     assert(
@@ -56,7 +66,7 @@ export default class HdsButton extends Component<HdsButtonSignature> {
    * @default medium
    * @description The size of the button; acceptable values are `small`, `medium`, and `large`
    */
-  get size() {
+  get size(): HdsButtonSizes {
     const { size = DEFAULT_SIZE } = this.args;
 
     assert(
@@ -75,7 +85,7 @@ export default class HdsButton extends Component<HdsButtonSignature> {
    * @default primary
    * @description Determines the color of button to be used; acceptable values are `primary`, `secondary`, and `critical`
    */
-  get color() {
+  get color(): HdsButtonColors {
     const { color = DEFAULT_COLOR } = this.args;
 
     assert(
@@ -103,7 +113,7 @@ export default class HdsButton extends Component<HdsButtonSignature> {
    * @default false
    * @description Indicates if the button will only contain an icon; component will also ensure that accessible text is still applied to the component.
    */
-  get isIconOnly() {
+  get isIconOnly(): boolean {
     if (this.icon) {
       return this.args.isIconOnly ?? false;
     }
@@ -116,7 +126,7 @@ export default class HdsButton extends Component<HdsButtonSignature> {
    * @default leading
    * @description Positions the icon before or after the text; allowed values are `leading` or `trailing`
    */
-  get iconPosition() {
+  get iconPosition(): HdsButtonIconPositions {
     const { iconPosition = DEFAULT_ICONPOSITION } = this.args;
 
     assert(
@@ -135,7 +145,7 @@ export default class HdsButton extends Component<HdsButtonSignature> {
    * @default 16
    * @description ensures that the correct icon size is used. Automatically calculated.
    */
-  get iconSize() {
+  get iconSize(): HdsIconSignature['Args']['size'] {
     if (this.args.size === 'large') {
       return '24';
     } else {
@@ -149,7 +159,7 @@ export default class HdsButton extends Component<HdsButtonSignature> {
    * @default false
    * @description Indicates that a button should take up the full width of the parent container. The default is false.
    */
-  get isFullWidth() {
+  get isFullWidth(): boolean {
     return this.args.isFullWidth ?? false;
   }
 
@@ -158,7 +168,7 @@ export default class HdsButton extends Component<HdsButtonSignature> {
    * @method Button#classNames
    * @return {string} The "class" attribute to apply to the component.
    */
-  get classNames() {
+  get classNames(): string {
     const classes = ['hds-button'];
 
     // add a class based on the @color argument

packages/components/src/components/hds/button/types.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export enum HdsButtonSizeValues {
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large',
+}
+export type HdsButtonSizes = `${HdsButtonSizeValues}`;
+
+export enum HdsButtonColorValues {
+  Primary = 'primary',
+  Secondary = 'secondary',
+  Tertiary = 'tertiary',
+  Critical = 'critical',
+}
+export type HdsButtonColors = `${HdsButtonColorValues}`;
+
+export enum HdsButtonIconPositionValues {
+  Leading = 'leading',
+  Trailing = 'trailing',
+}
+export type HdsButtonIconPositions = `${HdsButtonIconPositionValues}`;