From 80a41f04060deefda7727a27fb2293dd0f2e58f6 Mon Sep 17 00:00:00 2001 From: iljs Date: Wed, 17 Dec 2025 03:29:50 +0300 Subject: [PATCH] fix(*): outline timepicker fix --- .../src/components/TimePicker/TimePicker.config.ts | 1 + .../src/components/TimePicker/TimePicker.config.ts | 1 + .../TimePickerGrid/ui/TimeColumn/TimeColumn.styles.ts | 10 +++++++++- .../src/components/TimePicker/TimePicker.config.ts | 1 + .../src/components/TimePicker/TimePicker.config.ts | 1 + .../src/components/TimePicker/TimePicker.config.ts | 1 + .../src/components/TimePicker/TimePicker.config.ts | 1 + .../src/components/TimePicker/TimePicker.config.ts | 1 + .../src/components/TimePicker/TimePicker.config.ts | 1 + .../src/components/TimePicker/TimePicker.config.ts | 1 + .../src/components/TimePicker/TimePicker.config.ts | 1 + .../src/components/TimePicker/TimePicker.config.ts | 1 + 12 files changed, 20 insertions(+), 1 deletion(-) diff --git a/packages/plasma-b2c/src/components/TimePicker/TimePicker.config.ts b/packages/plasma-b2c/src/components/TimePicker/TimePicker.config.ts index ee4d486ecd..539240a8c0 100644 --- a/packages/plasma-b2c/src/components/TimePicker/TimePicker.config.ts +++ b/packages/plasma-b2c/src/components/TimePicker/TimePicker.config.ts @@ -35,6 +35,7 @@ export const config = { ${tokens.timePickerBackground}: var(--surface-solid-card); ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); + ${tokens.itemFocusColor}: var(--surface-accent); ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); diff --git a/packages/plasma-giga/src/components/TimePicker/TimePicker.config.ts b/packages/plasma-giga/src/components/TimePicker/TimePicker.config.ts index ee4d486ecd..539240a8c0 100644 --- a/packages/plasma-giga/src/components/TimePicker/TimePicker.config.ts +++ b/packages/plasma-giga/src/components/TimePicker/TimePicker.config.ts @@ -35,6 +35,7 @@ export const config = { ${tokens.timePickerBackground}: var(--surface-solid-card); ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); + ${tokens.itemFocusColor}: var(--surface-accent); ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); diff --git a/packages/plasma-new-hope/src/components/TimePickerGrid/ui/TimeColumn/TimeColumn.styles.ts b/packages/plasma-new-hope/src/components/TimePickerGrid/ui/TimeColumn/TimeColumn.styles.ts index 081d04c42f..15f58e36e2 100644 --- a/packages/plasma-new-hope/src/components/TimePickerGrid/ui/TimeColumn/TimeColumn.styles.ts +++ b/packages/plasma-new-hope/src/components/TimePickerGrid/ui/TimeColumn/TimeColumn.styles.ts @@ -1,4 +1,5 @@ import { styled } from '@linaria/react'; +import { addFocus } from 'src/mixins'; import { classes, tokens } from '../../TimePickerGrid.tokens'; @@ -18,7 +19,7 @@ export const StyledTimeItem = styled.div` border-radius: var(${tokens.itemBorderRadius}); cursor: pointer; flex-shrink: 0; - overflow: auto; + outline: none; font-family: var(${tokens.itemFontFamily}); font-size: var(${tokens.itemFontSize}); @@ -38,6 +39,13 @@ export const StyledTimeItem = styled.div` cursor: not-allowed; opacity: var(${tokens.disabledOpacity}); } + + ${addFocus({ + outlineOffset: '0.0625rem', + outlineSize: '0.0625rem', + outlineRadius: `var(${tokens.itemBorderRadius})`, + outlineColor: `var(${tokens.itemFocusColor})`, + })} `; export const StyledTimeColumn = styled.div<{ height?: string | number }>` diff --git a/packages/plasma-web/src/components/TimePicker/TimePicker.config.ts b/packages/plasma-web/src/components/TimePicker/TimePicker.config.ts index ee4d486ecd..539240a8c0 100644 --- a/packages/plasma-web/src/components/TimePicker/TimePicker.config.ts +++ b/packages/plasma-web/src/components/TimePicker/TimePicker.config.ts @@ -35,6 +35,7 @@ export const config = { ${tokens.timePickerBackground}: var(--surface-solid-card); ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); + ${tokens.itemFocusColor}: var(--surface-accent); ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); diff --git a/packages/sdds-bizcom/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-bizcom/src/components/TimePicker/TimePicker.config.ts index ee4d486ecd..539240a8c0 100644 --- a/packages/sdds-bizcom/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-bizcom/src/components/TimePicker/TimePicker.config.ts @@ -35,6 +35,7 @@ export const config = { ${tokens.timePickerBackground}: var(--surface-solid-card); ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); + ${tokens.itemFocusColor}: var(--surface-accent); ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); diff --git a/packages/sdds-crm/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-crm/src/components/TimePicker/TimePicker.config.ts index ee4d486ecd..539240a8c0 100644 --- a/packages/sdds-crm/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-crm/src/components/TimePicker/TimePicker.config.ts @@ -35,6 +35,7 @@ export const config = { ${tokens.timePickerBackground}: var(--surface-solid-card); ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); + ${tokens.itemFocusColor}: var(--surface-accent); ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); diff --git a/packages/sdds-dfa/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-dfa/src/components/TimePicker/TimePicker.config.ts index ee4d486ecd..539240a8c0 100644 --- a/packages/sdds-dfa/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-dfa/src/components/TimePicker/TimePicker.config.ts @@ -35,6 +35,7 @@ export const config = { ${tokens.timePickerBackground}: var(--surface-solid-card); ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); + ${tokens.itemFocusColor}: var(--surface-accent); ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); diff --git a/packages/sdds-finai/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-finai/src/components/TimePicker/TimePicker.config.ts index ace176bb96..c16f9b3262 100644 --- a/packages/sdds-finai/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-finai/src/components/TimePicker/TimePicker.config.ts @@ -39,6 +39,7 @@ export const config = { ${tokens.timePickerBackground}: var(--surface-solid-card); ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); + ${tokens.itemFocusColor}: var(--surface-accent); ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); diff --git a/packages/sdds-insol/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-insol/src/components/TimePicker/TimePicker.config.ts index 208da1e23b..3cecd8ce60 100644 --- a/packages/sdds-insol/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-insol/src/components/TimePicker/TimePicker.config.ts @@ -41,6 +41,7 @@ export const config = { ${tokens.timePickerBackground}: var(--surface-solid-card); ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); + ${tokens.itemFocusColor}: var(--surface-accent); ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); diff --git a/packages/sdds-netology/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-netology/src/components/TimePicker/TimePicker.config.ts index ee4d486ecd..539240a8c0 100644 --- a/packages/sdds-netology/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-netology/src/components/TimePicker/TimePicker.config.ts @@ -35,6 +35,7 @@ export const config = { ${tokens.timePickerBackground}: var(--surface-solid-card); ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); + ${tokens.itemFocusColor}: var(--surface-accent); ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); diff --git a/packages/sdds-scan/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-scan/src/components/TimePicker/TimePicker.config.ts index 6968a0b2d3..155289877b 100644 --- a/packages/sdds-scan/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-scan/src/components/TimePicker/TimePicker.config.ts @@ -35,6 +35,7 @@ export const config = { ${tokens.timePickerBackground}: var(--surface-solid-card); ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); + ${tokens.itemFocusColor}: var(--surface-accent); ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); diff --git a/packages/sdds-serv/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-serv/src/components/TimePicker/TimePicker.config.ts index ee4d486ecd..539240a8c0 100644 --- a/packages/sdds-serv/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-serv/src/components/TimePicker/TimePicker.config.ts @@ -35,6 +35,7 @@ export const config = { ${tokens.timePickerBackground}: var(--surface-solid-card); ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); + ${tokens.itemFocusColor}: var(--surface-accent); ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary);