Skip to content

Commit

Permalink
fix(ld-sidenav): custom horizontal padding support
Browse files Browse the repository at this point in the history
  • Loading branch information
@borisdiakur
borisdiakur committed Feb 15, 2023
1 parent f65011e commit 6e8d844
Show file tree
Hide file tree
Showing 13 changed files with 109 additions and 23 deletions.
26 changes: 26 additions & 0 deletions screenshot/builds/master.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15942,6 +15942,32 @@
"isLandscape": false,
"isMobile": false
},
{
"id": "6263d491",
"image": "04b114dd9c46cf72dc506acc7d897202.png",
"userAgent": "default",
"desc": "ld-sidenav with accordion collapses to narrow mode with custom horizontal padding",
"testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
"width": 600,
"height": 600,
"deviceScaleFactor": 1,
"hasTouch": false,
"isLandscape": false,
"isMobile": false
},
{
"id": "3dc13b7e",
"image": "3c1b95947fabb4e5c59a30cf5f09fb5a.png",
"userAgent": "default",
"desc": "ld-sidenav with accordion supports nested accordions with custom horizontal padding",
"testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
"width": 600,
"height": 600,
"deviceScaleFactor": 1,
"hasTouch": false,
"isLandscape": false,
"isMobile": false
},
{
"id": "e3446bae",
"image": "23b0ee2c9e6c4b5889889e84d68f52c2.png",
Expand Down
Binary file added screenshot/images/04b114dd9c46cf72dc506acc7d897202.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added screenshot/images/3c1b95947fabb4e5c59a30cf5f09fb5a.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/docs/components/docs-main/docs-main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -538,6 +538,9 @@
[id^='properties'] + table::after {
content: '* required';
}
[id^='css-variables'] + table::after {
content: '* readonly';
}

[id^='slots'],
[id^='events'],
Expand Down
6 changes: 2 additions & 4 deletions src/liquid/components/ld-sidenav/ld-sidenav-accordion/ld-sidenav-accordion.shadow.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,7 @@
--ld-accordion-toggle-indicator-bg-col-focus: var(--ld-thm-primary-focus);
--ld-accordion-toggle-size: var(--ld-sidenav-navitem-icon-size);

--ld-sidenav-navitem-tertiary-indent: calc(
2 * var(--ld-sidenav-padding-x) + 0.3125rem
);
--ld-sidenav-navitem-tertiary-indent: calc(2 * var(--ld-sp-16) + 0.3125rem);

transform: translateY(
var(
Expand Down Expand Up @@ -84,7 +82,7 @@
--ld-sidenav-accordion-bg-col-hover,
var(--ld-col-neutral-050)
);
right: var(--ld-sp-16);
right: var(--ld-sidenav-padding-x);
pointer-events: none;
border-radius: var(--ld-sidenav-navitem-border-radius);
outline: none;
Expand Down
4 changes: 2 additions & 2 deletions src/liquid/components/ld-sidenav/ld-sidenav-header/ld-sidenav-header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,8 +164,8 @@ export class LdSidenavHeader {
<svg
class="ld-sidenav-header__initial-m"
fill="none"
preserveAspectRatio="xMidYMid slice"
viewBox="0 6 24 12"
preserveAspectRatio="xMidYMid meet"
viewBox="2 6 20 12"
>
<path
fill-rule="evenodd"
Expand Down
10 changes: 8 additions & 2 deletions src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.shadow.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,8 @@
user-select: none;
touch-action: manipulation;
color: var(--ld-sidenav-navitem-col);
display: flex;
display: grid;
grid-template-columns: var(--ld-sidenav-navitem-icon-size) 1fr auto;
align-items: center;
box-sizing: border-box;
padding: 0;
Expand All @@ -51,7 +52,9 @@
outline: none;
-webkit-touch-callout: none;

&:not(.ld-sidenav-navitem--secondary):not(.ld-sidenav-navitem--tertiary):not(.ld-sidenav-navitem--in-accordion) {
&:not(.ld-sidenav-navitem--secondary):not(.ld-sidenav-navitem--tertiary):not(
.ld-sidenav-navitem--in-accordion
) {
transition: var(--ld-sidenav-stack-to-top-transition);
transform: translateY(
var(
Expand Down Expand Up @@ -169,6 +172,9 @@
}

&--tertiary {
grid-template-columns: calc(
var(--ld-sidenav-navitem-icon-size) - var(--ld-sp-8)
) 1fr auto;
margin-left: var(--ld-sidenav-navitem-tertiary-indent);
width: var(--ld-sidenav-navitem-tertiary-width);
gap: 0;
Expand Down
2 changes: 1 addition & 1 deletion ...omponents/ld-sidenav/ld-sidenav-scroller-internal/ld-sidenav-scroller-internal.shadow.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@
margin-top: 0;
margin-bottom: 0;
position: absolute;
width: calc(100% - 2 * var(--ld-sidenav-padding-y));
width: calc(100% - 2 * var(--ld-sidenav-padding-x));
}

.ld-sidenav-scroller-internal__hr-top {
Expand Down
6 changes: 5 additions & 1 deletion src/liquid/components/ld-sidenav/ld-sidenav.shadow.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,11 @@
position: absolute;
z-index: 1;

:host(.ld-sidenav--collapsed.ld-sidenav--fully-collapsible:not(.ld-sidenav--closable))
:host(
.ld-sidenav--collapsed.ld-sidenav--fully-collapsible:not(
.ld-sidenav--closable
)
)
& {
display: block;
}
Expand Down
17 changes: 8 additions & 9 deletions src/liquid/components/ld-sidenav/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1851,15 +1851,14 @@ The sidenav as well as its subcomponents emit different events which you can use

## CSS Variables

| Variable | Description |
|--------------------------------------|---------------------------------------------------------------------|
| `--ld-sidenav-bg-color` | Background color of the `ld-sidenav` component. |
| `--ld-sidenav-closable-min-width` | Minimum width of the `ld-sidenav` component when closable. |
| `--ld-sidenav-padding-x` | Horizontal padding applied on the component and its subcomponents. |
| `--ld-sidenav-padding-y` | Vertical padding applied on the component and its subcomponents. |
| `--ld-sidenav-transition-duration` | Transition duration for all sidenav specific transitions. |
| `--ld-sidenav-width` | Width of the `ld-sidenav` component. |
| `--ld-sidenav-width-collapsed` | Width of the `ld-sidenav` component when collapsed. |
| Variable | Description |
|-------------------------------------------|---------------------------------------------------------------------|
| `--ld-sidenav-bg-color` | Background color of the `ld-sidenav` component. |
| `--ld-sidenav-padding-x` | Horizontal padding applied on the component and its subcomponents. |
| `--ld-sidenav-padding-y` | Vertical padding applied on the component and its subcomponents. |
| `--ld-sidenav-transition-duration` | Transition duration for all sidenav specific transitions. |
| `--ld-sidenav-width` | Width of the `ld-sidenav` component. |
| `--ld-sidenav-width-collapsed` _readonly_ | Width of the `ld-sidenav` component when collapsed. |

<!-- Auto Generated Below -->

Expand Down
6 changes: 3 additions & 3 deletions src/liquid/components/ld-sidenav/test/__snapshots__/ld-sidenav.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ exports[`ld-sidenav aligns header to the right 1`] = `
<mock:shadow-root>
<a class="ld-sidenav-header__anchor" href="#" part="anchor">
<slot name="logo">
<svg class="ld-sidenav-header__initial-m" fill="none" preserveAspectRatio="xMidYMid slice" viewBox="0 6 24 12">
<svg class="ld-sidenav-header__initial-m" fill="none" preserveAspectRatio="xMidYMid meet" viewBox="2 6 20 12">
<path clip-rule="evenodd" d="M20.5921 7.5H19.1a.2955.2955 0 0 0-.1926.0727l-2.9895 2.6378c-1.0241.9043-2.4024 1.412-3.9177 1.412-1.5796 0-3.0088-.5544-4.0444-1.5266 0 0-2.199-1.9406-2.2179-1.958-.422-.369-1.0028-.624-1.6714-.6379h-1.785C2.126 7.5 2 7.6184 2 7.7645v7.4118c0 .7316.6301 1.3237 1.4083 1.3237h.9133c.1564 0 .2831-.1194.2831-.2661l.0007-2.6375c0-.6893.5987-1.2579 1.3204-1.2579 1.3434 0 2.3067 1.0814 3.177 1.8037 1.0661.8849 1.8871 1.7374 2.8974 1.7374 1.0092 0 1.8306-.8525 2.8966-1.7374.8707-.7223 1.834-1.8037 3.1767-1.8037.718 0 1.3137.5629 1.3208 1.2468v1.591c0 .7316.6305 1.3224 1.4089 1.3224h.6079c.1588 0 .3061.0013.3061.0013.1561 0 .2828-.1194.2828-.2658V8.8237C22 8.0925 21.3692 7.5 20.5921 7.5Z" fill="currentcolor" fill-rule="evenodd"></path>
</svg>
</slot>
Expand Down Expand Up @@ -225,7 +225,7 @@ exports[`ld-sidenav collapses to narrow 1`] = `
</ld-tooltip>
<a class="ld-sidenav-header__anchor" href="#" part="anchor">
<slot name="logo">
<svg class="ld-sidenav-header__initial-m" fill="none" preserveAspectRatio="xMidYMid slice" viewBox="0 6 24 12">
<svg class="ld-sidenav-header__initial-m" fill="none" preserveAspectRatio="xMidYMid meet" viewBox="2 6 20 12">
<path clip-rule="evenodd" d="M20.5921 7.5H19.1a.2955.2955 0 0 0-.1926.0727l-2.9895 2.6378c-1.0241.9043-2.4024 1.412-3.9177 1.412-1.5796 0-3.0088-.5544-4.0444-1.5266 0 0-2.199-1.9406-2.2179-1.958-.422-.369-1.0028-.624-1.6714-.6379h-1.785C2.126 7.5 2 7.6184 2 7.7645v7.4118c0 .7316.6301 1.3237 1.4083 1.3237h.9133c.1564 0 .2831-.1194.2831-.2661l.0007-2.6375c0-.6893.5987-1.2579 1.3204-1.2579 1.3434 0 2.3067 1.0814 3.177 1.8037 1.0661.8849 1.8871 1.7374 2.8974 1.7374 1.0092 0 1.8306-.8525 2.8966-1.7374.8707-.7223 1.834-1.8037 3.1767-1.8037.718 0 1.3137.5629 1.3208 1.2468v1.591c0 .7316.6305 1.3224 1.4089 1.3224h.6079c.1588 0 .3061.0013.3061.0013.1561 0 .2828-.1194.2828-.2658V8.8237C22 8.0925 21.3692 7.5 20.5921 7.5Z" fill="currentcolor" fill-rule="evenodd"></path>
</svg>
</slot>
Expand Down Expand Up @@ -4067,7 +4067,7 @@ exports[`ld-sidenav sidenav accordion accordion collapses to narrow 1`] = `
</ld-tooltip>
<a class="ld-sidenav-header__anchor" href="#" part="anchor">
<slot name="logo">
<svg class="ld-sidenav-header__initial-m" fill="none" preserveAspectRatio="xMidYMid slice" viewBox="0 6 24 12">
<svg class="ld-sidenav-header__initial-m" fill="none" preserveAspectRatio="xMidYMid meet" viewBox="2 6 20 12">
<path clip-rule="evenodd" d="M20.5921 7.5H19.1a.2955.2955 0 0 0-.1926.0727l-2.9895 2.6378c-1.0241.9043-2.4024 1.412-3.9177 1.412-1.5796 0-3.0088-.5544-4.0444-1.5266 0 0-2.199-1.9406-2.2179-1.958-.422-.369-1.0028-.624-1.6714-.6379h-1.785C2.126 7.5 2 7.6184 2 7.7645v7.4118c0 .7316.6301 1.3237 1.4083 1.3237h.9133c.1564 0 .2831-.1194.2831-.2661l.0007-2.6375c0-.6893.5987-1.2579 1.3204-1.2579 1.3434 0 2.3067 1.0814 3.177 1.8037 1.0661.8849 1.8871 1.7374 2.8974 1.7374 1.0092 0 1.8306-.8525 2.8966-1.7374.8707-.7223 1.834-1.8037 3.1767-1.8037.718 0 1.3137.5629 1.3208 1.2468v1.591c0 .7316.6305 1.3224 1.4089 1.3224h.6079c.1588 0 .3061.0013.3061.0013.1561 0 .2828-.1194.2828-.2658V8.8237C22 8.0925 21.3692 7.5 20.5921 7.5Z" fill="currentcolor" fill-rule="evenodd"></path>
</svg>
</slot>
Expand Down
49 changes: 49 additions & 0 deletions src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -800,6 +800,35 @@ describe('ld-sidenav', () => {
expect(result2).toMatchScreenshot()
})

it('supports nested accordions with custom horizontal padding', async () => {
const page = await getPageWithContent(
getSidenavWithAccordion({
currentSubnav: 'artificial-intelligence',
style: '--ld-sidenav-padding-x: 2rem',
})
)
await page.emulateMediaFeatures([
{ name: 'prefers-reduced-motion', value: 'reduce' },
])
page.waitForChanges()
await new Promise((resolve) => setTimeout(resolve, 100))

await page.keyboard.press('Tab')
await page.keyboard.press('Tab')
await page.keyboard.press('Tab')
await page.keyboard.press('Tab')
await page.keyboard.press('Tab')
await page.keyboard.press('Space')
await page.waitForChanges()

await page.keyboard.press('Tab')
await page.keyboard.press('Space')
await page.waitForChanges()

const result = await page.compareScreenshot()
expect(result).toMatchScreenshot()
})

it('collapses to narrow mode', async () => {
const page = await getPageWithContent(
getSidenavWithAccordion({
Expand All @@ -818,6 +847,26 @@ describe('ld-sidenav', () => {
const result = await page.compareScreenshot()
expect(result).toMatchScreenshot()
})

it('collapses to narrow mode with custom horizontal padding', async () => {
const page = await getPageWithContent(
getSidenavWithAccordion({
currentSubnav: 'artificial-intelligence',
collapsible: true,
collapsed: true,
narrow: true,
style: '--ld-sidenav-padding-x: 2rem',
})
)
await page.emulateMediaFeatures([
{ name: 'prefers-reduced-motion', value: 'reduce' },
])
page.waitForChanges()
await new Promise((resolve) => setTimeout(resolve, 100))

const result = await page.compareScreenshot()
expect(result).toMatchScreenshot()
})
})

describe('header', () => {
Expand Down
3 changes: 2 additions & 1 deletion src/liquid/components/ld-sidenav/test/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -337,6 +337,7 @@ export function getSidenavWithAccordion(options?: {
neutral?: boolean
preserveAccordionState?: boolean
roundedBackButton?: boolean
style?: string
}) {
const preserveAccordionStateProp =
options.preserveAccordionState === undefined ||
Expand All @@ -354,7 +355,7 @@ export function getSidenavWithAccordion(options?: {
options?.collapsed ? ' collapsed' : ''
}${options?.narrow ? ' narrow' : ''}${options?.neutral ? ' neutral' : ''}${
options?.align ? ' align="' + options.align + '"' : ''
}>
}${options.style ? ' style="' + options.style + '"' : ''}>
<ld-sidenav-header href="#" slot="header">Computer Science</ld-sidenav-header>
<ld-sidenav-back slot="top">
<ld-sidenav-navitem ${
Expand Down

1 comment on commit 6e8d844

@vercel
Copy link

@vercel vercel bot commented on 6e8d844 Feb 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

liquid – ./

liquid-git-main-uxsd.vercel.app
liquid-uxsd.vercel.app
liquid-oxygen.vercel.app

Please sign in to comment.