Merge a581231d16 into 9fac25dc10

COMPONENT_INDEX.md

@@ -430,10 +430,10 @@ None.
 
 ### Props
 
-| Prop name | Required | Kind             | Reactive | Type                                                                         | Default value          | Description                          |
+| Prop name | Required | Kind             | Reactive | Type                                                               | Default value          | Description                          |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------- | ---------------------- | ------------------------------------ |
+| :-------- | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ---------------------- | ------------------------------------ |
-| href      | No       | <code>let</code> | No       | <code>string</code>                                                          | <code>undefined</code> | Set the `href` to use an anchor link |
+| href      | No       | <code>let</code> | No       | <code>string</code>                                                | <code>undefined</code> | Set the `href` to use an anchor link |
-| size      | No       | <code>let</code> | No       | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button skeleton  |
+| size      | No       | <code>let</code> | No       | <code>"sm" &#124; "md" &#124; "lg" &#124; "xl" &#124; "2xl"</code> | <code>"lg"</code>      | Specify the size of button skeleton  |
 
 ### Slots
 

css/all.scss

@@ -1,35 +1,32 @@
+$prefix: 'bx';
+
 // Use all Carbon themes
 @use '@carbon/styles/scss/config' with (
   $use-akamai-cdn: true,
-  $prefix: 'bx'
+  $prefix: $prefix
 );
-@use "@carbon/styles/scss/theme" as *;
+@use "@carbon/styles" as styles;
-@use "@carbon/styles/scss/themes" as *;
-@use "@carbon/styles/scss/fonts";
 @use "@carbon/styles/scss/utilities" as *;
 
 :root {
-  @include theme($white);
+  @include styles.theme(styles.$white);
 }
 
 [data-carbon-theme='g10'] {
-  @include theme($g10);
+  @include styles.theme(styles.$g10);
 }
 
 [data-carbon-theme='g90'] {
-  @include theme($g90);
+  @include styles.theme(styles.$g90);
 }
 
 [data-carbon-theme='g100'] {
-  @include theme($g100);
+  @include styles.theme(styles.$g100);
 }
 
-@import "@carbon/styles/scss/reset";
+.#{$prefix}--text-truncate-end {
-@import "@carbon/styles/scss/components";
-
-.bx--text-truncate-end {
   @include text-truncate-end;
 }
-.bx--text-truncate-front {
+.#{$prefix}--text-truncate-front {
   @include text-truncate-front;
 }

css/g10.scss

@@ -1,20 +1,14 @@
-// Use g10 theme
 @use '@carbon/styles/scss/config' with (
   $use-akamai-cdn: true,
   $prefix: 'bx'
 );
-@use "@carbon/styles/scss/theme" as *;
+@use "@carbon/styles" as styles;
-@use "@carbon/styles/scss/themes" as *;
-@use "@carbon/styles/scss/fonts";
 @use "@carbon/styles/scss/utilities" as *;
 
 :root {
-  @include theme($g10);
+  @include styles.theme(styles.$g10);
 }
 
-@import "@carbon/styles/scss/reset";
-@import "@carbon/styles/scss/components";
-
 .bx--text-truncate-end {
   @include text-truncate-end;
 }

css/g100.scss

@@ -1,20 +1,14 @@
-// Use g10 theme
 @use '@carbon/styles/scss/config' with (
   $use-akamai-cdn: true,
   $prefix: 'bx'
 );
-@use "@carbon/styles/scss/theme" as *;
+@use "@carbon/styles" as styles;
-@use "@carbon/styles/scss/themes" as *;
-@use "@carbon/styles/scss/fonts";
 @use "@carbon/styles/scss/utilities" as *;
 
 :root {
-  @include theme($g100);
+  @include styles.theme(styles.$g100);
 }
 
-@import "@carbon/styles/scss/reset";
-@import "@carbon/styles/scss/components";
-
 .bx--text-truncate-end {
   @include text-truncate-end;
 }

css/g90.scss

