feat(DatePicker): vertical spacing & no outer padding props (#6856)

* <DatePicker /> added noPadding prop

* <DatePicker /> added weeks vertical spacing prop

* <Date Picker /> - add missing applyUnit import

* Update packages/wix-ui-tpa/src/components/DatePicker/DatePicker.st.css

Co-authored-by: sivanharel <[email protected]>

* <Date Picker /> - pr fixes

Co-authored-by: sivanharel <[email protected]>

Author: poseneror

packages/wix-ui-tpa/src/components/DatePicker/DatePicker.st.css

@@ -1,6 +1,6 @@
 :import {
     -st-from: "../../common/formatters.st";
-    -st-named: color, applyOpacity, fallback, font, zeroAsTrue;
+    -st-named: color, applyOpacity, fallback, font, zeroAsTrue, applyUnit;
 }
 
 :import {
@@ -40,6 +40,8 @@
     DefaultSelectedDayBGColor: color-8;
     DefaultSelectedDayBorderRadius: 100%;
     DefaultDisabledDayColor: color-3;
+
+    DefaultWeeksVerticalSpacing: 0;
 }
 
 /*Overrides*/
@@ -107,6 +109,11 @@
         @default color-3
     */
     DisabledDayColor: --overridable;
+    /*
+        The vertical space between weeks.
+        @default 0
+    */
+    WeeksVerticalSpacing: --overridable;
 }
 
 /* Overrides - deceleration of overridable parameters by the consumer */
@@ -128,6 +135,8 @@
     CurrentSelectedDayBGColor: color(fallback(value(SelectedDayBGColor), value(DefaultSelectedDayBGColor)));
     CurrentSelectedDayBorderRadius: fallback(value(SelectedDayBorderRadius),value(DefaultSelectedDayBorderRadius));
     CurrentDisabledDayColor: color(fallback(value(DisabledDayColor), value(DefaultDisabledDayColor)));
+
+    CurrentWeeksVerticalSpacing: applyUnit(fallback(value(WeeksVerticalSpacing),value(DefaultWeeksVerticalSpacing)), px);
 }
 
 /* The component's css without the overrideStyleParams */
@@ -141,6 +150,7 @@
 
 .calendar {
     -st-extends: WSRCalendar;
+    -st-states: removeOuterPadding;
 }
 
 .calendar::month {
@@ -206,6 +216,27 @@
     background-color: value(CurrentBackgroundColor);
 }
 
+.calendar:removeOuterPadding::header {
+    padding: 0;
+}
+
+.calendar:removeOuterPadding::body {
+    padding: 0;
+}
+
+.calendar:removeOuterPadding::weekdays {
+    padding: 0;
+}
+
+.calendar:removeOuterPadding::month {
+    min-width: 240px;
+    min-height: 284px;
+}
+
+.calendar::week:not(:last-child) {
+    margin-bottom: value(CurrentWeeksVerticalSpacing);
+}
+
 .calendar::day {
     font: value(CurrentDayFont);
     color: value(CurrentDayColor);

packages/wix-ui-tpa/src/components/DatePicker/DatePicker.tsx

@@ -69,6 +69,8 @@ export interface DatePickerProps extends TPAComponentProps {
   yearDropdownAriaLabel?: string;
   /** Identifies the element that labels the years dropdown in calendar header */
   yearDropdownAriaLabelledBy?: string;
+  /** If true, renders date picker without outer padding */
+  removeOuterPadding?: boolean;
 }
 
 interface DefaultProps {
@@ -117,6 +119,7 @@ export class DatePicker extends React.Component<DatePickerProps> {
       monthDropdownAriaLabelledBy,
       yearDropdownAriaLabel,
       yearDropdownAriaLabelledBy,
+      removeOuterPadding,
     } = this.props;
 
     return (
@@ -130,7 +133,7 @@ export class DatePicker extends React.Component<DatePickerProps> {
             role="region"
           >
             <WSRCalendar
-              className={classes.calendar}
+              className={st(classes.calendar, { removeOuterPadding })}
               dataHook={DATA_HOOKS.WSR_CALENDAR}
               value={value}
               onChange={onChange}

packages/wix-ui-tpa/src/components/DatePicker/DatePicker.visual.st.css

@@ -14,3 +14,9 @@
        SelectedDayBorderRadius 0,
     );
 }
+
+.weeksVerticalSpacing{
+    -st-mixin: DatePicker(
+       WeeksVerticalSpacing 8,
+    );
+}

packages/wix-ui-tpa/src/components/DatePicker/DatePicker.visual.tsx

@@ -127,5 +127,23 @@ visualize('DatePicker', () => {
         onChange={() => {}}
       />,
     );
+    snap(
+      'No outer padding',
+      <VisualTestDatePicker
+        width="280px"
+        value={new Date('2019/12/15')}
+        onChange={() => {}}
+        removeOuterPadding
+      />,
+    );
+    snap(
+      'Weeks Vertical Spacing',
+      <VisualTestDatePicker
+        className={classes.weeksVerticalSpacing}
+        width="280px"
+        value={new Date('2019/12/15')}
+        onChange={() => {}}
+      />,
+    );
   });
 });

packages/wix-ui-tpa/src/components/DatePicker/docs/DatePickerWiringExample.st.css

@@ -18,6 +18,8 @@
           MonthAndYearCaptionFont '"--customMonthAndYearCaptionFont"',
           WeekdayFont '"--customWeekdayFont"',
           DayFont '"--customDayFont"',
+
+          WeeksVerticalSpacing '"--customWeeksVerticalSpacing"',
   );
 }
 
@@ -39,4 +41,4 @@
 /*            WeekdayFont '"--customWeekdayFont"',*/
 /*            DayFont '"--customDayFont"',*/
 /*    );*/
-/*}*/
+/*}*/

packages/wix-ui-tpa/src/components/DatePicker/docs/index.story.tsx

@@ -61,6 +61,16 @@ export default {
       { label: 'Monday', value: 1 },
       { label: 'Sunday', value: 0 },
     ],
+    removeOuterPadding: [
+      {
+        label: 'With Outer Padding',
+        value: false,
+      },
+      {
+        label: 'Without Outer Padding',
+        value: true,
+      },
+    ],
   },
   dataHook: 'storybook-DatePicker',
   sections: [
@@ -207,6 +217,12 @@ export default {
                     defaultNumber: 100,
                     unit: '%',
                   },
+                  {
+                    label: 'Vertical Spacing Between Weeks',
+                    wixParam: 'customWeeksVerticalSpacing',
+                    defaultNumber: 0,
+                    unit: 'px',
+                  },
                 ],
               },
             }),