feature: adding motion to button component (#933)

* style(button): add transition effect for background color * feat(button): add animation prop to control button animation styles * feat(button): add animation prop comment * style(button): add fade animation class for background color transition * feat(button): add animation control for button component in storybook * feat(button): add animation documentaion to button component
scania-digital-design-system · Jan 20, 2025 · 8a22729 · 8a22729
1 parent 0eca5d2
commit 8a22729
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 9 deletions.
diff --git a/packages/core/src/components/button/button.scss b/packages/core/src/components/button/button.scss
@@ -97,6 +97,10 @@ button {
     justify-content: center;
   }
 
+  &.animation-fade {
+    transition: background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
+  }
+
   @each $type in $types {
     &.#{$type} {
       @each $prop in $props {

diff --git a/packages/core/src/components/button/button.stories.tsx b/packages/core/src/components/button/button.stories.tsx
@@ -117,6 +117,17 @@ export default {
         defaultValue: { summary: false },
       },
     },
+    animation: {
+      name: 'Animation',
+      description: 'Sets the animation for the Button.',
+      control: {
+        type: 'radio',
+      },
+      options: ['none', 'fade'],
+      table: {
+        defaultValue: { summary: 'none' },
+      },
+    },
   },
   args: {
     modeVariant: 'Inherit from parent',
@@ -128,6 +139,7 @@ export default {
     onlyIcon: false,
     icon: 'none',
     disabled: false,
+    animation: 'none',
   },
 };
 
@@ -141,6 +153,7 @@ const WebComponentTemplate = ({
   onlyIcon,
   icon,
   disabled,
+  animation,
 }) => {
   const variantLookUp = {
     Primary: 'primary',
@@ -186,6 +199,7 @@ const WebComponentTemplate = ({
           ? `mode-variant="${modeVariantLookup[modeVariant]}"`
           : ''
       }
+      animation="${animation}"
     >
         ${
           onlyIcon || (icon && icon !== 'none')

diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx
@@ -35,6 +35,9 @@ export class TdsButton {
   /** Set the mode variant of the Button. */
   @Prop() modeVariant: 'primary' | 'secondary' = null;
 
+  /** Determines if and how the button should animate. */
+  @Prop() animation: 'none' | 'fade' = 'none';
+
   @State() onlyIcon: boolean = false;
 
   render() {
@@ -64,6 +67,7 @@ export class TdsButton {
             'fullbleed': this.fullbleed,
             'icon': hasIconSlot,
             'only-icon': this.onlyIcon,
+            [`animation-${this.animation}`]: this.animation !== 'none',
           }}
         >
           {this.text}

diff --git a/packages/core/src/components/button/readme.md b/packages/core/src/components/button/readme.md
@@ -7,15 +7,16 @@
 
 ## Properties
 
-| Property      | Attribute      | Description                               | Type                                              | Default     |
-| ------------- | -------------- | ----------------------------------------- | ------------------------------------------------- | ----------- |
-| `disabled`    | `disabled`     | Control for disabled state of a component | `boolean`                                         | `false`     |
-| `fullbleed`   | `fullbleed`    | When enabled, the Button takes 100% width | `boolean`                                         | `false`     |
-| `modeVariant` | `mode-variant` | Set the mode variant of the Button.       | `"primary" \| "secondary"`                        | `null`      |
-| `size`        | `size`         | Size of a Button                          | `"lg" \| "md" \| "sm" \| "xs"`                    | `'lg'`      |
-| `text`        | `text`         | Text displayed inside the Button          | `string`                                          | `undefined` |
-| `type`        | `type`         | Button's type                             | `"button" \| "reset" \| "submit"`                 | `'button'`  |
-| `variant`     | `variant`      | Variation of Button's design              | `"danger" \| "ghost" \| "primary" \| "secondary"` | `'primary'` |
+| Property      | Attribute      | Description                                      | Type                                              | Default     |
+| ------------- | -------------- | ------------------------------------------------ | ------------------------------------------------- | ----------- |
+| `animation`   | `animation`    | Determines if and how the button should animate. | `"fade" \| "none"`                                | `'none'`    |
+| `disabled`    | `disabled`     | Control for disabled state of a component        | `boolean`                                         | `false`     |
+| `fullbleed`   | `fullbleed`    | When enabled, the Button takes 100% width        | `boolean`                                         | `false`     |
+| `modeVariant` | `mode-variant` | Set the mode variant of the Button.              | `"primary" \| "secondary"`                        | `null`      |
+| `size`        | `size`         | Size of a Button                                 | `"lg" \| "md" \| "sm" \| "xs"`                    | `'lg'`      |
+| `text`        | `text`         | Text displayed inside the Button                 | `string`                                          | `undefined` |
+| `type`        | `type`         | Button's type                                    | `"button" \| "reset" \| "submit"`                 | `'button'`  |
+| `variant`     | `variant`      | Variation of Button's design                     | `"danger" \| "ghost" \| "primary" \| "secondary"` | `'primary'` |
 
 
 ## Slots