revert: feat(alert): make component responsive (#8195)

**Related Issue:** N/A

Rolls back responsiveness (#7755) in favor of upcoming alert stack UX
(#2835).

See
#7921 (comment)
for more info.

Author: jcfranco

packages/calcite-components/src/components/alert/alert.scss

@@ -18,9 +18,9 @@ $border-style: 1px solid var(--calcite-color-border-3);
   box-border
   fixed
   flex
-  flex-wrap
   items-center
   justify-center
+  min-w-min
   mx-auto
   my-0
   opacity-0
@@ -64,20 +64,15 @@ $border-style: 1px solid var(--calcite-color-border-3);
   }
 }
 
-.content {
-  @apply box-border flex flex-auto flex-col transition-default;
-  padding-block: var(--calcite-alert-spacing-token-small);
-  padding-inline: var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small);
-}
-
 .icon {
-  @apply flex flex-col items-center justify-start p-0;
-  margin-block-end: var(--calcite-alert-spacing-token-large);
+  @apply flex flex-col items-center justify-center p-0;
+  margin-block: auto;
   margin-inline-end: auto;
+  padding-inline-start: var(--calcite-alert-spacing-token-large);
 }
 
 .close {
-  @apply bg-transparent border-none cursor-pointer flex items-start justify-end outline-none self-start text-color-3;
+  @apply bg-transparent border-none cursor-pointer flex items-center justify-end outline-none self-stretch text-color-3;
   -webkit-appearance: none;
   padding: var(--calcite-alert-spacing-token-large);
 
@@ -97,19 +92,20 @@ $border-style: 1px solid var(--calcite-color-border-3);
 }
 
 .queue-count {
-  @apply text-color-2
-  bg-foreground-1
-  transition-default
-  invisible
-  flex
+  @apply bg-foreground-1
   cursor-default
+  flex
+  font-medium
+  invisible
   items-center
   justify-around
-  self-stretch
+  min-w-min
+  opacity-0
   overflow-hidden
+  self-stretch
   text-center
-  font-medium
-  opacity-0;
+  text-color-2
+  transition-default;
   border-inline: 0 solid transparent;
   border-start-end-radius: 0;
 
@@ -143,23 +139,14 @@ $border-style: 1px solid var(--calcite-color-border-3);
 }
 
 .text-container {
-  @apply flex flex-1 min-w-0 flex-col break-words;
-}
-
-.content-container {
-  @apply flex flex-1;
+  @apply box-border flex flex-auto min-w-0 flex-col break-words;
+  padding-block: var(--calcite-alert-spacing-token-small);
+  padding-inline: var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small);
 }
 
 .footer {
-  @apply flex justify-end order-1 pt-px relative w-full;
-  block-size: var(--calcite-alert-footer-height);
-
-  &:before {
-    content: "";
-    @apply absolute top-0;
-    inset-inline: var(--calcite-alert-footer-divider-gap);
-    border-block-start: $border-style;
-  }
+  @apply flex justify-end pt-px relative self-stretch w-auto;
+  block-size: inherit;
 }
 
 // scale variables
@@ -319,42 +306,5 @@ $alertDurations: "fast" 6000ms, "medium" 10000ms, "slow" 14000ms;
   @apply absolute;
 }
 
-@container responsive-container (min-width: #{$calcite-container-size-width-xs-max}) {
-  .content {
-    @apply flex-row;
-  }
-
-  .close {
-    @apply items-center self-stretch;
-  }
-
-  .icon {
-    @apply justify-center;
-    margin-inline-end: 0;
-    margin-block: 0;
-    padding-inline-end: var(--calcite-alert-spacing-token-large);
-  }
-}
-
-@container responsive-container (min-width: #{$calcite-container-size-width-sm-max}) {
-  .close {
-    @apply self-stretch;
-  }
-
-  .footer {
-    @apply self-stretch w-auto;
-    order: initial;
-    block-size: inherit;
-
-    &:before {
-      content: none;
-    }
-  }
-
-  .icon {
-    padding-inline: var(--calcite-alert-spacing-token-large) 0;
-  }
-}
-
 @include base-component();
 @include calciteHydratedHidden();

packages/calcite-components/src/components/alert/alert.stories.ts

@@ -1,11 +1,9 @@
 import { select } from "@storybook/addon-knobs";
 import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers";
