feat(pie-toast): DSW-2121 refactor css classes

justeattakeaway · Jul 9, 2024 · f200105 · f200105
1 parent 6c81c95
commit f200105
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 10 deletions.
diff --git a/packages/components/pie-toast/src/index.ts b/packages/components/pie-toast/src/index.ts
@@ -151,7 +151,6 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
                 size="xsmall"
                 aria-label="${ariaLabel || nothing}"
                 @click="${() => this.handleActionClick()}"
-                class="${componentSelector}-leading-action"
                 data-test-id="${componentSelector}-leading-action"
                 type="button">
                 ${text}
@@ -186,7 +185,6 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
             <pie-icon-button
                 variant="ghost-inverse"
                 size="xsmall"
-                class="${componentClass}-close"
                 data-test-id="${componentSelector}-close"
                 @click="${this.closeToastComponent}">
                 <icon-close></icon-close>
@@ -237,12 +235,12 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
 
         return html`
             <div data-test-id="${componentSelector}" class="${componentClass}">
-                <div class="${componentClass}-content-area">
-                    <div class="${componentClass}-message-area" ?isMultiline="${isMultiline}">
+                <div class="${componentClass}-contentArea">
+                    <div class="${componentClass}-messageArea" ?isMultiline="${isMultiline}">
                         <icon-placeholder size="s"></icon-placeholder>
                         ${message === '' ? nothing : this.renderMessage(message, _messageAreaMaxWidth)} 
                     </div>
-                    <div class="${componentClass}-actions-area">
+                    <div class="${componentClass}-actionsArea">
                         ${!isMultiline && leadingAction?.text ? this.renderActionButton(leadingAction) : nothing}
                         ${isDismissible ? this.renderCloseButton() : nothing}
                     </div>

diff --git a/packages/components/pie-toast/src/toast.scss b/packages/components/pie-toast/src/toast.scss
@@ -24,14 +24,13 @@
   font-size: var(--toast-font-size);
   line-height: var(--toast-line-height);
 
-  &-content-area{
+  & .c-toast-contentArea{
     display: flex;
     gap: var(--dt-spacing-b);
     justify-content: space-between;
-
   }
 
-  &-message-area {
+  & .c-toast-messageArea {
     display: flex;
     align-items: center;
     gap: var(--dt-spacing-b);
@@ -60,12 +59,12 @@
     }
   }
 
-  &-actions-area {
+  & .c-toast-actionsArea {
     display: flex;
     gap: var(--dt-spacing-b);
   }
 
-  &-footer {
+  & .c-toast-footer {
     display: flex;
     justify-content: flex-end;
   }