@@ -1,20 +1,14 @@
-// Use g10 theme
 @use '@carbon/styles/scss/config' with (
   $use-akamai-cdn: true,
   $prefix: 'bx'
 );
-@use "@carbon/styles/scss/theme" as *;
+@use "@carbon/styles" as styles;
-@use "@carbon/styles/scss/themes" as *;
-@use "@carbon/styles/scss/fonts";
 @use "@carbon/styles/scss/utilities" as *;
 
 :root {
-  @include theme($g90);
+  @include styles.theme(styles.$g90);
 }
 
-@import "@carbon/styles/scss/reset";
-@import "@carbon/styles/scss/components";
-
 .bx--text-truncate-end {
   @include text-truncate-end;
 }

docs/src/COMPONENT_API.json

@@ -704,8 +704,8 @@
           "name": "size",
           "kind": "let",
           "description": "Specify the size of button skeleton",
-          "type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"",
+          "type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
-          "value": "\"default\"",
+          "value": "\"lg\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,

docs/src/pages/components/Button.svx

@@ -36,7 +36,7 @@
 
 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
-    You must provide an <strong>iconDescription</strong> for the button tooltip.
+    You must provide an <strong>iconDescription</strong> for screen readers.
   </div>
 </InlineNotification>
 
@@ -54,7 +54,7 @@
 
 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
-    You must provide an <strong>iconDescription</strong> for the button tooltip.
+    You must provide an <strong>iconDescription</strong> for screen readers.
   </div>
 </InlineNotification>
 
