fix(snackbar): add width prop for snackbar

Author: kailash-tw

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

@@ -16,6 +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'`   |
 
 
 ## Events

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

@@ -7,7 +7,6 @@
   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.stories.tsx

@@ -18,6 +18,7 @@ const meta: Meta = {
     duration: 5000,
     hasAction: true,
     actionLabel: 'Call to Action',
+    width: '270px',
   },
   argTypes: getArgTypes('b2b-snackbar'),
   render: ({ ...args }) => {
@@ -42,7 +43,8 @@ const meta: Meta = {
         timed="${args.timed}"
         duration="${args.duration}"
         has-action="${args.hasAction}"
-        action-label="${args.actionLabel}"></b2b-snackbar>`;
+        action-label="${args.actionLabel}"
+        width="${args.width}"></b2b-snackbar>`;
   },
 };
 
@@ -104,6 +106,7 @@ 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,6 +35,9 @@ 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';
+
   /** Emits whenever the snackbar is closed. */
   @Event({ eventName: 'b2b-close' })
   b2bClose: EventEmitter<void>;
@@ -137,7 +140,8 @@ export class SnackbarComponent {
             'b2b-snackbar': true,
             [`b2b-snackbar--${this.type}`]: true,
             'b2b-snackbar--opened': this.opened,
-          }}>
+          }}
+          style={{ minWidth: this.width }}>
           <div class="b2b-snackbar__content">
             <span class={{ [`b2b-snackbar--${this.type}__icon`]: true }}>
               {this.chooseIcon()}