Skip to content

Commit

Permalink
fix(alert): prevent content from overflowing alert
Browse files Browse the repository at this point in the history
- flexbox has some quirks with overflow
- setting min-width: 0 prevents the content from overflowing

fixes #137
  • Loading branch information
Ashley Ryan authored and ashleyryan committed Aug 15, 2022
1 parent a71f585 commit 2243f2b
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 0 deletions.
5 changes: 5 additions & 0 deletions projects/core/src/alert/alert.element.scss
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ cds-internal-close-button {
display: flex;
min-height: #{$cds-global-space-6};
padding: var(--container-padding);
min-width: 0;
}

.alert-icon-wrapper {
Expand All @@ -72,6 +73,10 @@ cds-internal-close-button {
line-height: $lightweight-alert-line-height;
}

.alert-content {
min-width: 0;
}

::slotted(cds-alert-actions) {
--action-text-color: var(--color);
--action-size: #{$lightweight-alert-line-height};
Expand Down
27 changes: 27 additions & 0 deletions projects/core/src/alert/alert.element.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,33 @@ describe('Alert element – ', () => {
});
});

describe('layout:', () => {
beforeEach(async () => {
testElement = await createTestElement(html`
<cds-alert-group status="info" style="width: 200px">
<cds-alert>
<pre style="overflow-x: auto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</pre
>
</cds-alert>
</cds-alert-group>
`);
component = testElement.querySelector<CdsAlert>('cds-alert');
});

afterEach(() => {
removeTestElement(testElement);
});

it('should not let content overflow alert', async () => {
await componentIsStable(component);
const content = component.querySelector('pre');
expect(content.getBoundingClientRect().width).toBeLessThan(component.getBoundingClientRect().width);
});
});

describe('custom icons: ', () => {
let customComponent: CdsAlert;

Expand Down

0 comments on commit 2243f2b

Please sign in to comment.