From a93f49670e1e7aef684cd984c77d1de20efe5b0f Mon Sep 17 00:00:00 2001 From: Boris Diakur Date: Thu, 21 Sep 2023 18:21:59 +0200 Subject: [PATCH] fix(ld-sidenav): truncate long words in nav header --- screenshot/builds/master.json | 13 +++++++++++++ .../images/8513cd52278926a95d7b2299296d9087.png | Bin 0 -> 6796 bytes .../ld-sidenav-header.shadow.css | 16 ++++++++++------ .../ld-sidenav/test/ld-sidenav.e2e.ts | 16 ++++++++++++++++ 4 files changed, 39 insertions(+), 6 deletions(-) create mode 100644 screenshot/images/8513cd52278926a95d7b2299296d9087.png diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json index 8077f4c5f0..f3eddf17b0 100644 --- a/screenshot/builds/master.json +++ b/screenshot/builds/master.json @@ -19504,6 +19504,19 @@ "isLandscape": false, "isMobile": false }, + { + "id": "4df0ed6a", + "image": "8513cd52278926a95d7b2299296d9087.png", + "userAgent": "default", + "desc": "ld-sidenav header truncates text in header", + "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts", + "width": 600, + "height": 600, + "deviceScaleFactor": 1, + "hasTouch": false, + "isLandscape": false, + "isMobile": false + }, { "id": "171fb2c3", "image": "0ec4bccd78c16f24b8352b0a15f2934b.png", diff --git a/screenshot/images/8513cd52278926a95d7b2299296d9087.png b/screenshot/images/8513cd52278926a95d7b2299296d9087.png new file mode 100644 index 0000000000000000000000000000000000000000..91359c91c202b1db7b815cec3c134f92302a3bef GIT binary patch literal 6796 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 literal 0 HcmV?d00001 diff --git a/src/liquid/components/ld-sidenav/ld-sidenav-header/ld-sidenav-header.shadow.css b/src/liquid/components/ld-sidenav/ld-sidenav-header/ld-sidenav-header.shadow.css index 8249ac9add..8855a9545a 100644 --- a/src/liquid/components/ld-sidenav/ld-sidenav-header/ld-sidenav-header.shadow.css +++ b/src/liquid/components/ld-sidenav/ld-sidenav-header/ld-sidenav-header.shadow.css @@ -46,7 +46,8 @@ outline-offset: var(--ld-sidenav-navitem-bg-inset); position: relative; text-decoration: none; - transition: opacity var(--ld-sidenav-transition-duration-collapse-expand) + transition: + opacity var(--ld-sidenav-transition-duration-collapse-expand) var(--ld-sidenav-transition-delay-collapse-expand) linear, transform var(--ld-sidenav-transition-duration-collapse-expand) ease; @@ -107,7 +108,8 @@ :host(.ld-sidenav-header--closed) &, :host(.ld-sidenav-header--collapsed) & { transform: translateX(var(--ld-sidenav-translate-x-delta)); - transition: visibility 0s + transition: + visibility 0s calc( var(--ld-sidenav-transition-duration-collapse-expand) + var(--ld-sidenav-transition-delay-collapse-expand) @@ -150,8 +152,8 @@ place-content: center; touch-action: manipulation; transform: translateX(var(--ld-sp-6)); - transition: transform var(--ld-sidenav-transition-duration-collapse-expand) - ease, + transition: + transform var(--ld-sidenav-transition-duration-collapse-expand) ease, opacity var(--ld-sidenav-transition-duration-collapse-expand) linear; width: var(--ld-sidenav-navitem-icon-size); will-change: transform; /* fixes rendering issue */ @@ -210,7 +212,8 @@ :host(.ld-sidenav-header--closed) &, :host(.ld-sidenav-header--collapsed-fully) & { - transition: visibility 0s + transition: + visibility 0s calc(2 * var(--ld-sidenav-transition-duration-collapse-expand)) linear, transform var(--ld-sidenav-transition-duration-collapse-expand) ease, opacity calc(var(--ld-sidenav-transition-duration-collapse-expand) * 0.5) @@ -253,11 +256,12 @@ .ld-sidenav-header__slot-wrapper { -webkit-box-orient: vertical; - -webkit-line-clamp: 2; + -webkit-line-clamp: 1; display: -webkit-box; max-height: var(--ld-sidenav-header-height); /* required in Safari */ overflow: hidden; position: relative; text-overflow: ellipsis; + word-break: break-word; z-index: 2; } diff --git a/src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts b/src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts index 9cfcfe19e0..4562763fdd 100644 --- a/src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts +++ b/src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts @@ -980,6 +980,22 @@ describe('ld-sidenav', () => { const result = await page.compareScreenshot() expect(result).toMatchScreenshot() }) + + it('truncates text in header', async () => { + const page = await getPageWithContent( + ` + + + A title which is super long and should be truncated, because it is too long. + + `, + { reducedMotion: true } + ) + page.waitForChanges() + + const result = await page.compareScreenshot() + expect(result).toMatchScreenshot() + }) }) describe('stacking', () => {