remove icon attribute in favor of min-height to accommodate icons

microsoft · Mar 30, 2023 · 29739fe · 29739fe
1 parent acf48f0
commit 29739fe
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 32 deletions.
diff --git a/change/@fluentui-web-components-be1b97fa-2097-4adc-ad03-f84e0ac0b1b1.json b/change/@fluentui-web-components-be1b97fa-2097-4adc-ad03-f84e0ac0b1b1.json
@@ -1,6 +1,6 @@
 {
   "type": "prerelease",
-  "comment": "  \"comment\": feat(button): add button web component",
+  "comment": "feat(button): add button web component",
   "packageName": "@fluentui/web-components",
   "email": "[email protected]",
   "dependentChangeType": "patch"

diff --git a/packages/web-components/src/button/button.options.ts b/packages/web-components/src/button/button.options.ts
@@ -13,7 +13,7 @@ export const ButtonAppearance = {
 } as const;
 
 /**
- * A Button can be filled, outline, ghost, inverted
+ * A Button can be secondary, primary, outline, subtle, transparent
  * @public
  */
 export type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;

diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts
@@ -57,12 +57,6 @@ import {
   strokeWidthThin,
 } from '../theme/design-tokens.js';
 
-const buttonSpacingSmall = '3px';
-const buttonSpacingSmallWithIcon = '1px';
-const buttonSpacingMedium = '5px';
-const buttonSpacingLarge = '8px';
-const buttonSpacingLargeWithIcon = '7px';
-
 // Need to support icon hover styles
 export const styles = css`
   ${display('inline-flex')}
@@ -79,11 +73,12 @@ export const styles = css`
     justify-content: center;
     text-decoration-line: none;
     margin: 0;
+    min-height: 32px;
     outline-style: none;
     background-color: ${colorNeutralBackground1};
     color: ${colorNeutralForeground1};
     border: ${strokeWidthThin} solid ${colorNeutralStroke1};
-    padding: ${buttonSpacingMedium} ${spacingHorizontalM};
+    padding-inline: ${spacingHorizontalM};
     min-width: 96px;
     border-radius: ${borderRadiusMedium};
     font-size: ${fontSizeBase300};
@@ -148,8 +143,9 @@ export const styles = css`
   }
 
   :host([size='small']) .control {
+    min-height: 24px;
     min-width: 64px;
-    padding: ${buttonSpacingSmall} ${spacingHorizontalS};
+    padding-inline: ${spacingHorizontalS};
     border-radius: ${borderRadiusSmall};
     font-size: ${fontSizeBase200};
     line-height: ${lineHeightBase200};
@@ -161,19 +157,10 @@ export const styles = css`
     max-width: 24px;
   }
 
-  :host([size='small'][icon]) .control,
-  :host([size='small'][icon-only]) .control {
-    padding-block: ${buttonSpacingSmallWithIcon};
-  }
-
-  :host([size='large'][icon]) .control,
-  :host([size='large'][icon-only]) .control {
-    padding-block: ${buttonSpacingLargeWithIcon};
-  }
-
   :host([size='large']) .control {
+    min-height: 40px;
     border-radius: ${borderRadiusLarge};
-    padding: ${buttonSpacingLarge} ${spacingHorizontalL};
+    padding-inline: ${spacingHorizontalL};
     font-size: ${fontSizeBase400};
     line-height: ${lineHeightBase400};
   }

diff --git a/packages/web-components/src/button/button.ts b/packages/web-components/src/button/button.ts
@@ -37,17 +37,6 @@ export class Button extends FASTButton {
   @attr
   public size?: ButtonSize;
 
-  /**
-   * The button has an icon
-   * This attribute is not required if icon-only is true
-   *
-   * @public
-   * @remarks
-   * HTML Attribute: icon
-   */
-  @attr({ mode: 'boolean' })
-  public icon: boolean = false;
-
   /**
    * The button has an icon only, no text content
    *