feat(plasma-ui): add labels for time pickers [WIP]

salute-developers · Sep 22, 2023 · 1f178f4 · 1f178f4
1 parent 923b8ad
commit 1f178f4
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 3 deletions.
diff --git 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.tsx b/packages/plasma-ui/src/components/Pickers/TimePicker.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useIsomorphicLayoutEffect } from '@salutejs/plasma-core';
+import { whiteTertiary, footnote2 } from '@salutejs/plasma-tokens';
 
 import { PickerDots } from './PickerDots';
 import { SimpleTimePicker, SimpleTimePickerProps } from './SimpleTimePicker';
@@ -13,6 +14,24 @@ const StyledWrapper = styled.div`
     align-items: stretch;
 `;
 
+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%;
+        ${footnote2};
+        font-weight: normal;
+        color: ${whiteTertiary};
+        word-break: break-word;
+    }
+`;
+
 const defaultOptions = {
     hours: true,
     minutes: true,
@@ -66,6 +85,21 @@ export interface TimePickerProps extends Omit<SimpleTimePickerProps, 'type' | 'r
      * Сменить WAI-ARIA Label списка годов.
      */
     hoursAriaLabel?: string;
+
+    /**
+     * Label для picker "часов"
+     */
+    hoursLabel?: string;
+
+    /**
+     * Label для picker "минуты"
+     */
+    minutesLabel?: string;
+
+    /**
+     * Label для picker "секунды"
+     */
+    secondsLabel?: string;
 }
 
 /**
@@ -92,6 +126,9 @@ export const TimePicker = ({
     hoursAriaLabel,
     infiniteScroll,
     disableScrollSnapAlign = false,
+    hoursLabel,
+    minutesLabel,
+    secondsLabel,
     ...rest
 }: TimePickerProps) => {
     const normalizeValues = React.useMemo(() => getNormalizeValues(getTimeValues, getSeconds)(value, min, max), [
@@ -217,7 +254,7 @@ export const TimePicker = ({
     return (
         <StyledWrapper id={id} {...rest}>
             {options.hours && (
-                <SimpleTimePicker
+                <StyledSimpleTimePicker
                     id={id}
                     type="hours"
                     autofocus={autofocus}
@@ -232,11 +269,12 @@ export const TimePicker = ({
                     onChange={onHoursChange}
                     aria-label={hoursAriaLabel}
                     disableScrollSnapAlign={disableScrollSnapAlign}
+                    data-label={hoursLabel || null}
                 />
             )}
             {options.hours && options.minutes && <PickerDots $size={size} />}
             {options.minutes && (
-                <SimpleTimePicker
+                <StyledSimpleTimePicker
                     id={id}
                     type="minutes"
                     autofocus={autofocus && !options.hours}
@@ -251,11 +289,12 @@ export const TimePicker = ({
                     onChange={onMinutesChange}
                     aria-label={minutesAriaLabel}
                     disableScrollSnapAlign={disableScrollSnapAlign}
+                    data-label={minutesLabel || null}
                 />
             )}
             {options.minutes && options.seconds && <PickerDots $size={size} />}
             {options.seconds && (
-                <SimpleTimePicker
+                <StyledSimpleTimePicker
                     id={id}
                     type="seconds"
                     autofocus={autofocus && !options.hours && !options.minutes}
@@ -270,6 +309,7 @@ export const TimePicker = ({
                     onChange={onSecondsChange}
                     aria-label={secondsAriaLabel}
                     disableScrollSnapAlign={disableScrollSnapAlign}
+                    data-label={secondsLabel || null}
                 />
             )}
             {enableNativeControl && <input type="hidden" value={value.toISOString()} name={name} />}