fix(snackbar): add width prop for snackbar

Author: kailash-tw

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

@@ -16,7 +16,7 @@
 | `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'`   |
+| `width`       | `width`        | Width of the snackbar in px, Default value is 270px.                                         | `string`                                      | `'270px'`   |
 
 
 ## Events

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

@@ -38,6 +38,10 @@ If you set `timed` as true, using this property you can define the interval afte
 
 _Note_: when user hovers over the snackbar, timeout is paused and resumes once the mouse leaves.
 
+### 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.
+
 ### Action
 
 If you want your snackbar to have an action button, set `hasAction` to true. By default, it is false.

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

@@ -7,6 +7,7 @@
   line-height: var(--b2b-size-copy-line-height-100);
   color: var(--b2b-color-copy-default);
   max-width: 1000px;
+  min-width: 270px;
   max-height: 56px;
   min-height: 48px;
   box-shadow: 0 var(--b2b-size-1) var(--b2b-size-10) 0 #00000040;

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

@@ -141,7 +141,7 @@ export class SnackbarComponent {
             [`b2b-snackbar--${this.type}`]: true,
             'b2b-snackbar--opened': this.opened,
           }}
-          style={{ minWidth: this.width }}>
+          style={{ width: this.width }}>
           <div class="b2b-snackbar__content">
             <span class={{ [`b2b-snackbar--${this.type}__icon`]: true }}>
               {this.chooseIcon()}