Skip to content

refactor(theme): use only a min-block-size for .dropdown-item #1935

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
spike-rabbit merged 1 commit into from
Jul 7, 2026
Merged

refactor(theme): use only a min-block-size for .dropdown-item #1935

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 3 additions & 1 deletion projects/element-ng/content-action-bar/si-content-action-bar.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@use 'sass:map';
@use '@siemens/element-theme/src/styles/variables/semantic-tokens';
@use '@siemens/element-theme/src/styles/bootstrap/variables' as bootstrap-variables;
@use '@siemens/element-theme/src/styles/variables/spacers';

div > [si-content-action-bar-toggle] {
// The siAutoCollapsableList directive reserves space for the overflow toggle by reading its
Expand All @@ -10,7 +12,7 @@ div > [si-content-action-bar-toggle] {
// items and preventing resize-triggered expand/collapse from reaching a stable state.
// The fixed inline-size guarantees a deterministic clientWidth at all times so the reserved
// space matches the toggle's actual footprint the moment it becomes visible.
inline-size: calc(1.25rem + 2 * bootstrap-variables.$dropdown-item-padding-y);
inline-size: calc(1.25rem + 2 * map.get(spacers.$spacers, 4));
Comment thread
spike-rabbit marked this conversation as resolved.
justify-content: center;
border-radius: semantic-tokens.$element-button-radius;
}
Expand Down
4 changes: 2 additions & 2 deletions projects/element-theme/src/styles/bootstrap/_badges.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@
padding-inline: variables.$badge-padding-x;
margin-block: 0;
margin-inline: map.get(spacers.$spacers, 4);
line-height: 1.25rem;
line-height: variables.$badge-line-height;
flex-shrink: 0;
font-size: typography.$si-font-size-body;
font-weight: typography.$si-font-weight-body;
max-inline-size: 24.5ch;
// Make min-inline-size equal the badge height to create a circular badge when there's only one character.
min-inline-size: calc(1.25rem + 2 * #{variables.$badge-padding-y}); // 1.75rem = same as height
min-inline-size: variables.$badge-height;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
Expand Down
13 changes: 10 additions & 3 deletions projects/element-theme/src/styles/bootstrap/_dropdowns.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,16 @@

.dropdown-menu-scroller {
overflow: auto;
// 266px is based on figma and gives 6-8 items. Depending on the number of headings
// ~266px with rfs 16px, based on Figma and gives 6-8 items. Depending on the number of headings
max-block-size: min(
100vb,
calc((1lh + 2 * #{bootstrap-variables.$dropdown-item-padding-y}) * 8.3125) // = 266px with rfs 16px
calc(
(
bootstrap-variables.$dropdown-line-height + #{2 *
bootstrap-variables.$dropdown-item-padding-y}
) *
8.3125
)
);
}

Expand Down Expand Up @@ -90,7 +96,7 @@
display: flex;
flex-wrap: nowrap;
align-items: center;
block-size: calc(1lh + 2 * bootstrap-variables.$dropdown-item-padding-y);
min-block-size: calc(1lh + 2 * bootstrap-variables.$dropdown-item-padding-y);
inline-size: 100%;
padding-block: bootstrap-variables.$dropdown-item-padding-y;
padding-inline: bootstrap-variables.$dropdown-item-padding-x;
Expand Down Expand Up @@ -169,6 +175,7 @@
white-space: nowrap; // as with > li > a
font-size: typography.$si-font-size-h5;
font-weight: typography.$si-font-weight-h5;
line-height: bootstrap-variables.$dropdown-line-height;
}

.dropdown-divider {
Expand Down
25 changes: 14 additions & 11 deletions projects/element-theme/src/styles/bootstrap/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -434,6 +434,17 @@ $nav-tabs-link-hover-border-color: transparent transparent $nav-tabs-border-colo
$nav-tabs-link-active-color: semantic-tokens.$element-action-secondary-text-hover !default;
$nav-tabs-link-active-bg: transparent !default;

// Badges
$badge-font-size: typography.$si-font-size-body;
$badge-font-weight: typography.$si-font-weight-body;
$badge-color: semantic-tokens.$element-text-inverse !default;
$badge-padding-y: map.get(spacers.$spacers, 1);
$badge-padding-x: map.get(spacers.$spacers, 4);
$badge-border-radius: 0.75rem;
$badge-dot-size: 0.625rem;
$badge-line-height: 1.25rem;
$badge-height: calc($badge-line-height + 2 * $badge-padding-y);

// Dropdowns
//
// Dropdown menu container and contents.
Expand All @@ -442,7 +453,8 @@ $dropdown-padding-x: 0 !default;
$dropdown-padding-y: map.get(spacers.$spacers, 4) !default;
$dropdown-spacer: 0.125rem !default;
$dropdown-font-size: $font-size-base !default;
$dropdown-line-height: $line-height-base;
// this is to have room for icon and badges
$dropdown-line-height: $badge-height;
Comment thread
dr-itz marked this conversation as resolved.
$dropdown-color: $body-color !default;
$dropdown-bg: semantic-tokens.$element-base-1 !default;
$dropdown-border-radius: semantic-tokens.$element-radius-2 !default;
Expand All @@ -451,7 +463,7 @@ $dropdown-divider-margin-y: 4px !default;
$dropdown-box-shadow: elevation.$element-elevation-2 !default;
$dropdown-link-color: semantic-tokens.$element-text-primary !default;
$dropdown-link-disabled-color: semantic-tokens.$element-text-disabled !default;
$dropdown-item-padding-y: map.get(spacers.$spacers, 4);
$dropdown-item-padding-y: map.get(spacers.$spacers, 2);
$dropdown-item-padding-x: map.get(spacers.$spacers, 5);
$dropdown-header-color: semantic-tokens.$element-text-primary !default;

Expand Down Expand Up @@ -517,15 +529,6 @@ $popover-arrow-color: $popover-bg !default;

$popover-arrow-outer-color: $popover-border-color !default;

// Badges
$badge-font-size: typography.$si-font-size-body;
$badge-font-weight: typography.$si-font-weight-body;
$badge-color: semantic-tokens.$element-text-inverse !default;
$badge-padding-y: map.get(spacers.$spacers, 1);
$badge-padding-x: map.get(spacers.$spacers, 4);
$badge-border-radius: 0.75rem;
$badge-dot-size: 0.625rem;

// Modals

// Padding applied to the modal body
Expand Down
2 changes: 1 addition & 1 deletion src/app/examples/si-notification-item/si-notification-item-popover.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
<ng-template #notifications>
<si-header-dropdown>
<div class="d-flex flex-column notification-dropdown">
<div class="dropdown-header d-flex justify-content-between align-items-center px-6">
<div class="dropdown-header d-flex justify-content-between align-items-center px-6 py-4">
<span class="si-title-2">Notifications</span>
<button type="button" class="btn btn-tertiary" (click)="logEvent('Dismiss all')"
>Dismiss all</button
Expand Down
Loading