fix(alert): remove space between action dropdown trigger and popup me…

…nu (#1417)

This commit fixes a regression that was introduced in 8214941 (#1029).

The alert action dropdown menu will now appear adjacent to the trigger
without any gap due to long alert content.

.storybook/helpers/common.ts

@@ -11,7 +11,7 @@ import { StoryContext } from '@storybook/angular';
 
 export const CommonModules = [CommonModule, FormsModule, ReactiveFormsModule];
 
-export function removeFocusOutline({ canvasElement }: StoryContext) {
+export function removeFocusOutline({ canvasElement }: Pick<StoryContext, 'canvasElement'>) {
  // remove keyboard focus outline from focused element (e.g. modal title)
  canvasElement.querySelector<HTMLElement>(':focus')?.blur();
 }

.storybook/stories/alert/standard-alert.stories.ts

@@ -5,19 +5,19 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { ClrAlert, ClrAlertModule, commonStringsDefault } from '@clr/angular';
+import { ClrAlert, ClrAlertModule, ClrDropdownModule, commonStringsDefault } from '@clr/angular';
 import { action } from '@storybook/addon-actions';
-import { moduleMetadata, StoryFn, StoryObj } from '@storybook/angular';
+import { moduleMetadata, StoryContext, StoryFn, StoryObj } from '@storybook/angular';
 
 import { ALERT_TYPES } from '../../../projects/angular/src/emphasis/alert/utils/alert-types';
-import { CommonModules } from '../../helpers/common';
+import { CommonModules, removeFocusOutline } from '../../helpers/common';
 
 export default {
  title: 'Alert/Standard Alerts',
  component: ClrAlert,
  decorators: [
  moduleMetadata({
- imports: [...CommonModules, ClrAlertModule],
+ imports: [...CommonModules, ClrAlertModule, ClrDropdownModule],
  }),
  ],
  argTypes: {
@@ -72,6 +72,7 @@ export default {
  createArray: n => new Array(n),
  itemCount: 3,
  content: 'Hello World!',
+ showActions: false,
  ALERT_TYPES,
  },
 };
@@ -89,6 +90,20 @@ const template = `
  >
  <clr-alert-item *ngFor="let _ of createArray(itemCount); let i = index">
  <span class="alert-text">{{ content }} {{ i + 1 }}</span>
+ <div *ngIf="showActions" class="alert-actions">
+ <clr-dropdown>
+ <button clrDropdownTrigger>
+ Actions
+ <cds-icon shape="angle" direction="down"></cds-icon>
+ </button>
+ <clr-dropdown-menu clrPosition="bottom-right">
+ <button clrDropdownItem>Shutdown</button>
+ <button clrDropdownItem>Delete</button>
+ <button clrDropdownItem>Reboot</button>
+ </clr-dropdown-menu>
+ </clr-dropdown>
+ <a class="alert-action" href="javascript://">Ignore</a>
+ </div>
  </clr-alert-item>
  </clr-alert>
  </div>
@@ -140,3 +155,45 @@ export const DifferentIcon: StoryObj = {
  clrAlertIcon: 'settings',
  },
 };
+
+export const WithActions: StoryObj = {
+ render: AlertTemplate,
+ args: {
+ showActions: true,
+ },
+};
+
+export const WithOpenActionsDropdown: StoryObj = {
+ render: AlertTemplate,
+ play: openDropdown,
+ args: {
+ itemCount: 1,
+ showActions: true,
+ ALERT_TYPES: ['info'],
+ },
+};
+
+export const WithLongContentAndOpenActionsDropdown: StoryObj = {
+ render: AlertTemplate,
+ play: openDropdown,
+ args: {
+ itemCount: 1,
+ content: `
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+ labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ `,
+ showActions: true,
+ ALERT_TYPES: ['info'],
+ },
+};
+
+function openDropdown({ canvasElement }: StoryContext) {
+ canvasElement.querySelector<HTMLButtonElement>('button[clrDropdownTrigger]').click();
+
+ setTimeout(() => {
+ removeFocusOutline({ canvasElement });
+ }, 0);
+}

projects/angular/src/emphasis/alert/_alert.clarity.scss

@@ -194,11 +194,18 @@
  }
 
  .alert-actions {
- display: inline-flex;
- gap: tokens.$cds-global-space-5;
  flex: 0 0 auto;
  white-space: nowrap;
 
+ > {
+ .alert-action,
+ .dropdown {
+ &:not(:last-child) {
+ margin-right: tokens.$cds-global-space-5;
+ }
+ }
+ }
+
  .dropdown-item {
  color: dropdown-variables.$clr-dropdown-text-color;
  }

tests/screenshot-options.ts

@@ -48,6 +48,12 @@ export const ScreenshotOptions: ScreenshotOptionsT = {
  'signpost--opened': {
  fullPageScreenshot: true,
  },
+ 'standard-alerts--with-open-actions-dropdown': {
+ fullPageScreenshot: true,
+ },
+ 'standard-alerts--with-long-content-and-open-actions-dropdown': {
+ fullPageScreenshot: true,
+ },
  wizard: {
  fullPageScreenshot: true,
  },