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

salute-developers · Sep 27, 2023 · 5e83e5c · 5e83e5c
1 parent 9b93b87
commit 5e83e5c
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/packages/plasma-ui/src/components/Pickers/TimePicker.tsx b/packages/plasma-ui/src/components/Pickers/TimePicker.tsx
@@ -6,14 +6,21 @@ 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;
     width: max-content;
     align-items: stretch;
 `;
 
+const labelFontSize: Record<PickerSize, string> = {
+    l: '0.875rem',
+    s: '0.75rem',
+    xs: '0.625rem',
+};
+
 const StyledSimpleTimePicker = styled(SimpleTimePicker)`
     &[data-label] {
         margin-top: 2rem;
@@ -25,9 +32,10 @@ const StyledSimpleTimePicker = styled(SimpleTimePicker)`
         left: 0;
         margin-top: ${({ controls }) => (controls ? '-2.5rem' : '-1.5rem')};
         width: 100%;
-        ${footnote1};
         color: ${whiteTertiary};
-        word-break: break-word;
+        ${footnote1};
+        font-weight: normal;
+        font-size: ${({ size = DEFAULT_PICKER_SIZE }) => labelFontSize[size]};
     }
 `;