feat: add new prop to #date-picker align_picker with two options: `…

…left` and `right`
dnbexperience · Jul 22, 2019 · 275f911 · 275f911
1 parent fcbde4b
commit 275f911
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 9 deletions.
diff --git a/...n-system-portal/src/docs/uilib/components/date-picker/date-picker-properties.md b/...n-system-portal/src/docs/uilib/components/date-picker/date-picker-properties.md
@@ -28,8 +28,9 @@ draft: true
 | `sync`                                          | _(optional)_ sync input values with the calendars views. Once the input values getting changed, the calendar changes its views in sync. Defaults to `true`.          |
 | `first_day`                                     | _(optional)_ to define the first day of the week. Defaults to `monday`.                                                                                              |
 | `locale`                                        | _(optional)_ to define the locale used in the calendar. Needs to be an `date-fns` locale object, like `import nbLocale from 'date-fns/locale/nb'`. Defaults to `nb`. |
+| `align_picker`                                  | _(optional)_ use `right` to change the calendar alignment direction. Defaults to `left`.                                                                             |
 | `label`                                         | _(optional)_ a prepending label in sync with the date input field.                                                                                                   |
-| `label_direction`                               | _(optional)_ use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`                                                         |
+| `label_direction`                               | _(optional)_ use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.                                                        |
 | `status`                                        | _(optional)_ text with a status message. The style defaults to an error message.                                                                                     |
 | `status_state`                                  | _(optional)_ defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.                                                 |
 | [Space](/uilib/components/space#tab-properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                |
diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js
@@ -102,6 +102,7 @@ export const propTypes = {
   opened: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   direction: PropTypes.oneOf(['auto', 'top', 'bottom']),
+  align_picker: PropTypes.oneOf(['auto', 'left', 'right']),
 
   // Web Component props
   custom_element: PropTypes.object,
@@ -147,6 +148,7 @@ export const defaultProps = {
   status_animation: null,
   opened: false,
   no_animation: false,
+  align_picker: null,
   direction: 'auto',
 
   // Web Component props
@@ -261,8 +263,9 @@ export default class DatePicker extends PureComponent {
   }
 
   setTrianglePosition = () => {
+    const { show_input, align_picker } = this.props
     if (
-      isTrue(this.props.show_input) &&
+      isTrue(show_input) &&
       this._triangleRef.current &&
       this._clampRef.current
     ) {
@@ -273,8 +276,15 @@ export default class DatePicker extends PureComponent {
         const buttonWidth = this._clampRef.current
           .querySelector('.dnb-input__submit-button__button')
           .getBoundingClientRect().width
-        const left = shellWidth - buttonWidth / 2 - 8
-        this._triangleRef.current.style.marginLeft = `${left / 16}rem`
+        if (align_picker === 'right') {
+          const distance = buttonWidth / 2 - 8
+          this._triangleRef.current.style.marginRight = `${distance /
+            16}rem`
+        } else {
+          const distance = shellWidth - buttonWidth / 2 - 8
+          this._triangleRef.current.style.marginLeft = `${distance /
+            16}rem`
+        }
       } catch (e) {
         console.log(e)
       }
@@ -484,6 +494,7 @@ export default class DatePicker extends PureComponent {
       status_animation,
       mask_order,
       mask_placeholder,
+      align_picker,
 
       hide_navigation: _hide_navigation /* eslint-disable-line */,
       hide_days: _hide_days /* eslint-disable-line */,
@@ -542,6 +553,7 @@ export default class DatePicker extends PureComponent {
         showInput && 'dnb-date-picker--show-input',
         (isTrue(show_submit_button) || isTrue(show_cancel_button)) &&
           'dnb-date-picker--show-footer',
+        align_picker && `dnb-date-picker--${align_picker}`,
         createSpacingClasses(props)
       )
     }

diff --git a/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`DatePicker component have to match snapshot 1`] = `
 <DatePicker
+  align_picker={null}
   custom_element={null}
   custom_method={null}
   date="2019-01-01T00:00:00.000Z"
@@ -1627,6 +1628,12 @@ legend.dnb-form-label {
     top: var(--date-picker-input-height); }
   .dnb-date-picker--show-input .dnb-date-picker__container {
     left: 0; }
+  .dnb-date-picker--right .dnb-date-picker__container {
+    left: auto;
+    right: -1rem; }
+  .dnb-date-picker--show-input.dnb-date-picker--right .dnb-date-picker__container {
+    left: auto;
+    right: 0; }
   .dnb-date-picker--opened .dnb-date-picker__container {
     z-index: 4; }
     .dnb-date-picker--opened .dnb-date-picker__container {
@@ -1796,8 +1803,9 @@ legend.dnb-form-label {
       transform: translateY(60%) rotate(45deg);
       border: 1px solid var(--color-black-border);
       background-color: var(--color-white); }
-  .dnb-date-picker--show-input .dnb-date-picker__triangle {
-    left: 0; }
+  .dnb-date-picker--right .dnb-date-picker__triangle {
+    left: auto;
+    right: 0; }
   .dnb-date-picker .rtl {
     direction: rtl; }
     .dnb-date-picker .rtl .dnb-date-picker__prev::before {

diff --git a/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss b/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss
@@ -90,6 +90,16 @@
     left: 0;
   }
 
+  // alignment
+  &--right &__container {
+    left: auto;
+    right: -1rem;
+  }
+  &--show-input#{&}--right &__container {
+    left: auto;
+    right: 0;
+  }
+
   &--opened &__container {
     @include openDatePicker();
   }
@@ -336,8 +346,9 @@
       background-color: var(--color-white);
     }
   }
-  &--show-input &__triangle {
-    left: 0;
+  &--right &__triangle {
+    left: auto;
+    right: 0;
   }
 
   .rtl {

diff --git a/packages/dnb-ui-lib/stories/components/DatePicker.js b/packages/dnb-ui-lib/stories/components/DatePicker.js
@@ -16,7 +16,12 @@ export default [
       <Box>
         <FormRow label_direction="vertical" label="Legend:">
           <DatePicker label="Date Picker 1:" right="small" />
-          <DatePicker label="Date Picker 2:" />
+          <DatePicker label="Date Picker 2:" align_picker="right" />
+          <DatePicker
+            label="Date Picker 3:"
+            show_input
+            align_picker="right"
+          />
         </FormRow>
       </Box>
       <Box>