Skip to content

Commit

Permalink
revert: feat(alert): make component responsive (#8195)
Browse files Browse the repository at this point in the history 
**Related Issue:** N/A

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

See
#7921 (comment)
for more info.
  • Loading branch information
@jcfranco @benelan
jcfranco authored and benelan committed Nov 24, 2023
1 parent d50df68 commit 330eb44
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 225 deletions.
88 changes: 19 additions & 69 deletions packages/calcite-components/src/components/alert/alert.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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);

Expand All @@ -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;

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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();
122 changes: 1 addition & 121 deletions packages/calcite-components/src/components/alert/alert.stories.ts
View file
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down Expand Up @@ -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 },
};
44 changes: 9 additions & 35 deletions packages/calcite-components/src/components/alert/alert.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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> {
Expand All @@ -190,7 +185,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen

componentDidLoad(): void {
setComponentLoaded(this);
this.resizeObserver?.observe(this.transitionEl);
}

disconnectedCallback(): void {
Expand All @@ -204,7 +198,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
disconnectLocalized(this);
disconnectMessages(this);
this.slottedInShell = false;
this.resizeObserver?.disconnect();
}

render(): VNode {
Expand All @@ -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;
Expand All @@ -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>
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down

0 comments on commit 330eb44

Please sign in to comment.