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 && }