-import { createBreakpointStories, modesDarkDefault } from "../../../.storybook/utils";
+import { modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import readme from "./readme.md";
 
-const openAlertScreenshotDelay = 1000;
-
 export default {
   title: "Components/Alert",
   parameters: {
@@ -220,121 +218,3 @@ export const autoClosableRetainsCloseButton_TestOnly = (): string => html`
     <calcite-link slot="link" title="my action" role="presentation"> Take action </calcite-link>
   </calcite-alert>
 `;
-
-// we use individual stories since we can't display multiple open alerts at the same time
-
-const breakpointsStoryTemplate = html`
-  <style>
-    .breakpoint-stories-container {
-      height: 600px;
-
-      /* force fixed container placement on the breakpoint-sized stories container */
-      contain: layout;
-    }
-  </style>
-  <calcite-alert icon open scale="{scale}">
-    <div slot="title">title</div>
-    <div slot="message">message</div>
-    <calcite-action scale="{scale}" slot="actions-end" title="Tips" icon="lightbulb"></calcite-action>
-    <calcite-action scale="{scale}" slot="actions-end" title="Get info" icon="attachment"></calcite-action>
-  </calcite-alert>
-  <calcite-alert icon scale="{scale}">
-    <div slot="title">title</div>
-    <div slot="message">message</div>
-    <calcite-action scale="{scale}" slot="actions-end" title="Tips" icon="lightbulb"></calcite-action>
-    <calcite-action scale="{scale}" slot="actions-end" title="Get info" icon="attachment"></calcite-action>
-  </calcite-alert>
-  <script>
-    (async function () {
-      await customElements.whenDefined("calcite-alert");
-      const alert2 = document.querySelectorAll("calcite-alert")[1];
-      await alert2.componentOnReady();
-
-      requestAnimationFrame(() => (alert2.open = true));
-    })();
-  </script>
-`;
-
-export const breakpointsXsmallScaleS_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "xsmall", scale: "s" });
-
-breakpointsXsmallScaleS_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsSmallScaleS_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "small", scale: "s" });
-
-breakpointsSmallScaleS_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsMediumScaleS_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "medium", scale: "s" });
-
-breakpointsMediumScaleS_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsLargeScaleS_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "large", scale: "s" });
-
-breakpointsLargeScaleS_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsXsmallScaleM_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "xsmall", scale: "m" });
-
-breakpointsXsmallScaleM_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsSmallScaleM_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "small", scale: "m" });
-
-breakpointsSmallScaleM_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsMediumScaleM_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "medium", scale: "m" });
-
-breakpointsMediumScaleM_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsLargeScaleM_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "large", scale: "m" });
-
-breakpointsLargeScaleM_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsXsmallScaleL_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "xsmall", scale: "l" });
-
-breakpointsXsmallScaleL_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsSmallScaleL_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "small", scale: "l" });
-
-breakpointsSmallScaleL_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsMediumScaleL_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "medium", scale: "l" });
-
-breakpointsMediumScaleL_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsLargeScaleL_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "large", scale: "l" });
-
-breakpointsLargeScaleL_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};

packages/calcite-components/src/components/alert/alert.tsx

@@ -46,8 +46,6 @@ import { KindIcons } from "../resources";
 import { AlertMessages } from "./assets/alert/t9n";
 import { AlertDuration, Sync, Unregister } from "./interfaces";
 import { CSS, DURATIONS, SLOTS } from "./resources";
-import { createObserver } from "../../utils/observers";
-import { breakpoints } from "../../utils/responsive";
 
 /**
  * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
@@ -175,9 +173,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
     if (open && !this.queued) {
       this.calciteInternalAlertRegister.emit();
     }
-    if (this.transitionEl) {
-      this.resizeObserver?.observe(this.transitionEl);
-    }
   }
 
   async componentWillLoad(): Promise<void> {
@@ -190,7 +185,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
 
   componentDidLoad(): void {
     setComponentLoaded(this);
-    this.resizeObserver?.observe(this.transitionEl);
   }
 
   disconnectedCallback(): void {
@@ -204,7 +198,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
     disconnectLocalized(this);
     disconnectMessages(this);
     this.slottedInShell = false;
-    this.resizeObserver?.disconnect();
   }
 
   render(): VNode {
@@ -214,12 +207,8 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
       signDisplay: "always",
     };
 
-    const { hasEndActions } = this;
-    const { open, autoClose, responsiveContainerWidth, label, placement, queued } = this;
+    const { open, autoClose, label, placement, queued } = this;
     const role = autoClose ? "alert" : "alertdialog";
-    const widthBreakpoints = breakpoints.width;
-    const lessThanSmall = responsiveContainerWidth < widthBreakpoints.small;
-    const greaterOrEqualThanSmall = responsiveContainerWidth >= widthBreakpoints.small;
     const hidden = !open;
     const effectiveIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
     const hasQueuedAlerts = this.queueLength > 1;
@@ -243,23 +232,15 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
           // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
           ref={this.setTransitionEl}
         >
-          <div class={CSS.contentContainer}>
-            {effectiveIcon && greaterOrEqualThanSmall ? this.renderIcon(effectiveIcon) : null}
-            <div class={CSS.content}>
-              {effectiveIcon && lessThanSmall ? this.renderIcon(effectiveIcon) : null}
-              <div class={CSS.textContainer}>
-                <slot name={SLOTS.title} />
-                <slot name={SLOTS.message} />
-                <slot name={SLOTS.link} />
-              </div>
-            </div>
-          </div>
-          {lessThanSmall ? this.renderCloseButton() : null}
-          <div class={CSS.footer} hidden={!hasEndActions && !hasQueuedAlerts}>
-            {this.renderActionsEnd()}
-            {hasQueuedAlerts ? this.renderQueueCount() : null}
+          {effectiveIcon && this.renderIcon(effectiveIcon)}
+          <div class={CSS.textContainer}>
+            <slot name={SLOTS.title} />
+            <slot name={SLOTS.message} />
+            <slot name={SLOTS.link} />
           </div>
-          {greaterOrEqualThanSmall ? this.renderCloseButton() : null}
+          {this.renderActionsEnd()}
+          {hasQueuedAlerts ? this.renderQueueCount() : null}
+          {this.renderCloseButton()}
           {open && !queued && autoClose ? <div class={CSS.dismissProgress} /> : null}
         </div>
       </Host>
@@ -434,8 +415,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
   /** is the alert queued */
   @State() queued = false;
 
-  @State() responsiveContainerWidth: number;
-
   private autoCloseTimeoutId: number = null;
 
   private closeButton: HTMLButtonElement;
@@ -446,11 +425,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
 
   private queueTimeout: number;
 
-  private resizeObserver = createObserver(
-    "resize",
-    (entries) => (this.responsiveContainerWidth = entries[0].contentRect.width)
-  );
-
   private totalOpenTime = 0;
 
   private totalHoverTime = 0;