Skip to content

[UIK-5586] Update Select and DropdownMenu styles #3065

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

Open
sheila-semrush wants to merge 6 commits into
base: UIK-5351/add-more-variables-to-theme
Choose a base branch
from
Open

[UIK-5586] Update Select and DropdownMenu styles #3065

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9c3b2f7
[base-trigger] updated styles
sheila-semrush Jul 22, 2026
ea87809
[dropdown-menu, select] update menu styles
sheila-semrush Jul 23, 2026
8c04079
[dropdown-menu] increase size for actions in size L
sheila-semrush Jul 23, 2026
2e4dde0
[dropdown, dropdown-menu, select] added Notice for poppers
ilyabrower Jul 23, 2026
6fd5dc3
[chore] Merge branch 'UIK-5351/add-more-variables-to-theme' into UIK-…
sheila-semrush Jul 24, 2026
7a2f25b
[dropdown, dropdown-menu, select] added Notice for poppers
ilyabrower Jul 24, 2026
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 pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

57 changes: 13 additions & 44 deletions semcore/base-trigger/src/style/base-trigger.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ SBaseTrigger {
white-space: nowrap;
user-select: none;
box-sizing: border-box;
padding: 0;
margin: 0;
box-shadow: none;
text-decoration: none;
Expand All @@ -19,12 +18,15 @@ SBaseTrigger {
font-family: inherit;
cursor: pointer;

background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-select-trigger-normal */
background: var(--intergalactic-control-select-trigger-normal, oklch(1 0 0));

font-weight: var(--intergalactic-regular, 400);
border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));

border-radius: var(--intergalactic-control-rounded, 6px);
padding: 0 var(--intergalactic-spacing-content-inset-inline, 12px);

&::-moz-focus-inner {
border: none;
padding: 0;
Expand All @@ -40,13 +42,13 @@ SBaseTrigger {
}

&:hover {
background-color: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180)); /* TODO: --intergalactic-control-select-trigger-hover */
background-color: var(--intergalactic-control-select-trigger-hover, oklch(0.98 0.001 180));
}

&:active,
&[active] {
border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-select-trigger-active */
background-color: var(--intergalactic-control-select-trigger-active, oklch(1 0 0));
}
}

Expand All @@ -61,18 +63,17 @@ SInner {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--intergalactic-spacing-content-gap-medium, 6px);
Comment thread
ilyabrower marked this conversation as resolved.
height: 100%;
width: 100%;
}

SText {
display: inline;
/* disable-tokens-validator */
padding: 1px 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: var(--intergalactic-lh-200, 142%);
flex-grow: 1;
text-align: left;
}
Expand All @@ -83,57 +84,25 @@ SAddon {
justify-content: center;
flex-shrink: 0;
pointer-events: none;
}

SBaseAddon {
Comment thread
ilyabrower marked this conversation as resolved.
width: 12px;
height: 12px;
&:only-child {
margin-left: calc(-1 * var(--intergalactic-spacing-1x, 4px));
margin-right: calc(-1 * var(--intergalactic-spacing-1x, 4px));
}
}

SBaseTrigger[size='m'] {
min-width: var(--intergalactic-form-control-m, 32px);
height: var(--intergalactic-form-control-m, 32px);
border-radius: var(--intergalactic-control-rounded, 6px);
Comment thread
ilyabrower marked this conversation as resolved.
padding: 0 var(--intergalactic-spacing-2x, 8px);
font-size: var(--intergalactic-fs-200, 14px);

& SAddon {
&:not(:only-child):first-child {
Comment thread
ilyabrower marked this conversation as resolved.
margin-right: var(--intergalactic-spacing-2x, 8px);
}

&:not(:only-child):last-child {
margin-left: var(--intergalactic-spacing-2x, 8px);
}

&:only-child {
Comment thread
ilyabrower marked this conversation as resolved.
margin-left: calc(-1 * var(--intergalactic-spacing-1x, 4px));
margin-right: calc(-1 * var(--intergalactic-spacing-1x, 4px));
}
}
line-height: var(--intergalactic-lh-200, 142%);
}

SBaseTrigger[size='l'] {
min-width: var(--intergalactic-form-control-l, 44px);
height: var(--intergalactic-form-control-l, 44px);
border-radius: var(--intergalactic-control-rounded, 6px);
padding: 0 var(--intergalactic-spacing-3x, 12px);
font-size: var(--intergalactic-fs-300, 16px);

& SAddon {
&:not(:only-child):first-child {
margin-right: var(--intergalactic-spacing-2x, 8px);
}

&:not(:only-child):last-child {
margin-left: var(--intergalactic-spacing-2x, 8px);
}

&:only-child {
margin-left: calc(-1 * var(--intergalactic-spacing-1x, 4px));
margin-right: calc(-1 * var(--intergalactic-spacing-1x, 4px));
}
}
line-height: var(--intergalactic-lh-300, 150%);
}

