@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.141 → 2.0.0-next.142

package/dist/components/message-menu-item/message-menu-item.css.js

@@ -213,7 +213,21 @@ const compentStyle = css`* {
 
 .wrapper.active-size-multi-line .text-container {
       grid-template-areas: "title date chevron" "description description description";
-      grid-template-columns: 1fr min-content min-content;
+      grid-template-columns: minmax(0, 1fr) min-content min-content;
+    }
+
+.wrapper.active-size-multi-line .title-container {
+      white-space: normal;
+      overflow-wrap: break-word;
+    }
+
+.wrapper.active-size-multi-line .description-container {
+      overflow-wrap: break-word;
+    }
+
+.wrapper.active-size-multi-line .date-container {
+      align-self: start;
+      height: var(--app-components-message-menu-item-icon-size-regular);
     }
 
 .wrapper.active-size-multi-line .icon-container {

package/dist/components/message-menu-item/message-menu-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-menu-item.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"message-menu-item.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-full-bundle",
-  "version": "2.0.0-next.141",
+  "version": "2.0.0-next.142",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/alert-menu-item/alert-menu-item.stories.ts

@@ -21,6 +21,7 @@ const meta: Meta<ObcAlertMenuItem> = {
     status: ObcAlertMenuItemStatus.Unacknowledged,
     hasIcon: false,
     shelved: false,
+    open: false,
     secondaryActionLabel: '',
     primaryActionState: ObcAlertMenuItemActionState.Enabled,
     secondaryActionState: ObcAlertMenuItemActionState.Enabled,
@@ -33,6 +34,7 @@ const meta: Meta<ObcAlertMenuItem> = {
       .time=${args.time}
       .shelved=${args.shelved}
       .hasIcon=${args.hasIcon}
+      .open=${args.open}
       .status=${args.status}
       .secondaryActionLabel=${args.secondaryActionLabel}
       .primaryActionState=${args.primaryActionState}
@@ -53,6 +55,7 @@ const meta: Meta<ObcAlertMenuItem> = {
     },
     hasIcon: {control: 'boolean'},
     shelved: {control: 'boolean'},
+    open: {control: 'boolean'},
     secondaryActionLabel: {control: 'text'},
     primaryActionState: {
       control: 'select',
@@ -68,6 +71,27 @@ const meta: Meta<ObcAlertMenuItem> = {
 export default meta;
 type Story = StoryObj<ObcAlertMenuItem>;
 
+const renderInNarrowContainer: Story['render'] = (args) => html`
+  <div style="width: 480px">
+    <obc-alert-menu-item
+      .title=${args.title}
+      .description=${args.description}
+      .day=${args.day}
+      .time=${args.time}
+      .shelved=${args.shelved}
+      .hasIcon=${args.hasIcon}
+      .open=${args.open}
+      .status=${args.status}
+      .secondaryActionLabel=${args.secondaryActionLabel}
+      .primaryActionState=${args.primaryActionState}
+      .secondaryActionState=${args.secondaryActionState}
+    >
+      <obc-alert-icon slot="alert-icon" type="alarm" active></obc-alert-icon>
+      ${args.hasIcon ? html`<obi-engine slot="icon"></obi-engine>` : nothing}
+    </obc-alert-menu-item>
+  </div>
+`;
+
 export const Default: Story = {
   args: {},
 };
@@ -122,3 +146,49 @@ export const PrimaryActionNone: Story = {
     primaryActionState: ObcAlertMenuItemActionState.None,
   },
 };
+
+export const OpenWithLongText: Story = {
+  args: {
+    open: true,
+    title:
+      'A title that is far too long to fit on a single line in a narrow list',
+    description:
+      'A description that is long enough to span several lines once the item is expanded, so the text has to wrap inside the available width instead of making the item wider.',
+  },
+  render: renderInNarrowContainer,
+};
+
+export const OpenWithLongWord: Story = {
+  args: {
+    open: true,
+    title: 'Averylongunbrokenwordthatdoesnotfitthecolumnwidth',
+    description:
+      'A description ending in averylongunbrokenwordthatdoesnotfitthecolumnwidth',
+  },
+  render: renderInNarrowContainer,
+};
+
+export const OpenShelvedWithLongText: Story = {
+  args: {
+    open: true,
+    shelved: true,
+    title:
+      'A title that is far too long to fit on a single line in a narrow list',
+    description:
+      'A description that is long enough to span several lines once the item is expanded, so the text has to wrap inside the available width instead of making the item wider.',
+  },
+  render: renderInNarrowContainer,
+};
+
+export const OpenShelvedWithSecondaryAction: Story = {
+  args: {
+    open: true,
+    shelved: true,
+    secondaryActionLabel: 'Mute',
+    title:
+      'A title that is far too long to fit on a single line in a narrow list',
+    description:
+      'A description that is long enough to span several lines once the item is expanded, so the text has to wrap inside the available width instead of making the item wider.',
+  },
+  render: renderInNarrowContainer,
+};

package/src/components/message-menu-item/message-menu-item.css

@@ -137,7 +137,21 @@
   &.active-size-multi-line {
     .text-container {
       grid-template-areas: "title date chevron" "description description description";
-      grid-template-columns: 1fr min-content min-content;
+      grid-template-columns: minmax(0, 1fr) min-content min-content;
+    }
+
+    .title-container {
+      white-space: normal;
+      overflow-wrap: break-word;
+    }
+
+    .description-container {
+      overflow-wrap: break-word;
+    }
+
+    .date-container {
+      align-self: start;
+      height: var(--app-components-message-menu-item-icon-size-regular);
     }
 
     .icon-container {