Rename size to scale to avoid issue on select element

Add new scale attribute on combobox and select instead of minimal (deprecated)

Author: fcollonval

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

@@ -5,11 +5,7 @@
 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';
+import type { ElementScale } from '../styles/size.js';
 
 /**
  * Types of button appearance.
@@ -46,17 +42,17 @@ class JupyterButton extends Button {
    * @public
    * @remarks
    *
-   * @deprecated Use {@link size} `xsmall` instead
+   * @deprecated Use {@link scale} `xsmall` instead
    * HTML Attribute: minimal
    */
   @attr({ attribute: 'minimal', mode: 'boolean' })
   public minimal: boolean;
 
   /**
-   * Scale the element compared to the general size.
+   * Scale the element compared to the theme size.
    */
   @attr
-  public size?: ElementSize;
+  public scale?: ElementScale;
 
   /**
    * 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

@@ -10,6 +10,7 @@ import {
 } from '@microsoft/fast-foundation';
 import { heightNumberAsToken } from '../design-tokens.js';
 import { comboboxStyles as styles } from './combobox.styles.js';
+import type { ElementScale } from '../styles/size.js';
 
 /**
  * Combobox class
@@ -35,11 +36,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?: ElementScale;
+
   /**
    * The connected callback for this FASTElement.
    *

packages/components/src/design-tokens.ts

@@ -103,7 +103,7 @@ export const designUnit = create<number>('design-unit').withDefault(4);
  *
  * @private
  */
-export const elementSize = create<number>('element-size').withDefault(0);
+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

@@ -14,6 +14,7 @@ import {
   neutralLayerFloating
 } from '../design-tokens.js';
 import { selectStyles as styles } from './select.styles.js';
+import type { ElementScale } from '../styles/size.js';
 
 /**
  * Select class
@@ -73,11 +74,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?: ElementScale;
+
   /**
    * 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: 1;
+  }
+
+  :host([scale='large']) {
+    --element-scale: 2;
+  }
+
+  :host([scale='xlarge']) {
+    --element-scale: 4;
   }
   
   :host(:not([disabled]):hover) {

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

@@ -21,7 +21,7 @@ import {
   controlCornerRadius,
   density,
   designUnit,
-  elementSize,
+  elementScale,
   errorFillActive,
   errorFillFocus,
   errorFillHover,
@@ -77,7 +77,10 @@ export const BaseButtonStyles = css`
     justify-content: center;
     align-items: center;
     padding: 0
-      calc((10 + (${designUnit} * 2 * (${density} + ${elementSize}))) * 1px);
+      max(
+        1px,
+        calc((10 + (${designUnit} * 2 * (${density} + ${elementScale})))) * 1px
+      );
     white-space: nowrap;
     outline: none;
     text-decoration: none;
@@ -104,29 +107,24 @@ export const BaseButtonStyles = css`
   }
 
   :host([minimal]),
-  :host([size='xsmall']) {
-    --element-size: -4;
+  :host([scale='xsmall']) {
+    --element-scale: -4;
   }
 
-  :host([minimal]) .control,
-  :host([size='xsmall']) .control {
-    padding: 1px;
+  :host([scale='small']) {
+    --element-scale: -2;
   }
 
-  :host([size='small']) {
-    --element-size: -2;
+  :host([scale='medium']) {
+    --element-scale: 1;
   }
 
-  :host([size='medium']) {
-    --element-size: 1;
+  :host([scale='large']) {
+    --element-scale: 2;
   }
 
-  :host([size='large']) {
-    --element-size: 2;
-  }
-
-  :host([size='xlarge']) {
-    --element-size: 4;
+  :host([scale='xlarge']) {
+    --element-scale: 4;
   }
 
   /* prettier-ignore */

packages/components/src/styles/size.ts

@@ -3,11 +3,21 @@
 // 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';
+
+/**
+ * Scale locally an element.
+ */
+export type ElementScale = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 
 /**
  * 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}`;