diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fdda9ec380..eb3fce91ba 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -914,6 +914,9 @@ importers: semcore/dropdown: dependencies: + '@semcore/notice': + specifier: ^17.2.2 + version: link:../notice '@semcore/typography': specifier: ^17.2.1 version: link:../typography @@ -19556,7 +19559,7 @@ snapshots: sirv: 3.0.2 tinyglobby: 0.2.17 tinyrainbow: 2.0.0 - vitest: 3.2.4(@types/debug@4.1.13)(@types/node@25.5.2)(@vitest/browser@3.2.4)(@vitest/ui@3.2.4)(happy-dom@9.20.3)(jsdom@22.1.0)(lightningcss@1.31.1)(sass@1.100.0)(sugarss@5.0.1(postcss@8.5.15))(terser@5.48.0)(yaml@2.8.3) + vitest: 3.2.4(@types/debug@4.1.13)(@types/node@25.5.2)(@vitest/browser@3.2.4)(@vitest/ui@3.2.4)(happy-dom@9.20.3)(jsdom@22.1.0)(lightningcss@1.31.1)(sass@1.100.0)(sugarss@5.0.1(postcss@8.5.14))(terser@5.48.0)(yaml@2.8.3) '@vitest/utils@3.2.4': dependencies: diff --git a/semcore/base-trigger/src/style/base-trigger.shadow.css b/semcore/base-trigger/src/style/base-trigger.shadow.css index 2046743fc6..f23c8ddc87 100644 --- a/semcore/base-trigger/src/style/base-trigger.shadow.css +++ b/semcore/base-trigger/src/style/base-trigger.shadow.css @@ -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; @@ -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; @@ -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)); } } @@ -61,6 +63,7 @@ SInner { display: inline-flex; align-items: center; justify-content: center; + gap: var(--intergalactic-spacing-content-gap-medium, 6px); height: 100%; width: 100%; } @@ -68,11 +71,9 @@ SInner { 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; } @@ -83,57 +84,25 @@ SAddon { justify-content: center; flex-shrink: 0; pointer-events: none; -} -SBaseAddon { - 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); - padding: 0 var(--intergalactic-spacing-2x, 8px); font-size: var(--intergalactic-fs-200, 14px); - - & 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-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'] { diff --git a/semcore/base-trigger/src/style/button-trigger.shadow.css b/semcore/base-trigger/src/style/button-trigger.shadow.css index 29b3fb18e8..f31559c95a 100644 --- a/semcore/base-trigger/src/style/button-trigger.shadow.css +++ b/semcore/base-trigger/src/style/button-trigger.shadow.css @@ -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); } 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)); } diff --git a/semcore/dropdown-menu/src/DropdownMenu.jsx b/semcore/dropdown-menu/src/DropdownMenu.jsx index 8c3b7498fe..7ea55290a5 100644 --- a/semcore/dropdown-menu/src/DropdownMenu.jsx +++ b/semcore/dropdown-menu/src/DropdownMenu.jsx @@ -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], diff --git a/semcore/dropdown-menu/src/index.d.ts b/semcore/dropdown-menu/src/index.d.ts index 85260d57c9..4e489884f7 100644 --- a/semcore/dropdown-menu/src/index.d.ts +++ b/semcore/dropdown-menu/src/index.d.ts @@ -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'; @@ -154,8 +155,8 @@ declare const DropdownMenu: Intergalactic.Component< }; Group: typeof Dropdown.Group; - StatusItem: StatusItemComponent; + Notice: DropdownNoticeComponent; VirtualList: typeof VirtualList; diff --git a/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css b/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css index 6f3453c496..1b13ef106e 100644 --- a/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css +++ b/semcore/dropdown-menu/src/style/dropdown-menu.shadow.css @@ -1,5 +1,5 @@ SDropdownMenuList { - max-height: 240px; + max-height: 246px; padding: var(--intergalactic-spacing-1x, 4px) 0; position: relative; min-height: 26px; @@ -29,6 +29,10 @@ SDropdownMenuList { } } +SDropdownMenuList[size='l'] { + max-height: 306px; +} + SDropdownMenuItemContainer { SItemContent:focus-visible { outline: none; @@ -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 { diff --git a/semcore/dropdown/package.json b/semcore/dropdown/package.json index 25446d3b97..6d1302a961 100644 --- a/semcore/dropdown/package.json +++ b/semcore/dropdown/package.json @@ -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" diff --git a/semcore/dropdown/src/Dropdown.jsx b/semcore/dropdown/src/Dropdown.jsx index 942cbe801c..5a5aed417b 100644 --- a/semcore/dropdown/src/Dropdown.jsx +++ b/semcore/dropdown/src/Dropdown.jsx @@ -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'; @@ -212,6 +213,7 @@ const Dropdown = createComponent( Item: DropdownItem, Group: DropdownGroup, StatusItem, + Notice: DropdownNotice, }, { parent: Popper, diff --git a/semcore/dropdown/src/Notice.tsx b/semcore/dropdown/src/Notice.tsx new file mode 100644 index 0000000000..b057cf9a5d --- /dev/null +++ b/semcore/dropdown/src/Notice.tsx @@ -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 { + static displayName = 'Notice'; + static style = style; + + render() { + const { styles } = this.asProps; + const SDropdownNotice = Root; + return sstyled(styles)(); + } +} + +export const DropdownNotice = createComponent(DropdownNoticeRoot, { + Label: Notice.Label, + Title: Notice.Title, + Text: Notice.Text, + Actions: Notice.Actions, + Content: Notice.Content, + Close: Notice.Close, +}, { parent: Notice }); diff --git a/semcore/dropdown/src/StatusItem.tsx b/semcore/dropdown/src/StatusItem.tsx index e207d31def..6836081fa4 100644 --- a/semcore/dropdown/src/StatusItem.tsx +++ b/semcore/dropdown/src/StatusItem.tsx @@ -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' > diff --git a/semcore/dropdown/src/index.d.ts b/semcore/dropdown/src/index.d.ts index 244a66abad..35ceb02b60 100644 --- a/semcore/dropdown/src/index.d.ts +++ b/semcore/dropdown/src/index.d.ts @@ -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 & { @@ -71,6 +73,9 @@ export type DropdownStatusItemProps = { export type StatusItemComponent = Intergalactic.Component<'div', DropdownStatusItemProps>; +export type DropdownNoticeProps = NSNotice.Props; +export type DropdownNoticeComponent = Intergalactic.Component; + declare const Dropdown: Intergalactic.Component< 'div', DropdownProps, @@ -87,6 +92,7 @@ declare const Dropdown: Intergalactic.Component< Item: Intergalactic.Component; Group: Intergalactic.Component<'div', DropdownGroupProps>; StatusItem: StatusItemComponent; + Notice: DropdownNoticeComponent; }; export default Dropdown; diff --git a/semcore/dropdown/src/style/dropdown.shadow.css b/semcore/dropdown/src/style/dropdown.shadow.css index eef34c1d96..05bc6eeaf8 100644 --- a/semcore/dropdown/src/style/dropdown.shadow.css +++ b/semcore/dropdown/src/style/dropdown.shadow.css @@ -14,13 +14,13 @@ SDropdownPopper { text-decoration: none; box-sizing: border-box; cursor: pointer; - width: 100%; text-align: left; line-height: normal; outline: none; } - + SDropdownItem:not(button) { + width: 100%; color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); &:hover { @@ -28,6 +28,11 @@ SDropdownPopper { } } + SDropdownItem[size='l'] SDropdownItem:is(button) { + width: var(--intergalactic-spacing-6x, 24px); + height: var(--intergalactic-spacing-6x, 24px); + } + SDropdownItem[isMenuItemCheckbox] { &::before, @@ -36,7 +41,7 @@ SDropdownPopper { position: absolute; border: 1px solid; border-radius: var(--intergalactic-addon-rounded, 4px); - box-sizing: content-box; + box-sizing: border-box; } &::before { @@ -51,13 +56,20 @@ SDropdownPopper { background-position: center center; background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); - background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg=='); + } + + &[selected][size='m']::after { + background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMiAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMzEwNyAyLjE2NzkxTDQuNjQ2NDUgNy44MzIxMkwxLjY4OTM0IDQuODc1MDEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZT0id2hpdGUiLz48L3N2Zz4='); + } + + &[selected][size='l']::after { + background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIuNCAyLjQ1MjIxTDUuMzA0NCA5LjU0NzgyTDEuNjAwMDEgNS44NDM0MyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg=='); } } SDropdownItem[selected]:not(SDropdownItem[isMenuItemCheckbox]) { background-color: var(--intergalactic-dropdown-menu-item-selected, oklch(0.525 0.265 263 / 0.077)); - box-shadow: 2px 0px 0px 0px var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)) inset; /* TODO: --intergalactic-dropdown-menu-item-selected-border */ + box-shadow: 2px 0px 0px 0px var(--intergalactic-dropdown-menu-item-selected-box-shadow, oklch(0.23 0.01 140)) inset; &:hover { background-color: var(--intergalactic-dropdown-menu-item-selected-hover, oklch(0.52 0.268 263.2 / 0.191)); @@ -87,18 +99,19 @@ SDropdownPopper { SDropdownItem[size='l'] { font-size: var(--intergalactic-fs-300, 16px); line-height: var(--intergalactic-lh-300, 150%); - padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px); - min-height: 40px; + padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-content-inset-inline, 12px); + min-height: var(--intergalactic-spacing-10x, 40px); &[isMenuItemCheckbox] { - padding-left: calc(var(--intergalactic-spacing-3x, 12px) * 2 + 16px + 2px); /* padding*2 (parent item and from checkbox to content) + checkboxWidth + border*2 */ + padding-left: calc(var(--intergalactic-spacing-content-inset-inline, 12px) + var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-content-gap-large, 8px)); + /* padding before + checkbox + padding after */ &::before, &::after { - width: 20px; - height: 20px; - top: calc(var(--intergalactic-spacing-2x, 8px) - 1px); - left: var(--intergalactic-spacing-3x, 12px); + width: var(--intergalactic-spacing-5x, 20px); + height: var(--intergalactic-spacing-5x, 20px); + top: calc(var(--intergalactic-spacing-2x, 8px) + var(--intergalactic-spacing-05x, 2px)); + left: var(--intergalactic-spacing-content-inset-inline, 12px); } } } @@ -106,18 +119,19 @@ SDropdownPopper { SDropdownItem[size='m'] { font-size: var(--intergalactic-fs-200, 14px); line-height: var(--intergalactic-lh-200, 142%); - padding: calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) var(--intergalactic-spacing-2x, 8px); - min-height: 32px; + padding: calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) var(--intergalactic-spacing-content-inset-inline, 12px); + min-height: var(--intergalactic-form-control-m, 32px); &[isMenuItemCheckbox] { - padding-left: calc(var(--intergalactic-spacing-2x, 8px) * 2 + 16px + 2px); /* padding*2 (parent item and from checkbox to content) + checkboxWidth + border*2 */ + padding-left: calc(var(--intergalactic-spacing-content-inset-inline, 12px) + var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-content-gap-medium, 6px)); + /* padding before + checkbox + padding after */ &::before, &::after { - width: 16px; - height: 16px; - top: calc(var(--intergalactic-spacing-2x, 8px) - 1px); - left: var(--intergalactic-spacing-2x, 8px); + width: var(--intergalactic-spacing-4x, 16px); + height: var(--intergalactic-spacing-4x, 16px); + top: var(--intergalactic-spacing-2x, 8px); + left: var(--intergalactic-spacing-content-inset-inline, 12px); } } } diff --git a/semcore/dropdown/src/style/dropdownNotice.shadow.css b/semcore/dropdown/src/style/dropdownNotice.shadow.css new file mode 100644 index 0000000000..ee1173fdd7 --- /dev/null +++ b/semcore/dropdown/src/style/dropdownNotice.shadow.css @@ -0,0 +1,9 @@ +SDropdownNotice { + padding-top: var(--intergalactic-spacing-content-inset-inline, 12px); + padding-bottom: var(--intergalactic-spacing-content-inset-inline, 12px); + border-left: none; + border-right: none; + border-bottom: none; + border-top-left-radius: 0; + border-top-right-radius: 0; +} diff --git a/semcore/select/src/Select.jsx b/semcore/select/src/Select.jsx index d48b1d4e7b..660b30f9c6 100644 --- a/semcore/select/src/Select.jsx +++ b/semcore/select/src/Select.jsx @@ -510,6 +510,7 @@ const Select = createComponent( Divider, InputSearch: [InputSearchWrapper, InputSearch._______childrenComponents], Input: [InputSearchWrapper, InputSearch._______childrenComponents], + Notice: Dropdown.Notice, }, { parent: DropdownMenu, context: selectContext }, ); diff --git a/semcore/select/src/index.d.ts b/semcore/select/src/index.d.ts index 27e01b7ec6..da089a1152 100644 --- a/semcore/select/src/index.d.ts +++ b/semcore/select/src/index.d.ts @@ -3,7 +3,7 @@ import type { ButtonTrigger, BaseTriggerProps, ButtonTriggerProps, LinkTriggerPr import type { PropGetterFn, Intergalactic } from '@semcore/core'; import type Divider from '@semcore/divider'; import type Dropdown from '@semcore/dropdown'; -import type { StatusItemComponent } from '@semcore/dropdown'; +import type { StatusItemComponent, DropdownNoticeComponent } from '@semcore/dropdown'; import type { DropdownMenuContext, DropdownMenuItemProps, @@ -162,6 +162,7 @@ declare const Select: IntergalacticSelectComponent & { Divider: typeof Divider; InputSearch: typeof InputSearch; Input: typeof InputSearch; + Notice: DropdownNoticeComponent; }; declare const wrapSelect: ( diff --git a/semcore/select/src/style/input-search.shadow.css b/semcore/select/src/style/input-search.shadow.css index 14db18dac4..92de2e78aa 100644 --- a/semcore/select/src/style/input-search.shadow.css +++ b/semcore/select/src/style/input-search.shadow.css @@ -1,9 +1,11 @@ -SInputSearch[size='m'] { - height: 32px; +SInputSearch[size='l'] { + height: var(--intergalactic-form-control-l, 44px); } SSearchClear { - padding: 0 var(--intergalactic-spacing-2x, 8px); + padding: 0 var(--intergalactic-spacing-05x, 2px); + margin-left: var(--intergalactic-spacing-05x, 2px); + margin-right: var(--intergalactic-spacing-content-gap-medium, 6px); } SSearchClear[hide] { diff --git a/semcore/select/src/style/select.shadow.css b/semcore/select/src/style/select.shadow.css index 04cae287a4..1cc6a3f102 100644 --- a/semcore/select/src/style/select.shadow.css +++ b/semcore/select/src/style/select.shadow.css @@ -1,6 +1,6 @@ SOptionCheckbox { margin-top: var(--intergalactic-spacing-05x, 2px); - margin-right: var(--intergalactic-spacing-2x, 8px); + margin-right: var(--intergalactic-spacing-content-gap-medium, 6px); margin-bottom: auto; position: relative; flex-shrink: 0; @@ -12,14 +12,13 @@ SOptionCheckbox { left: 0; right: 0; bottom: 0; - background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); - border: 1px solid; + background: var(--intergalactic-control-checkbox-bg-normal, oklch(1 0 0)); + border: 1px solid var(--intergalactic-control-checkbox-border, oklch(0.137 0.026 175.7 / 0.161)); border-radius: var(--intergalactic-addon-rounded, 4px); - border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); } - width: 16px; - height: 16px; + width: var(--intergalactic-spacing-4x, 16px); + height: var(--intergalactic-spacing-4x, 16px); } SOptionCheckbox::after { @@ -35,26 +34,27 @@ SOptionCheckbox::after { } SOptionCheckbox[selected]::after { - background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg=='); + background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMiAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMzEwNyAyLjE2NzkxTDQuNjQ2NDUgNy44MzIxMkwxLjY4OTM0IDQuODc1MDEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZT0id2hpdGUiLz48L3N2Zz4='); } SOptionCheckbox[size='l'] { - width: 20px; - height: 20px; + width: var(--intergalactic-spacing-5x, 20px); + height: var(--intergalactic-spacing-5x, 20px); + margin-right: var(--intergalactic-spacing-content-gap-large, 8px); } SOptionCheckbox[size='l'][selected]::after { - background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg=='); + background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIuNCAyLjQ1MjIxTDUuMzA0NCA5LjU0NzgyTDEuNjAwMDEgNS44NDM0MyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg=='); } SOptionCheckbox[selected]:before { - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */ - border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */ + background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140)); + border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140)); } SOptionCheckbox[indeterminate]:before { - background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */ - border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */ + background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140)); + border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140)); } SOptionCheckbox[theme]:before { @@ -76,7 +76,7 @@ SOptionCheckbox[selected] { } SOptionCheckbox[indeterminate]:after { - background-color: #ffffff; /* TODO: --gray-white */ + background-color: var(--intergalactic-control-checkbox-checkmark, oklch(1 0 0)); background-image: none; margin: auto; /* disable-tokens-validator */ @@ -84,11 +84,13 @@ SOptionCheckbox[indeterminate]:after { } SOptionCheckbox[indeterminate][size='l']:after { - width: 12px; - height: 2px; + width: var(--intergalactic-spacing-3x, 12px); + /* disable-tokens-validator */ + height: 1.5px; /* TODO: --intergalactic-icon-stroke-width (?) */ } SOptionCheckbox[indeterminate][size='m']:after { - width: 8px; - height: 2px; + width: var(--intergalactic-spacing-2x, 8px); + /* disable-tokens-validator */ + height: 1.5px; /* TODO: --intergalactic-icon-stroke-width (?) */ } diff --git a/stories/components/dropdown-menu/advanced/examples/modal-in-dd-notice.tsx b/stories/components/dropdown-menu/advanced/examples/modal-in-dd-notice.tsx index f7783bc87f..2294c8796f 100644 --- a/stories/components/dropdown-menu/advanced/examples/modal-in-dd-notice.tsx +++ b/stories/components/dropdown-menu/advanced/examples/modal-in-dd-notice.tsx @@ -2,7 +2,6 @@ import FileExportM from '@semcore/icon/FileExport/m'; import Button from '@semcore/ui/button'; import DropdownMenu from '@semcore/ui/dropdown-menu'; import Modal from '@semcore/ui/modal'; -import Notice from '@semcore/ui/notice'; import SpinContainer from '@semcore/ui/spin-container'; import { Text } from '@semcore/ui/typography'; import React from 'react'; @@ -41,13 +40,13 @@ const Demo = () => { CSV CSV Semicolon - - + + - - + + diff --git a/stories/components/dropdown-menu/docs/examples/dropdown-menu.tsx b/stories/components/dropdown-menu/docs/examples/dropdown-menu.tsx index 4fb272c579..925d34ac6f 100644 --- a/stories/components/dropdown-menu/docs/examples/dropdown-menu.tsx +++ b/stories/components/dropdown-menu/docs/examples/dropdown-menu.tsx @@ -37,18 +37,11 @@ const Demo = () => { CSV CSV Semicolon - - + Export failed @@ -59,8 +52,8 @@ const Demo = () => { feedback@semrush.com - - + + diff --git a/stories/components/dropdown-menu/docs/examples/item_actions.tsx b/stories/components/dropdown-menu/docs/examples/item_actions.tsx index 100ae946be..0e741c018a 100644 --- a/stories/components/dropdown-menu/docs/examples/item_actions.tsx +++ b/stories/components/dropdown-menu/docs/examples/item_actions.tsx @@ -20,7 +20,7 @@ const Demo = () => { Menu item 3 - + @@ -32,7 +32,7 @@ const Demo = () => { placement='right-start' interaction={DropdownMenu.nestedMenuInteraction} timeout={[0, 300]} - offset={[-11, 12]} + offset={[-11, 17]} > Menu item 4 diff --git a/stories/components/dropdown-menu/docs/examples/nested.tsx b/stories/components/dropdown-menu/docs/examples/nested.tsx index ee2aad100d..fd4fd34f32 100644 --- a/stories/components/dropdown-menu/docs/examples/nested.tsx +++ b/stories/components/dropdown-menu/docs/examples/nested.tsx @@ -1,9 +1,12 @@ import ChevronRightIcon from '@semcore/icon/ChevronRight/m'; import Button from '@semcore/ui/button'; -import DropdownMenu from '@semcore/ui/dropdown-menu'; +import DropdownMenu, { type DropdownMenuProps } from '@semcore/ui/dropdown-menu'; import React from 'react'; const Demo = () => { + const nestedOffset: DropdownMenuProps['offset'] = [-11, 17]; + const nestedTimeout: DropdownMenuProps['timeout'] = [0, 300]; + return ( Explore nested menus @@ -15,8 +18,8 @@ const Demo = () => { Item 4 @@ -27,8 +30,8 @@ const Demo = () => { Item 4.1 @@ -48,8 +51,8 @@ const Demo = () => { Item 4.2 @@ -63,8 +66,8 @@ const Demo = () => { Item 4.2.1 diff --git a/stories/components/dropdown-menu/docs/examples/nested_with_focusable.tsx b/stories/components/dropdown-menu/docs/examples/nested_with_focusable.tsx index e7e9399eba..99304aa703 100644 --- a/stories/components/dropdown-menu/docs/examples/nested_with_focusable.tsx +++ b/stories/components/dropdown-menu/docs/examples/nested_with_focusable.tsx @@ -22,7 +22,7 @@ const Demo = () => { placement='right-start' interaction={DropdownMenu.nestedMenuInteraction} timeout={[0, 300]} - offset={[-11, 12]} + offset={[-11, 17]} > {item} @@ -35,7 +35,7 @@ const Demo = () => { Item 4.1.3 - + diff --git a/stories/components/select/docs/examples/dropdownmenu_customization.tsx b/stories/components/select/docs/examples/dropdownmenu_customization.tsx index 46780811bf..e3f968007e 100644 --- a/stories/components/select/docs/examples/dropdownmenu_customization.tsx +++ b/stories/components/select/docs/examples/dropdownmenu_customization.tsx @@ -8,12 +8,6 @@ const options = Array(12) .fill('') .map((_, index) => `Option ${index}`); -const noticeStyle = { - border: 'none', - borderRadius: `0 0 var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px)`, - padding: 'var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)', -}; - const Demo = () => ( @@ -22,16 +16,16 @@ const Demo = () => ( diff --git a/stories/components/select/docs/examples/options_filtering.tsx b/stories/components/select/docs/examples/options_filtering.tsx index 8535d4f571..80992b3229 100644 --- a/stories/components/select/docs/examples/options_filtering.tsx +++ b/stories/components/select/docs/examples/options_filtering.tsx @@ -26,7 +26,7 @@ const Demo = () => { onChange={setFilter} /> {options.length > 0 && ( - + {options.map(({ value, label }) => ( {label} diff --git a/stories/components/select/docs/examples/trigger_customization_deep.tsx b/stories/components/select/docs/examples/trigger_customization_deep.tsx index e818922a92..90ab78a9db 100644 --- a/stories/components/select/docs/examples/trigger_customization_deep.tsx +++ b/stories/components/select/docs/examples/trigger_customization_deep.tsx @@ -26,8 +26,12 @@ const Demo = () => { {flags.map((value) => ( - - {formatName(iso2Name[value])} + + + + + {formatName(iso2Name[value])} + ))} diff --git a/stories/components/select/tests/Select.stories.tsx b/stories/components/select/tests/Select.stories.tsx index 167ea265fe..5c632710ed 100644 --- a/stories/components/select/tests/Select.stories.tsx +++ b/stories/components/select/tests/Select.stories.tsx @@ -101,6 +101,14 @@ export const BasicPropsAndTriggerAddons: StoryObj = { showTriggerText: { control: { type: 'boolean' }, }, + + // option addon props + showOptionLeftAddon: { + control: { type: 'boolean' }, + }, + showOptionRightAddon: { + control: { type: 'boolean' }, + }, }, args: BasicProps, }; diff --git a/stories/components/select/tests/examples/basic_props_and_trigger_addons.tsx b/stories/components/select/tests/examples/basic_props_and_trigger_addons.tsx index 37fed7c4c5..360cf0956d 100644 --- a/stories/components/select/tests/examples/basic_props_and_trigger_addons.tsx +++ b/stories/components/select/tests/examples/basic_props_and_trigger_addons.tsx @@ -32,6 +32,10 @@ export type SelectBasicProps = Omit< showTriggerText?: boolean; triggerText?: string; size?: 'm' | 'l'; + + // option addon props + showOptionLeftAddon?: boolean; + showOptionRightAddon?: boolean; }; const Demo = (props: SelectBasicProps) => { @@ -63,6 +67,10 @@ const Demo = (props: SelectBasicProps) => { triggerText = 'Trigger', showTriggerText = false, + // option addon + showOptionLeftAddon = false, + showOptionRightAddon = false, + ...restProps } = props; @@ -74,7 +82,7 @@ const Demo = (props: SelectBasicProps) => { children: `Option ${index}`, })); - const hasCustomTrigger = showLeftAddon || showRightAddon || showTriggerText; + const hasCustomTriggerOrOption = showLeftAddon || showRightAddon || showTriggerText || showOptionLeftAddon || showOptionRightAddon; const [value, setValue] = React.useState(multiselect ? [] : null); React.useEffect(() => { @@ -93,7 +101,7 @@ const Demo = (props: SelectBasicProps) => { {labelText} )} - {hasCustomTrigger + {hasCustomTriggerOrOption ? (