Add size attribute to the button

Author: fcollonval

packages/components/src/button/index.ts

@@ -6,6 +6,11 @@ import { attr } from '@microsoft/fast-element';
 import { Button, buttonTemplate as template } from '@microsoft/fast-foundation';
 import { buttonStyles as styles } from './button.styles.js';
 
+/**
+ * Scale locally an element.
+ */
+export type ElementSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+
 /**
  * Types of button appearance.
  * @public
@@ -40,11 +45,19 @@ class JupyterButton extends Button {
    *
    * @public
    * @remarks
+   *
+   * @deprecated Use {@link size} `xsmall` instead
    * HTML Attribute: minimal
    */
   @attr({ attribute: 'minimal', mode: 'boolean' })
   public minimal: boolean;
 
+  /**
+   * Scale the element compared to the general size.
+   */
+  @attr
+  public size?: ElementSize;
+
   /**
    * Applies 'icon-only' class when there is only an SVG in the default slot
    *

packages/components/src/design-tokens.ts

@@ -98,6 +98,12 @@ export const controlCornerRadius = create<number>(
 export const density = create<number>('density').withDefault(0);
 /** @public */
 export const designUnit = create<number>('design-unit').withDefault(4);
+/**
+ * Adds to the density on specified element.
+ *
+ * @private
+ */
+export const elementSize = create<number>('element-size').withDefault(0);
 /** @public */
 export const direction = create<Direction>('direction').withDefault(
   Direction.ltr

packages/components/src/styles/patterns/button.ts

@@ -21,6 +21,7 @@ import {
   controlCornerRadius,
   density,
   designUnit,
+  elementSize,
   errorFillActive,
   errorFillFocus,
   errorFillHover,
@@ -75,7 +76,8 @@ export const BaseButtonStyles = css`
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    padding: 0 calc((10 + (${designUnit} * 2 * ${density})) * 1px);
+    padding: 0
+      calc((10 + (${designUnit} * 2 * (${density} + ${elementSize}))) * 1px);
     white-space: nowrap;
     outline: none;
     text-decoration: none;
@@ -101,14 +103,32 @@ export const BaseButtonStyles = css`
     box-shadow: inset 0px 0px 2px 2px ${neutralFillStrongActive};
   }
 
-  :host([minimal]) {
-    --density: -4;
+  :host([minimal]),
+  :host([size='xsmall']) {
+    --element-size: -4;
   }
 
-  :host([minimal]) .control {
+  :host([minimal]) .control,
+  :host([size='xsmall']) .control {
     padding: 1px;
   }
 
+  :host([size='small']) {
+    --element-size: -2;
+  }
+
+  :host([size='medium']) {
+    --element-size: 1;
+  }
+
+  :host([size='large']) {
+    --element-size: 2;
+  }
+
+  :host([size='xlarge']) {
+    --element-size: 4;
+  }
+
   /* prettier-ignore */
   .control:${focusVisible} {
       outline: calc(${focusStrokeWidth} * 1px) solid ${neutralFillStrongFocus};