@@ -84,41 +84,20 @@ If an `href` value is specified, the component will render an [anchor element](h
 
 ## Custom element
 
-<Button as let:props>
+<Button as="div">
-  <p {...props}>Custom element</p>
+  Custom element
 </Button>
 
-## Field size
+## Sizes
 
-<Button size="md">Primary</Button>
+Button is available in small, medium, large, extra-large, and double-extra-large.
-<Button size="md" kind="secondary">Secondary</Button>
+Use `md` (default) when used with form fields.
-<Button size="md" kind="tertiary">Tertiary</Button>
-<Button size="md" kind="ghost">Ghost</Button>
-<Button size="md" kind="danger">Danger</Button>
 
-## Small size
+<Button size="sm">Small</Button>
-
+<Button size="md">Medium</Button>
-<Button size="sm">Primary</Button>
+<Button size="lg">Large</Button>
-<Button size="sm" kind="secondary">Secondary</Button>
+<Button size="xl">Extra Large</Button>
-<Button size="sm" kind="tertiary">Tertiary</Button>
+<Button size="2xl">Double extra Large</Button>
-<Button size="sm" kind="ghost">Ghost</Button>
-<Button size="sm" kind="danger">Danger</Button>
-
-## Large size
-
-<Button size="xl">Primary</Button>
-<Button size="xl" kind="secondary">Secondary</Button>
-<Button size="xl" kind="tertiary">Tertiary</Button>
-<Button size="xl" kind="ghost">Ghost</Button>
-<Button size="xl" kind="danger">Danger</Button>
-
-## Extra-large size
-
-<Button size="2xl">Primary</Button>
-<Button size="2xl" kind="secondary">Secondary</Button>
-<Button size="2xl" kind="tertiary">Tertiary</Button>
-<Button size="2xl" kind="ghost">Ghost</Button>
-<Button size="2xl" kind="danger">Danger</Button>
 
 ## Disabled state
 
@@ -129,12 +108,6 @@ If an `href` value is specified, the component will render an [anchor element](h
 
 Set `expressive` to `true` to use Carbon's expressive typesetting.
 
-<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
-  <div class="body-short-01">
-    Expressive styles only work with the default, "lg", and "xl" button sizes.
-  </div>
-</InlineNotification>
-
 <Button expressive size="xl">Primary</Button>
 <Button expressive size="xl" kind="secondary">Secondary</Button>
 <Button expressive size="xl" kind="tertiary">Tertiary</Button>
@@ -153,13 +126,19 @@ Set `expressive` to `true` to use Carbon's expressive typesetting.
 <Button expressive kind="ghost">Ghost</Button>
 <Button expressive kind="danger">Danger</Button>
 
+## Additional attributes
+
+Use `buttonAttributes` to pass any additional attributes.
+
+<Button buttonAttributes={{class: 'ready'}}>Ready</Button>
+
 ## Skeleton
 
-<Button size="xl" skeleton />
+<Button skeleton size="2xl" />
-<Button size="lg" skeleton />
+<Button skeleton size="xl" />
-<Button skeleton />
+<Button skeleton size="lg" />
-<Button skeleton size="field" />
+<Button skeleton size="md" />
-<Button skeleton size="small" />
+<Button skeleton size="sm" />
 
 ## Programmatic focus
 

src/Button/Button.svelte

@@ -97,16 +97,8 @@
     class: [
       "bx--btn",
       expressive && "bx--btn--expressive",
-      ((size === "small" && !expressive) ||
+      `bx--layout--size-${size}`,
-        (size === "sm" && !expressive) ||
+      `bx--btn--${kind}`,
-        (size === "small" && !expressive)) &&
-        "bx--btn--sm",
-      ((size === "field" && !expressive) || (size === "md" && !expressive)) &&
-        "bx--btn--md",
-      size === "small" && "bx--btn--sm",
-      size === "xl" && "bx--btn--xl",
-      size === "2xl" && "bx--btn--2xl",
-      kind && `bx--btn--${kind}`,
       disabled && "bx--btn--disabled",
       hasIconOnly && "bx--btn--icon-only",
       hasIconOnly && "bx--tooltip__trigger",

src/Button/ButtonSkeleton.svelte

@@ -7,9 +7,9 @@
 
   /**
    * Specify the size of button skeleton
-   * @type {"default" | "field" | "small" | "lg" | "xl"}
+   * @type {"sm" | "md" | "lg" | "xl" | "2xl"}
    */
-  export let size = "default";
+  export let size = "lg";
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -20,10 +20,11 @@
     role="button"
     class:bx--skeleton="{true}"
     class:bx--btn="{true}"
-    class:bx--btn--field="{size === 'field'}"
+    class:bx--layout--size-sm="{size === 'sm'}"
-    class:bx--btn--sm="{size === 'small'}"
+    class:bx--layout--size-md="{size === 'md'}"
-    class:bx--btn--lg="{size === 'lg'}"
+    class:bx--layout--size-lg="{size === 'lg'}"
-    class:bx--btn--xl="{size === 'xl'}"
+    class:bx--layout--size-xl="{size === 'xl'}"
+    class:bx--layout--size-2xl="{size === '2xl'}"
     {...$$restProps}
     on:click
     on:focus
@@ -39,10 +40,11 @@
   <div
     class:bx--skeleton="{true}"
     class:bx--btn="{true}"
-    class:bx--btn--field="{size === 'field'}"
+    class:bx--layout--size-sm="{size === 'sm'}"
-    class:bx--btn--sm="{size === 'small'}"
+    class:bx--layout--size-md="{size === 'md'}"
-    class:bx--btn--lg="{size === 'lg'}"
+    class:bx--layout--size-lg="{size === 'lg'}"
-    class:bx--btn--xl="{size === 'xl'}"
+    class:bx--layout--size-xl="{size === 'xl'}"
+    class:bx--layout--size-2xl="{size === '2xl'}"
     {...$$restProps}
     on:click
     on:focus

types/Button/ButtonSkeleton.svelte.d.ts

@@ -12,9 +12,9 @@ export interface ButtonSkeletonProps extends RestProps {
 
   /**
    * Specify the size of button skeleton
-   * @default "default"
+   * @default "lg"
    */
-  size?: "default" | "field" | "small" | "lg" | "xl";
+  size?: "sm" | "md" | "lg" | "xl" | "2xl";
 
   [key: `data-${string}`]: any;
 }