fix(snackbar): add width prop for snackbar

Author: kailash-tw

packages/core-components/src/components/snackbar/readme.md

@@ -7,16 +7,16 @@
 
 ## Properties
 
-| Property      | Attribute      | Description                                                                                  | Type                                          | Default     |
-| ------------- | -------------- | -------------------------------------------------------------------------------------------- | --------------------------------------------- | ----------- |
-| `actionLabel` | `action-label` | Text for the Call-to-Action link.                                                            | `string`                                      | `undefined` |
-| `description` | `description`  | Text on the snackbar.                                                                        | `string`                                      | `undefined` |
-| `duration`    | `duration`     | How long is snackbar shown. Default value is 5000 ms.                                        | `number`                                      | `5000`      |
-| `hasAction`   | `has-action`   | Whether the snackbar has a Call-to-Action. Per default, it is false.                         | `boolean`                                     | `false`     |
-| `opened`      | `opened`       | Whether the snackbar is currently visible. Set to true to display the snackbar.              | `boolean`                                     | `false`     |
-| `timed`       | `timed`        | Whether snackbar is show for limited time. Default is true. Error snackbars cannot be timed. | `boolean`                                     | `true`      |
-| `type`        | `type`         | The type of snackbar. Default is info.                                                       | `"error" \| "info" \| "success" \| "warning"` | `'info'`    |
-| `width`       | `width`        | Width of the snackbar in px, Default value is 270px.                                         | `string`                                      | `'270px'`   |
+| Property      | Attribute      | Description                                                                                                                               | Type                                          | Default     |
+| ------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ----------- |
+| `actionLabel` | `action-label` | Text for the Call-to-Action link.                                                                                                         | `string`                                      | `undefined` |
+| `description` | `description`  | Text on the snackbar.                                                                                                                     | `string`                                      | `undefined` |
+| `duration`    | `duration`     | How long is snackbar shown. Default value is 5000 ms.                                                                                     | `number`                                      | `5000`      |
+| `hasAction`   | `has-action`   | Whether the snackbar has a Call-to-Action. Per default, it is false.                                                                      | `boolean`                                     | `false`     |
+| `opened`      | `opened`       | Whether the snackbar is currently visible. Set to true to display the snackbar.                                                           | `boolean`                                     | `false`     |
+| `timed`       | `timed`        | Whether snackbar is show for limited time. Default is true. Error snackbars cannot be timed.                                              | `boolean`                                     | `true`      |
+| `type`        | `type`         | The type of snackbar. Default is info.                                                                                                    | `"error" \| "info" \| "success" \| "warning"` | `'info'`    |
+| `width`       | `width`        | Width of the snackbar can be specified in px. If not provided, the default value is auto, which will adjust the width to fit the content. | `string`                                      | `undefined` |
 
 
 ## Events

packages/core-components/src/components/snackbar/snackbar.docs.mdx

@@ -40,7 +40,7 @@ _Note_: when user hovers over the snackbar, timeout is paused and resumes once t
 
 ### Width
 
-This property allow you to set the snackbar width. Minimum is 270px, maximum is 1000px. By default snackbar will have a width of 270px.
+This property allow you to set the snackbar width. Default value is auto, which will adjust the width to fit the content.
 
 ### Action
 

packages/core-components/src/components/snackbar/snackbar.stories.tsx

@@ -18,7 +18,7 @@ const meta: Meta = {
     duration: 5000,
     hasAction: true,
     actionLabel: 'Call to Action',
-    width: '270px',
+    width: 'auto',
   },
   argTypes: getArgTypes('b2b-snackbar'),
   render: ({ ...args }) => {
@@ -106,7 +106,6 @@ export const TimedSnackbar: Story = {
     timed: true,
     duration: 3000,
     description: 'This is timed snackbar',
-    width: '270px',
   },
   play: async () => {
     await showSnackBar();

packages/core-components/src/components/snackbar/snackbar.tsx

@@ -35,8 +35,8 @@ export class SnackbarComponent {
   /** Text for the Call-to-Action link. */
   @Prop() actionLabel: string;
 
-  /** Width of the snackbar in px, Default value is 270px. */
-  @Prop() width: string = '270px';
+  /** Width of the snackbar can be specified in px. If not provided, the default value is auto, which will adjust the width to fit the content. */
+  @Prop() width: string;
 
   /** Emits whenever the snackbar is closed. */
   @Event({ eventName: 'b2b-close' })
@@ -141,7 +141,7 @@ export class SnackbarComponent {
             [`b2b-snackbar--${this.type}`]: true,
             'b2b-snackbar--opened': this.opened,
           }}
-          style={{ width: this.width }}>
+          style={this.width ? { width: this.width } : { width: 'auto' }}>
           <div class="b2b-snackbar__content">
             <span class={{ [`b2b-snackbar--${this.type}__icon`]: true }}>
               {this.chooseIcon()}