Skip to content

fix(@clayui/css): LPD-64729 Updates c-slideout-fluid CSS #6162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 15, 2025
Merged

fix(@clayui/css): LPD-64729 Updates c-slideout-fluid CSS #6162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
de7f4b8
fix(@clayui/css): LPD-64729 Sidebar prints properties twice
pat270 Sep 11, 2025
3586e1b
fix(@clayui/css): LPD-64729 Removes xxl breakpoint, it generates too …
pat270 Sep 12, 2025
3406a13
fix(@clayui/css): LPD-64729 c-slideout-fluid should push content the …
pat270 Sep 13, 2025
7d52b80
fix(@clayui/core): LPD-64729 SidePanel moves c-slideout-fluid class t…
pat270 Sep 13, 2025
f4c039b
chore(@clayui/core): LPD-64729 SidePanel updates snapshots
pat270 Sep 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/clay-core/src/side-panel/SidePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,10 @@ export function SidePanel({

useLayoutEffect(() => {
containerRef.current?.classList.add('c-slideout-container');

if (fluid) {
containerRef.current?.classList.add('c-slideout-fluid');
}
}, [containerRef.current]);

useEffect(() => {
Expand Down Expand Up @@ -235,7 +239,6 @@ export function SidePanel({
`c-slideout c-slideout-${position} c-slideout-push`,
{
'c-slideout-end': direction === 'right',
'c-slideout-fluid': fluid,
'c-slideout-start': direction === 'left',
}
)}
Expand Down
4 changes: 2 additions & 2 deletions packages/clay-core/src/side-panel/__tests__/__snapshots__/BasicRendering.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,10 +271,10 @@ exports[`SidePanel basic rendering render with custom width 1`] = `
exports[`SidePanel basic rendering render with fluid width 1`] = `
<div>
<div
class="c-slideout-container"
class="c-slideout-container c-slideout-fluid"
>
<div
class="c-slideout c-slideout-absolute c-slideout-push c-slideout-end c-slideout-fluid"
class="c-slideout c-slideout-absolute c-slideout-push c-slideout-end"
>
<div
aria-labelledby="clay-id-5"
Expand Down
1 change: 0 additions & 1 deletion packages/clay-css/src/scss/atlas/variables/_globals.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -408,7 +408,6 @@ $grid-breakpoints: (
md: 768px,
lg: 992px,
xl: 1280px,
xxl: 1360px,
) !default;

// Grid columns
Expand Down
47 changes: 47 additions & 0 deletions packages/clay-css/src/scss/cadmin/variables/_slideout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ $cadmin-c-slideout-tbar-stacked-min-width: 40px !default;

$cadmin-c-slideout-tbar-stacked-min-width-mobile: 40px !default;

$cadmin-c-slideout-fluid-sidebar-width-md: '50vw' !default;

$cadmin-c-slideout-fluid-sidebar-width: '33vw' !default;

// C Slideout Transitions

$cadmin-c-slideout-transition-in: () !default;
Expand Down Expand Up @@ -142,6 +146,49 @@ $cadmin-c-slideout-sm-down: map-deep-merge(
$cadmin-c-slideout-sm-down
);

$cadmin-c-slideout-fluid: () !default;
$cadmin-c-slideout-fluid: map-deep-merge(
(
'&.c-slideout-push-start': (
padding-left: $cadmin-c-slideout-fluid-sidebar-width,
),
'&.c-slideout-push-end': (
padding-right: $cadmin-c-slideout-fluid-sidebar-width,
),
sidebar: (
max-width: $cadmin-c-slideout-fluid-sidebar-width,
width: $cadmin-c-slideout-fluid-sidebar-width,
),
media-breakpoint-down: (
md: (
'&.c-slideout-push-start': (
padding-left: $cadmin-c-slideout-fluid-sidebar-width-md,
),
'&.c-slideout-push-end': (
padding-right: $cadmin-c-slideout-fluid-sidebar-width-md,
),
sidebar: (
max-width: $cadmin-c-slideout-fluid-sidebar-width-md,
width: $cadmin-c-slideout-fluid-sidebar-width-md,
),
),
sm: (
'&.c-slideout-push-start': (
padding-left: 0,
),
'&.c-slideout-push-end': (
padding-right: 0,
),
sidebar: (
max-width: none,
width: 100vw,
),
),
),
),
$cadmin-c-slideout-fluid
);

// C Slideout Start

$cadmin-c-slideout-start: () !default;
Expand Down
8 changes: 0 additions & 8 deletions packages/clay-css/src/scss/components/_slideout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,6 @@

.c-slideout-fluid {
@include clay-slideout-variant($c-slideout-fluid);

@include media-breakpoint-up(md) {
@include clay-slideout-variant($c-slideout-fluid-md-up);
}

@include media-breakpoint-up(xxl) {
@include clay-slideout-variant($c-slideout-fluid-xxl-up);
}
}

.c-slideout-start {
Expand Down
67 changes: 67 additions & 0 deletions packages/clay-css/src/scss/mixins/_sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,12 @@
)
);

@each $key, $value in $base {
@if (type-of($value) != 'map') {
$map: map-remove($map, $key);
}
}

$panel: map-merge(
setter(map-get($map, sidebar-panel), ()),
setter(map-get($map, panel), ())
Expand All @@ -128,49 +134,70 @@
)
);

$map: map-remove($map, sidebar-panel, panel);

$header: map-merge(
setter(map-get($map, sidebar-header), ()),
setter(map-get($map, header), ())
);

$map: map-remove($map, sidebar-header, header);

$header-component-title: map-merge(
setter(map-get($header, component-title), ()),
setter(map-get($map, component-header-title), ())
);

$map: map-remove($map, component-title, component-header-title);

$header-component-subtitle: map-merge(
setter(map-get($header, component-subtitle), ()),
setter(map-get($map, component-header-subtitle), ())
);

$map: map-remove($map, component-subtitle, component-header-subtitle);

$body: map-merge(
setter(map-get($map, sidebar-body), ()),
setter(map-get($map, body), ())
);

$map: map-remove($map, sidebar-body, body);

$footer: map-merge(
setter(map-get($map, sidebar-footer), ()),
setter(map-get($map, footer), ())
);

$map: map-remove($map, sidebar-footer, footer);

$dt: map-merge(
setter(map-get($map, sidebar-dt), ()),
setter(map-get($map, dt), ())
);

$map: map-remove($map, sidebar-dt, dt);

$dd: map-merge(
setter(map-get($map, sidebar-dd), ()),
setter(map-get($map, dd), ())
);

$map: map-remove($map, sidebar-dd, dd);

$nav-nested: setter(map-get($map, nav-nested), ());

$nav-nested-nav-link: map-merge(
setter(map-get($nav-nested, nav-link), ()),
setter(map-get($map, nav-nested-link), ())
);

$map: map-remove($map, nav-link, nav-nested, nav-nested-link);

$sidebar-list-group: setter(map-get($map, sidebar-list-group), ());

$map: map-remove($map, sidebar-list-group);

$sidebar-list-group-item: setter(
map-get($sidebar-list-group, list-group-item),
()
Expand Down Expand Up @@ -199,43 +226,71 @@
)
);

$map: map-remove(
$map,
list-group-item,
sidebar-list-group-item-bg,
sidebar-list-group-item-border-color
);

$sidebar-list-group-title: map-merge(
setter(map-get($sidebar-list-group, list-group-title), ()),
setter(map-get($map, sidebar-list-group-title), ())
);

$map: map-remove($map, list-group-title, sidebar-list-group-title);

$sidebar-list-group-subtitle: map-merge(
setter(map-get($sidebar-list-group, list-group-subtitle), ()),
setter(map-get($map, sidebar-list-group-subtitle), ())
);

$map: map-remove(
$map,
list-group-subtitle,
sidebar-list-group-subtitle
);

$sidebar-list-group-text: map-merge(
setter(map-get($sidebar-list-group, list-group-text), ()),
setter(map-get($map, sidebar-list-group-text), ())
);

$map: map-remove($map, list-group-text, sidebar-list-group-text);

$sidebar-list-group-subtext: map-merge(
setter(map-get($sidebar-list-group, list-group-subtext), ()),
setter(map-get($map, sidebar-list-group-subtext), ())
);

$map: map-remove($map, list-group-subtext, sidebar-list-group-subtext);

$sidebar-list-group-sticker: map-deep-merge(
map-get($sidebar-list-group, sticker),
map-get($map, sidebar-list-group-sticker)
);

$map: map-remove($map, sticker, sidebar-list-group-sticker);

$sidebar-list-group-sticker-secondary: map-deep-merge(
map-get($sidebar-list-group, sticker-secondary),
map-get($map, sidebar-list-group-sticker-secondary)
);

$map: map-remove(
$map,
sticker-secondary,
sidebar-list-group-sticker-secondary
);

@if ($enabled) {
@if (length($base) != 0) {
@include clay-css($base);
}

@at-root {
$_sidenav-start: map-get($map, sidenav-start);
$map: map-remove($map, sidenav-start);

@if ($_sidenav-start) {
#{clay-insert-before(clay-parent(&), '.sidenav-start ')},
Expand All @@ -255,6 +310,7 @@
}

$_sidenav-end: map-get($map, sidenav-right);
$map: map-remove($map, sidenav-right);

@if ($_sidenav-end) {
#{clay-insert-before(clay-parent(&), '.sidenav-end ')},
Expand All @@ -275,6 +331,7 @@
}

$_focus: map-get($map, focus);
$map: map-remove($map, focus);

@if ($_focus) {
@at-root {
Expand All @@ -287,6 +344,7 @@
}

$_component-link: map-get($map, component-link);
$map: map-remove($map, component-link);

@if ($_component-link) {
.component-link {
Expand All @@ -295,6 +353,7 @@
}

$_close: map-get($map, close);
$map: map-remove($map, close);

@if ($_close) {
.close {
Expand Down Expand Up @@ -427,6 +486,7 @@
}

$_panel-unstyled: map-get($map, panel-unstyled);
$map: map-remove($map, panel-unstyled);

@if ($_panel-unstyled) {
.panel-unstyled {
Expand All @@ -435,6 +495,7 @@
}

$_component-navigation-bar: map-get($map, component-navigation-bar);
$map: map-remove($map, component-navigation-bar);

@if ($_component-navigation-bar) {
.component-navigation-bar {
Expand All @@ -443,6 +504,7 @@
}

$_panel-group: map-get($map, panel-group);
$map: map-remove($map, panel-group);

@if ($_panel-group) {
.panel-group {
Expand All @@ -451,6 +513,7 @@
}

$_btn: map-get($map, btn);
$map: map-remove($map, btn);

@if ($_btn) {
.btn {
Expand All @@ -459,6 +522,7 @@
}

$_form-control: map-get($map, form-control);
$map: map-remove($map, form-control);

@if ($_form-control) {
.form-control {
Expand All @@ -467,6 +531,7 @@
}

$_form-control-select: map-get($map, form-control-select);
$map: map-remove($map, form-control-select);

@if ($_form-control-select) {
select.form-control,
Expand All @@ -476,6 +541,7 @@
}

$_form-control-tag-group: map-get($map, form-control-tag-group);
$map: map-remove($map, form-control-tag-group);

@if ($_form-control-tag-group) {
.form-control-tag-group {
Expand All @@ -484,6 +550,7 @@
}

$_input-group: map-get($map, input-group);
$map: map-remove($map, input-group);

@if ($_input-group) {
.input-group {
Expand Down
16 changes: 16 additions & 0 deletions packages/clay-css/src/scss/mixins/_slideout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,22 @@
@include clay-css($map);
}

$_c-slideout-push-start: map-get($map, '&.c-slideout-push-start');

@if ($_c-slideout-push-start) {
&.c-slideout-push-start {
@include clay-css($_c-slideout-push-start);
}
}

$_c-slideout-push-end: map-get($map, '&.c-slideout-push-end');

@if ($_c-slideout-push-end) {
&.c-slideout-push-end {
@include clay-css($_c-slideout-push-end);
}
}

$_c-slideout-shown: map-get($map, c-slideout-shown);

@if ($_c-slideout-shown) {
Expand Down
Loading
Loading