feat: add RelativeRangeDatePicker component

Author: ValeraS

package-lock.json

@@ -60,7 +60,7 @@
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^6.0.0",
+    "@gravity-ui/uikit": "^6.1.1",
     "@storybook/addon-a11y": "^7.6.15",
     "@storybook/addon-essentials": "^7.6.15",
     "@storybook/addon-viewport": "^7.6.15",

package.json

@@ -39,8 +39,7 @@ export const Default = {
                 : undefined,
         };
         return (
-            // eslint-disable-next-line jsx-a11y/label-has-associated-control
-            <label>
+            <label htmlFor={props.id}>
                 <span style={{marginInlineEnd: 4}}>Event date</span>
                 <DatePicker {...props} />
             </label>
@@ -49,7 +48,7 @@ export const Default = {
     args: {
         onUpdate: (res) => {
             toaster.add({
-                name: 'calendar-on-change-cb',
+                name: 'date-picker-on-change-cb',
                 title: 'onUpdate callback',
                 theme: 'success',
                 content: (

src/components/DatePicker/__stories__/DatePicker.stories.tsx

@@ -9,6 +9,12 @@ $block: '.#{variables.$ns}relative-date-picker';
 
     outline: none;
 
+    &__input {
+        &_mobile {
+            pointer-events: none;
+        }
+    }
+
     &__field {
         width: 100%;
     }

src/components/RelativeDatePicker/RelativeDatePicker.scss

@@ -0,0 +1,83 @@
+@use '../variables';
+
+$block: '.#{variables.$ns}relative-range-date-picker';
+
+#{$block} {
+    position: relative;
+
+    display: inline-flex;
+
+    &__input {
+        &_mobile {
+            pointer-events: none;
+        }
+    }
+
+    &__mobile-trigger {
+        --_--g-date-mobile-trigger-clear-width: 0px;
+        --_--g-date-mobile-trigger-errors-width: 0px;
+        --_--g-date-mobile-trigger-button-width: 24px;
+
+        position: absolute;
+        inset: 0;
+        inset-inline-end: calc(
+            var(--g-spacing-2) + var(--_--g-date-mobile-trigger-button-width) +
+                var(--_--g-date-mobile-trigger-clear-width) +
+                var(--_--g-date-mobile-trigger-errors-width)
+        );
+
+        opacity: 0;
+
+        &_size_s {
+            --_--g-date-mobile-trigger-button-width: 20px;
+        }
+        &_size_l {
+            --_--g-date-mobile-trigger-button-width: 28px;
+        }
+        &_size_xl {
+            --_--g-date-mobile-trigger-button-width: 36px;
+        }
+
+        &_has-clear {
+            --_--g-date-mobile-trigger-clear-width: calc(
+                var(--_--g-date-mobile-trigger-button-width) + 2px
+            );
+        }
+        &_has-errors {
+            --_--g-date-mobile-trigger-errors-width: calc(
+                var(--_--g-date-mobile-trigger-button-width) + 2px
+            );
+        }
+    }
+
+    &__value-label {
+        display: flex;
+
+        width: 100%;
+
+        & > div {
+            flex: 1 0 0;
+        }
+
+        &-content {
+            display: flex;
+            flex-direction: column;
+        }
+
+        &-tooltip {
+            --g-popover-max-width: 'none';
+        }
+
+        &-item,
+        &-to,
+        &-tz {
+            text-align: center;
+        }
+
+        &-tz {
+            margin-block-start: 5px;
+
+            color: var(--g-color-text-hint);
+        }
+    }
+}