diff --git a/cypress/snapshots/ui/components/Pickers/TimePicker.component-test.tsx/plasma-ui TimePicker -- label with controls.snap.png b/cypress/snapshots/ui/components/Pickers/TimePicker.component-test.tsx/plasma-ui TimePicker -- label with controls.snap.png new file mode 100644 index 0000000000..632aa40666 Binary files /dev/null and b/cypress/snapshots/ui/components/Pickers/TimePicker.component-test.tsx/plasma-ui TimePicker -- label with controls.snap.png differ diff --git a/cypress/snapshots/ui/components/Pickers/TimePicker.component-test.tsx/plasma-ui TimePicker -- label.snap.png b/cypress/snapshots/ui/components/Pickers/TimePicker.component-test.tsx/plasma-ui TimePicker -- label.snap.png new file mode 100644 index 0000000000..3f2748a167 Binary files /dev/null and b/cypress/snapshots/ui/components/Pickers/TimePicker.component-test.tsx/plasma-ui TimePicker -- label.snap.png differ diff --git a/packages/plasma-ui/src/components/Pickers/Pickers.stories.tsx b/packages/plasma-ui/src/components/Pickers/Pickers.stories.tsx index 71b5d3af7c..64a0ce051d 100644 --- a/packages/plasma-ui/src/components/Pickers/Pickers.stories.tsx +++ b/packages/plasma-ui/src/components/Pickers/Pickers.stories.tsx @@ -355,6 +355,9 @@ Time_Picker.args = { visibleItems: 3, step: 1, infiniteScroll: true, + hoursLabel: 'часов', + minutesLabel: 'минут', + secondsLabel: 'секунд', }; // eslint-disable-next-line @typescript-eslint/naming-convention diff --git a/packages/plasma-ui/src/components/Pickers/TimePicker.component-test.tsx b/packages/plasma-ui/src/components/Pickers/TimePicker.component-test.tsx index 2076bf615e..3d8ed572a0 100644 --- a/packages/plasma-ui/src/components/Pickers/TimePicker.component-test.tsx +++ b/packages/plasma-ui/src/components/Pickers/TimePicker.component-test.tsx @@ -123,6 +123,53 @@ describe('plasma-ui: TimePicker', () => { } }); }); + + it('label', () => { + mount( + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('label with controls', () => { + mount( + + + , + ); + + // отключение анимаций на всех div'ах внутри окружения, TODO: перенести в plasma-cy-utils? + cy.get('div').invoke('attr', 'style', 'transition: unset; animation: none; scroll-snap-type: none;'); + + cy.get('div > div:nth-child(1)').contains('03').click({ force: true }); + cy.wait(150); + cy.get('div > div:nth-child(3)').contains('04').click({ force: true }); + cy.wait(150); + cy.get('div > div:nth-child(5)').contains('06').click({ force: true }); + + cy.wait(1000); + + cy.matchImageSnapshot(); + }); }); describe('plasma-ui: TimePicker update value', () => { diff --git a/packages/plasma-ui/src/components/Pickers/TimePicker.tsx b/packages/plasma-ui/src/components/Pickers/TimePicker.tsx index dd7c7f74ba..c2eae17cc0 100644 --- a/packages/plasma-ui/src/components/Pickers/TimePicker.tsx +++ b/packages/plasma-ui/src/components/Pickers/TimePicker.tsx @@ -1,11 +1,13 @@ import React from 'react'; import styled from 'styled-components'; import { useIsomorphicLayoutEffect } from '@salutejs/plasma-core'; +import { whiteTertiary, footnote1 } from '@salutejs/plasma-tokens'; import { PickerDots } from './PickerDots'; import { SimpleTimePicker, SimpleTimePickerProps } from './SimpleTimePicker'; import { getNewDate, getNormalizeValues, getRange, getTimeValues, getValuesInRange, isChanged } from './utils'; -import type { PickerItem, TimeType } from './types'; +import type { PickerItem, TimeType, PickerSize } from './types'; +import { DEFAULT_PICKER_SIZE } from './types'; const StyledWrapper = styled.div` display: flex; @@ -13,6 +15,37 @@ const StyledWrapper = styled.div` align-items: stretch; `; +const labelFontSize: Record = { + l: '0.875rem', + s: '0.75rem', + xs: '0.625rem', +}; + +const StyledSimpleTimePicker = styled(SimpleTimePicker)` + &[data-label] { + margin-top: 2rem; + } + + &[data-label]::before { + content: attr(data-label); + position: absolute; + left: 0; + margin-top: ${({ controls }) => (controls ? '-2.5rem' : '-1.5rem')}; + width: 100%; + color: ${whiteTertiary}; + ${footnote1}; + font-weight: normal; + font-size: ${({ size = DEFAULT_PICKER_SIZE }) => labelFontSize[size]}; + } + + &[data-label] + ${PickerDots} { + &::before, + &::after { + top: calc(50% + 1rem); + } + } +`; + const defaultOptions = { hours: true, minutes: true, @@ -66,6 +99,21 @@ export interface TimePickerProps extends Omit { const normalizeValues = React.useMemo(() => getNormalizeValues(getTimeValues, getSeconds)(value, min, max), [ @@ -217,7 +268,7 @@ export const TimePicker = ({ return ( {options.hours && ( - )} {options.hours && options.minutes && } {options.minutes && ( - )} {options.minutes && options.seconds && } {options.seconds && ( - )} {enableNativeControl && }