SBaseTrigger[neighborLocation='right'] {
Expand Down
9 changes: 6 additions & 3 deletions semcore/base-trigger/src/style/button-trigger.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
SButtonAddon {
width: 12px;
height: 12px;
width: var(--intergalactic-spacing-3x, 12px);
height: var(--intergalactic-spacing-3x, 12px);
color: var(--intergalactic-icon-non-interactive, oklch(0.094 0.024 153.9 / 0.503));
position: relative;
left: var(--intergalactic-spacing-05x, 2px);
Comment thread
ilyabrower marked this conversation as resolved.
}

SButtonTriggerSpin {
fill: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526));
fill: var(--intergalactic-icon-non-interactive, oklch(0.094 0.024 153.9 / 0.503));
}
1 change: 1 addition & 0 deletions semcore/dropdown-menu/src/DropdownMenu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -570,6 +570,7 @@ const DropdownMenu = createComponent(
Item: [Item, { Addon, Content: ItemContent, Text: ItemContentText, Hint: ItemHint }],
Group: Dropdown.Group,
StatusItem: Dropdown.StatusItem,
Notice: Dropdown.Notice,
},
{
parent: [Dropdown],
Expand Down
3 changes: 2 additions & 1 deletion semcore/dropdown-menu/src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import type {
DropdownTriggerProps,
DropdownPopperAriaProps,
StatusItemComponent,
DropdownNoticeComponent,
} from '@semcore/dropdown';
import type Dropdown from '@semcore/dropdown';
import type { Text } from '@semcore/typography';
Expand Down Expand Up @@ -154,8 +155,8 @@ declare const DropdownMenu: Intergalactic.Component<
};

Group: typeof Dropdown.Group;

StatusItem: StatusItemComponent;
Notice: DropdownNoticeComponent;

VirtualList: typeof VirtualList;

Expand Down
12 changes: 9 additions & 3 deletions semcore/dropdown-menu/src/style/dropdown-menu.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
SDropdownMenuList {
max-height: 240px;
max-height: 246px;
padding: var(--intergalactic-spacing-1x, 4px) 0;
position: relative;
min-height: 26px;
Expand Down Expand Up @@ -29,6 +29,10 @@ SDropdownMenuList {
}
}

SDropdownMenuList[size='l'] {
max-height: 306px;
}

SDropdownMenuItemContainer {
SItemContent:focus-visible {
outline: none;
Expand All @@ -42,11 +46,13 @@ SDropdownMenuItemContainer[nesting-trigger] {
SDropdownMenuItemAddon,
SItemContentText {
display: inline-flex; /* todo: Brauer Ilia - why? should be changed to inline/inline-block for SItemContentText */
margin-left: var(--intergalactic-spacing-1x, 4px);
margin-right: var(--intergalactic-spacing-1x, 4px);

margin-left: var(--intergalactic-spacing-content-gap-small, 4px);
margin-right: var(--intergalactic-spacing-content-gap-small, 4px);

&:first-child {
margin-left: 0;
margin-right: var(--intergalactic-spacing-content-gap-medium, 6px);
}

&:last-child {
Expand Down
3 changes: 2 additions & 1 deletion semcore/dropdown/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@
"require": "./lib/cjs/index.js"
},
"dependencies": {
"@semcore/typography": "^17.2.1"
"@semcore/typography": "^17.2.1",
"@semcore/notice": "^17.2.2"
},
"peerDependencies": {
"@semcore/base-components": "^17.2.1"
Expand Down
2 changes: 2 additions & 0 deletions semcore/dropdown/src/Dropdown.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { hasFocusableIn } from '@semcore/core/lib/utils/use/useFocusLock';
import React from 'react';

import { DropdownItem } from './DropdownItem';
import { DropdownNotice } from './Notice';
import { StatusItem } from './StatusItem';
import style from './style/dropdown.shadow.css';
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
Expand Down Expand Up @@ -212,6 +213,7 @@ const Dropdown = createComponent(
Item: DropdownItem,
Group: DropdownGroup,
StatusItem,
Notice: DropdownNotice,
},
{
parent: Popper,
Expand Down
25 changes: 25 additions & 0 deletions semcore/dropdown/src/Notice.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { Component, createComponent, Root, sstyled } from '@semcore/core';
import Notice, { type NSNotice } from '@semcore/notice';
import React from 'react';

import style from './style/dropdownNotice.shadow.css';

class DropdownNoticeRoot extends Component<NSNotice.Props> {
static displayName = 'Notice';
static style = style;

render() {
const { styles } = this.asProps;
const SDropdownNotice = Root;
return sstyled(styles)(<SDropdownNotice render={Notice} />);
}
}

export const DropdownNotice = createComponent<NSNotice.Component, typeof DropdownNoticeRoot>(DropdownNoticeRoot, {
Label: Notice.Label,
Title: Notice.Title,
Text: Notice.Text,
Actions: Notice.Actions,
Content: Notice.Content,
Close: Notice.Close,
}, { parent: Notice });
3 changes: 2 additions & 1 deletion semcore/dropdown/src/StatusItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ class StatusItemRoot extends Component<
render={Text}
tag='div'
key='StatusItem'
p={size === 'l' ? 3 : 2}
px={3}
py={size === 'l' ? 3 : 2}
use:size={size === 'l' ? 300 : 200}
use='secondary'
>
Expand Down
6 changes: 6 additions & 0 deletions semcore/dropdown/src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import type { Box, BoxProps,
PopperPopperProps,
} from '@semcore/base-components';
import type { Intergalactic, PropGetterFn } from '@semcore/core';
import type { NSNotice } from '@semcore/notice';
import type Notice from '@semcore/notice';
import type React from 'react';

export type DropdownProps = PopperProps & {
Expand Down Expand Up @@ -71,6 +73,9 @@ export type DropdownStatusItemProps = {

export type StatusItemComponent = Intergalactic.Component<'div', DropdownStatusItemProps>;

export type DropdownNoticeProps = NSNotice.Props;
export type DropdownNoticeComponent = Intergalactic.Component<typeof Notice, DropdownNoticeProps>;

declare const Dropdown: Intergalactic.Component<
'div',
DropdownProps,
Expand All @@ -87,6 +92,7 @@ declare const Dropdown: Intergalactic.Component<
Item: Intergalactic.Component<typeof Box>;
Group: Intergalactic.Component<'div', DropdownGroupProps>;
StatusItem: StatusItemComponent;
Notice: DropdownNoticeComponent;
};

export default Dropdown;
Loading
Loading