Add size attribute to the button (#102)

* Add button, select and combobox scale.
Remove custom element manifest build (issue with circular ref)

* Lint the code

* Fix element scale for medium

---------

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

packages/components/package.json

@@ -25,9 +25,10 @@
   "scripts": {
     "start": "storybook dev -p 6006",
     "start:ci": "storybook dev -p 6006 --ci --quiet",
-    "build": "rollup -c && tsc -p ./tsconfig.json && custom-elements-manifest analyze",
+    "build": "rollup -c && tsc -p ./tsconfig.json",
+    "build:cem": "custom-elements-manifest analyze",
     "build:docs": "storybook build",
-    "build:react": "BUILD_REACT=1 custom-elements-manifest analyze",
+    "build:react": "BUILD_REACT=1 yarn run build:cem",
     "clean": "yarn clean:lib && yarn clean:test",
     "clean:lib": "rimraf dist",
     "clean:test": "rimraf test-results tests-out/**/*.js tests-out/**/*.js.map tsconfig.playwright.tsbuildinfo",

packages/components/src/button/button.stories.ts

@@ -21,7 +21,10 @@ export default {
     },
     disabled: { control: 'boolean' },
     autofocus: { control: 'boolean' },
-    minimal: { control: 'boolean' },
+    scale: {
+      control: 'select',
+      options: ['xsmall', 'small', 'medium', 'large', 'xlarge']
+    },
     startIcon: { control: 'boolean' },
     onClick: {
       action: 'clicked',
@@ -44,7 +47,7 @@ const Template: StoryFn = (args): HTMLElement => {
       ${args.appearance ? `appearance=${args.appearance.toLowerCase()}` : ''}
       ${args.disabled ? 'disabled' : ''} 
       ${args.autofocus ? 'autofocus' : ''}
-      ${args.minimal ? 'minimal' : ''}
+      ${args.scale ? `scale=${args.scale}` : ''}
       ${args.ariaPressed !== 'none' ? `aria-pressed=${args.ariaPressed}` : ''}
     >${args.startIcon ? getFaIcon('plus', args.label ? 'start' : null) : ''}${
       args.label ?? ''
@@ -64,7 +67,7 @@ Accent.args = {
   appearance: 'Accent',
   disabled: false,
   autofocus: false,
-  minimal: false,
+  scale: 'medium',
   startIcon: false,
   ariaPressed: 'none',
   onClick: action('button-clicked')

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 ButtonScale = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+
 /**
  * Types of button appearance.
  * @public
@@ -40,11 +45,19 @@ class JupyterButton extends Button {
    *
    * @public
    * @remarks
+   *
+   * @deprecated Use {@link scale} `xsmall` instead
    * HTML Attribute: minimal
    */
   @attr({ attribute: 'minimal', mode: 'boolean' })
   public minimal: boolean;
 
+  /**
+   * Scale the element compared to the theme size.
+   */
+  @attr
+  public scale?: ButtonScale;
+
   /**
    * Applies 'icon-only' class when there is only an SVG in the default slot
    *

packages/components/src/combobox/combobox.stories.ts

@@ -13,7 +13,10 @@ export default {
     disabled: { control: 'boolean' },
     customIndicator: { control: 'boolean' },
     numberOfChildren: { control: 'number' },
-    minimal: { control: 'boolean' },
+    scale: {
+      control: 'select',
+      options: ['xsmall', 'small', 'medium', 'large', 'xlarge']
+    },
     autowidth: { control: 'boolean' },
     autocomplete: {
       control: 'select',
@@ -58,7 +61,7 @@ const Template: StoryFn = (args): HTMLElement => {
     'afterbegin',
     `<jp-combobox 
       ${args.disabled ? 'disabled' : ''}
-      ${args.minimal ? 'minimal' : ''}
+      ${args.scale ? `scale=${args.scale}` : ''}
       ${args.autowidth ? 'autowidth' : ''}
       ${args.autocomplete !== 'none' ? `autocomplete=${args.autocomplete}` : ''}
       ${args.ariaInvalid ? `aria-invalid="${args.ariaInvalid}"` : ''}
@@ -98,7 +101,7 @@ Default.args = {
   disabled: false,
   customIndicator: false,
   numberOfChildren: 10,
-  minimal: false,
+  scale: 'medium',
   autowidth: false,
   autocomplete: 'none',
   ariaInvalid: false,

packages/components/src/combobox/index.ts

@@ -11,6 +11,11 @@ import {
 import { heightNumberAsToken } from '../design-tokens.js';
 import { comboboxStyles as styles } from './combobox.styles.js';
 
+/**
+ * Scale locally an element.
+ */
+export type ComboboxScale = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+
 /**
  * Combobox class
  *
@@ -35,11 +40,20 @@ class JupyterCombobox extends Combobox {
    *
    * @public
    * @remarks
+   *
+   * @deprecated Use {@link scale} `xsmall` instead
+   *
    * HTML Attribute: minimal
    */
   @attr({ attribute: 'minimal', mode: 'boolean' })
   public minimal: boolean;
 
+  /**
+   * Scale the element compared to the theme size.
+   */
+  @attr
+  public scale?: ComboboxScale;
+
   /**
    * The connected callback for this FASTElement.
    *

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 elementScale = create<number>('element-scale').withDefault(0);
 /** @public */
 export const direction = create<Direction>('direction').withDefault(
   Direction.ltr

packages/components/src/select/index.ts

@@ -15,6 +15,11 @@ import {
 } from '../design-tokens.js';
 import { selectStyles as styles } from './select.styles.js';
 
+/**
+ * Scale locally an element.
+ */
+export type SelectScale = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+
 /**
  * Select class
  * @public
@@ -73,11 +78,20 @@ class JupyterSelect extends Select {
    *
    * @public
    * @remarks
+   *
+   * @deprecated Use {@link scale} `xsmall` instead
+   *
    * HTML Attribute: minimal
    */
   @attr({ attribute: 'minimal', mode: 'boolean' })
   public minimal: boolean;
 
+  /**
+   * Scale the element compared to the theme size.
+   */
+  @attr
+  public scale?: SelectScale;
+
   /**
    * An internal stylesheet to hold calculated CSS custom properties.
    *

packages/components/src/select/select.stories.ts

@@ -12,7 +12,11 @@ export default {
     disabled: { control: 'boolean' },
     customIndicator: { control: 'boolean' },
     numberOfChildren: { control: 'number' },
-    minimal: { control: 'boolean' },
+    scale: {
+      control: 'select',
+      options: ['xsmall', 'small', 'medium', 'large', 'xlarge']
+    },
+    size: { control: 'number' },
     autowidth: { control: 'boolean' },
     ariaInvalid: { control: 'boolean' },
     onChange: {
@@ -39,7 +43,8 @@ const Template: StoryFn = (args, context): HTMLElement => {
     'afterbegin',
     `<jp-select 
       ${args.disabled ? 'disabled' : ''}
-      ${args.minimal ? 'minimal' : ''}
+      ${args.scale ? `scale=${args.scale}` : ''}
+      ${args.size > 0 ? `size=${args.size}` : ''}
       ${args.autowidth ? 'autowidth' : ''}
       ${args.ariaInvalid ? `aria-invalid="${args.ariaInvalid}"` : ''}
     >
@@ -79,7 +84,8 @@ Default.args = {
   disabled: false,
   customIndicator: false,
   numberOfChildren: 3,
-  minimal: false,
+  scale: 'medium',
+  size: 0,
   autowidth: false,
   ariaInvalid: false,
   onChange: action('change'),

packages/components/src/select/select.styles.ts

@@ -146,9 +146,26 @@ export const selectStyles: FoundationElementTemplate<
     padding: 0 calc(${designUnit} * 2.25px);
     width: 100%;
   }
-  
-  :host([minimal]) {
-    --density: -4;
+
+  :host([minimal]),
+  :host([scale='xsmall']) {
+    --element-scale: -4;
+  }
+
+  :host([scale='small']) {
+    --element-scale: -2;
+  }
+
+  :host([scale='medium']) {
+    --element-scale: 0;
+  }
+
+  :host([scale='large']) {
+    --element-scale: 2;
+  }
+
+  :host([scale='xlarge']) {
+    --element-scale: 4;
   }
   
   :host(:not([disabled]):hover) {

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

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

packages/components/src/styles/size.ts

@@ -3,11 +3,16 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { cssPartial } from '@microsoft/fast-element';
-import { baseHeightMultiplier, density, designUnit } from '../design-tokens.js';
+import {
+  baseHeightMultiplier,
+  density,
+  designUnit,
+  elementScale
+} from '../design-tokens.js';
 
 /**
  * A formula to retrieve the control height.
  * Use this as the value of any CSS property that
  * accepts a pixel size.
  */
-export const heightNumber = cssPartial`(${baseHeightMultiplier} + ${density}) * ${designUnit}`;
+export const heightNumber = cssPartial`(${baseHeightMultiplier} + ${density} + ${elementScale}) * ${designUnit}`;

packages/react-components/lib/Button.d.ts

@@ -1,4 +1,7 @@
-import { Button as ButtonElement } from '@jupyter/web-components';
+import {
+  Button as ButtonElement,
+  type ButtonScale
+} from '@jupyter/web-components';
 
 export type { ButtonElement };
 
@@ -9,9 +12,16 @@ export interface ButtonProps
    */
   ref?: React.Ref<ButtonElement>;
 
-  /** Whether the button has a compact layout or not. */
+  /** Whether the button has a compact layout or not.
+   * @deprecated Use {@link scale} equals to `xsmall` instead.
+   */
   minimal?: boolean;
 
+  /**
+   * Scale the element compared to the theme size.
+   */
+  scale?: ButtonScale;
+
   /** The appearance the button should have. */
   appearance?: ButtonElement['appearance'];
 

packages/react-components/lib/Combobox.d.ts

@@ -1,4 +1,7 @@
-import { Combobox as ComboboxElement } from '@jupyter/web-components';
+import {
+  Combobox as ComboboxElement,
+  type ComboboxScale
+} from '@jupyter/web-components';
 
 export type { ComboboxElement };
 
@@ -12,9 +15,16 @@ export interface ComboboxProps
   /** Whether the combobox has a compact layout or not. */
   autowidth?: boolean;
 
-  /** Whether the combobox has a compact layout or not. */
+  /** Whether the combobox has a compact layout or not.
+   * @deprecated Use {@link scale} equals to `xsmall` instead.
+   */
   minimal?: boolean;
 
+  /**
+   * Scale the element compared to the theme size.
+   */
+  scale?: ComboboxScale;
+
   /** The open attribute. */
   open?: boolean;
 

packages/react-components/lib/Select.d.ts

@@ -1,4 +1,7 @@
-import { Select as SelectElement } from '@jupyter/web-components';
+import {
+  Select as SelectElement,
+  type SelectScale
+} from '@jupyter/web-components';
 
 export type { SelectElement };
 
@@ -15,9 +18,16 @@ export interface SelectProps
   /** Whether the select has a compact layout or not. */
   autowidth?: boolean;
 
-  /** Whether the select has a compact layout or not. */
+  /** Whether the select has a compact layout or not.
+   * @deprecated Use {@link scale} equals to `xsmall` instead.
+   */
   minimal?: boolean;
 
+  /**
+   * Scale the element compared to the theme size.
+   */
+  scale?: SelectScale;
+
   /** The open attribute. */
   open?: boolean;