Skip to content

Commit

Permalink
fix(date-picker): input value handling, calendarHeading + styles (#660)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nowseemee
nowseemee authored Nov 1, 2021
1 parent f07cbac commit 3311bf2
Show file tree
Hide file tree
Showing 6 changed files with 147 additions and 28 deletions.
49 changes: 42 additions & 7 deletions packages/components/src/components/date-picker/date-picker.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,14 @@ duet-date-picker {
--duet-color-button: var(--scl-color-background-standard, #ffffff);
--duet-color-surface: var(--scl-color-background-standard, #ffffff);
--duet-z-index: 600;

--spacing-heading: 0 0 var(--scl-spacing-16) 0;
--font-size-heading: var(--scl-font-size-20);
--font-size-select-label: var(--scl-font-size-16);
--radius-day: var(--scl-radius-8);
--font-size-day: var(--scl-font-size-16);
--font-size-table-header: var(--font-size-day);
--font-weight-table-header: var(--scl-font-weight-extrabold);
}

duet-date-picker .duet-date__input {
Expand All @@ -41,7 +49,7 @@ duet-date-picker .duet-date__input:focus {
}

duet-date-picker .duet-date__toggle {
border-radius: 0 var(--scl-radius-4) var(--scl-radius-4) 0;
border-radius: 0 var(--duet-radius) var(--duet-radius) 0;
}

duet-date-picker .duet-date__toggle:focus {
Expand Down Expand Up @@ -213,21 +221,36 @@ duet-date-picker .duet-date__input:focus::placeholder {
color: var(--scl-color-grey-20);
}

/* Popover layout */

.scale-date-picker__popup-heading {
text-align: center;
padding-bottom: var(--scl-spacing-16);
padding: var(--spacing-heading);
font-size: var(--font-size-heading);
}
/* Popover layout */

duet-date-picker .duet-date__dialog-content {
border: none;
box-shadow: var(--scl-shadow-level-4);
}

duet-date-picker .duet-date__select {
margin-top: 0;
}

duet-date-picker .duet-date__select:nth-of-type(1) {
margin-right: var(--scl-spacing-8);
}

duet-date-picker .duet-date__select-label {
font-size: var(--font-size-select-label);
}

duet-date-picker .duet-date__select-label svg {
width: 16px;
height: 16px;
}

duet-date-picker .duet-date__select select:focus + .duet-date__select-label {
box-shadow: 0 0 0 var(--scl-spacing-2) var(--scl-color-focus);
}
Expand All @@ -244,7 +267,13 @@ duet-date-picker .duet-date__select select:active + .duet-date__select-label {

duet-date-picker .duet-date__prev,
duet-date-picker .duet-date__next {
border-radius: var(--scl-radius-4);
border-radius: var(--duet-radius);
margin-left: var(--scl-spacing-2);
}
duet-date-picker .duet-date__prev svg,
duet-date-picker .duet-date__next svg {
height: 16px;
width: 16px;
}
duet-date-picker .duet-date__prev:hover,
duet-date-picker .duet-date__next:hover {
Expand All @@ -262,16 +291,22 @@ duet-date-picker .duet-date__next:focus {
}

duet-date-picker .duet-date__close {
border-radius: var(--scl-radius-4);
border-radius: var(--duet-radius);
}

duet-date-picker .duet-date__close:focus {
box-shadow: 0 0 0 var(--scl-spacing-2) var(--scl-color-focus);
}

duet-date-picker .duet-date__table-header {
font-size: var(--font-size-table-header);
font-weight: var(--font-weight-table-header);
}

duet-date-picker .duet-date__day {
padding: 0;
border-radius: var(--scl-radius-8);
border-radius: var(--radius-day);
font-size: var(--font-size-day);
}

duet-date-picker .duet-date__day.is-today {
Expand Down Expand Up @@ -324,7 +359,7 @@ duet-date-picker .duet-date__day:active {
}

duet-date-picker .duet-date__day:hover::before {
border-radius: var(--scl-radius-4);
border-radius: var(--duet-radius);
opacity: 1;
background: transparent;
color: var(--scl-color-white);
Expand Down
91 changes: 71 additions & 20 deletions packages/components/src/components/date-picker/date-picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {
import classNames from 'classnames';
import { DuetLocalizedText } from '@duetds/date-picker/dist/types/components/duet-date-picker/date-localization';
import { emitEvent } from '../../utils/utils';
import statusNote from '../../utils/status-note';

let i = 0;

Expand All @@ -49,23 +50,21 @@ if (
styleUrl: 'date-picker.css',
})
export class DatePicker {
duetInput: DuetDatePicker;
duetInput: DuetDatePicker & HTMLElement;

@Element() hostElement: HTMLElement;
/**
* Name of the date picker input.
*/
@Prop() name: string = 'date';

/**
* Name of the date picker input.
*/
/** @deprecated in v3 in favor of localization.calendarHeading */
@Prop() popupTitle: string = 'Pick a date';

/**
* Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.
*/
@Prop() identifier: string;
@Prop({ mutable: true }) identifier: string;

/**
* Makes the date picker input component disabled. This prevents users from being able to
Expand Down Expand Up @@ -93,7 +92,7 @@ export class DatePicker {
/**
* Date value. Must be in IS0-8601 format: YYYY-MM-DD.
*/
@Prop({ reflect: true }) value: string = '';
@Prop({ reflect: true, mutable: true }) value: string = '';

/**
* Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
Expand Down Expand Up @@ -220,27 +219,67 @@ export class DatePicker {
@Watch('value')
onValueChange() {
this.hasValue = this.value != null && this.value !== '';
// @ts-ignore
this.duetInput.querySelector('.duet-date__input').value = this.value;
}

componentWillLoad() {
if (this.popupTitle !== 'Pick a date') {
statusNote({
tag: 'deprecated',
message:
'Property "popupTitle" is deprecate in favor of localization.calendarHeading.',
type: 'warn',
source: this.hostElement,
});
}

this.handleKeyPress = this.handleKeyPress.bind(this);
if (this.identifier == null) {
this.identifier = 'scale-date-picker-' + i++;
}
}

componentDidLoad() {
const icon = this.duetInput
// @ts-ignore
.querySelector('.duet-date__toggle-icon');
const calendarIcon = this.duetInput.querySelector(
'.duet-date__toggle-icon'
);

if (icon) {
icon.replaceWith(document.createElement('scale-icon-content-calendar'));
if (calendarIcon) {
calendarIcon.replaceWith(
document.createElement('scale-icon-content-calendar')
);
}

const navLeftIcon = this.duetInput.querySelector('.duet-date__prev svg');

if (navLeftIcon) {
navLeftIcon.replaceWith(
document.createElement('scale-icon-navigation-left')
);
}

const input = this.duetInput
// @ts-ignore
.querySelector('.duet-date__input');
const navRightIcon = this.duetInput.querySelector('.duet-date__next svg');

if (navRightIcon) {
navRightIcon.replaceWith(
document.createElement('scale-icon-navigation-right')
);
}

const selectIcon = this.duetInput.querySelectorAll(
'.duet-date__select-label svg'
);

if (selectIcon) {
Array.from(selectIcon).forEach((icon: SVGElement) =>
icon.replaceWith(
document.createElement('scale-icon-navigation-collapse-down')
)
);
}

const input = this.duetInput.querySelector('.duet-date__input');

if (input) {
input.addEventListener('keyup', this.handleKeyPress);
Expand Down Expand Up @@ -272,13 +311,25 @@ export class DatePicker {
'.duet-date__dialog-content'
);
if (dialogContent) {
const calendarHeading =
this.localization?.calendarHeading || this.popupTitle || 'Pick a date';
const heading = document.createElement('h2');
heading.id = duetHeadingId; // link to .duet-date__dialog[aria-labelledby]
heading.className = 'scale-date-picker__popup-heading';
heading.innerHTML = this.popupTitle;
heading.innerHTML = calendarHeading;
dialogContent.insertBefore(heading, dialogContent.firstChild);
}

// truncate table headings to a single character
const tableHeadings = this.hostElement.querySelectorAll(
'.duet-date__table-header span[aria-hidden="true"]'
);
if (tableHeadings) {
Array.from(tableHeadings).forEach(
(item) => (item.innerHTML = item.innerHTML[0])
);
}

const today = this.hostElement.querySelector(
'.duet-date__day.is-today span.duet-date__vhidden'
);
Expand Down Expand Up @@ -317,9 +368,7 @@ export class DatePicker {
};

disconnectedCallback() {
const input = this.duetInput
// @ts-ignore
.querySelector('.duet-date__input');
const input = this.duetInput.querySelector('.duet-date__input');

if (input) {
input.removeEventListener('keyup', this.handleKeyPress);
Expand All @@ -332,6 +381,7 @@ export class DatePicker {

handleKeyPress(e) {
this.hasValue = e.target.value != null && e.target.value !== '';
this.value = e.target.value;
}

render() {
Expand Down Expand Up @@ -376,8 +426,9 @@ export class DatePicker {
dateAdapter={this.dateAdapter}
disabled={this.disabled}
value={this.value}
// @ts-ignore
ref={(element) => (this.duetInput = element)}
ref={(element: HTMLElement & DuetDatePicker) =>
(this.duetInput = element)
}
></duet-date-picker>
{!!this.helperText && (
<div
Expand Down
8 changes: 7 additions & 1 deletion packages/components/src/components/date-picker/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
| `max` | `max` | Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property. | `string` | `''` |
| `min` | `min` | Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property. | `string` | `''` |
| `name` | `name` | Name of the date picker input. | `string` | `'date'` |
| `popupTitle` | `popup-title` | Name of the date picker input. | `string` | `'Pick a date'` |
| `popupTitle` | `popup-title` | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of localization.calendarHeading<br/><br/> | `string` | `'Pick a date'` |
| `required` | `required` | Should the input be marked as required? | `boolean` | `false` |
| `role` | `role` | Defines a specific role attribute for the date picker input. | `string` | `undefined` |
| `size` | `size` | (optional) Size | `string` | `''` |
Expand Down Expand Up @@ -80,12 +80,18 @@ Type: `Promise<void>`
### Depends on

- [scale-icon-content-calendar](../icons/content-calendar)
- [scale-icon-navigation-left](../icons/navigation-left)
- [scale-icon-navigation-right](../icons/navigation-right)
- [scale-icon-navigation-collapse-down](../icons/navigation-collapse-down)
- duet-date-picker

### Graph
```mermaid
graph TD;
scale-date-picker --> scale-icon-content-calendar
scale-date-picker --> scale-icon-navigation-left
scale-date-picker --> scale-icon-navigation-right
scale-date-picker --> scale-icon-navigation-collapse-down
scale-date-picker --> duet-date-picker
style scale-date-picker fill:#f9f,stroke:#333,stroke-width:4px
```
Expand Down
27 changes: 27 additions & 0 deletions packages/storybook-vue/stories/3_components/date-picker/DatePicker.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,33 @@ export const RangeTemplate = (args, { argTypes }) => ({
<scale-date-picker label="Standard" value="2020-12-31" @scaleChange="handleChange" @scaleFocus="handleFocus" @scaleBlur="handleBlur"></scale-date-picker>
```

### Scoped CSS variables

```css
duet-date-picker {
--duet-color-primary: var(--scl-color-primary, #e20074);
--duet-color-text: var(--scl-color-text-standard, #1a1a1a);
--duet-color-overlay: var(--scl-color-background-standard, #ffffff);
--duet-color-border: #333;
--duet-font: var(--scl-font-family-sans);
--duet-font-normal: var(--scl-font-weight-regular);
--duet-font-bold: var(--scl-font-weight-medium);
--duet-color-placeholder: var(--scl-color-grey-60);
--duet-radius: var(--scl-radius-4);
--duet-color-text-active: var(--scl-color-white, #ffffff);
--duet-color-button: var(--scl-color-background-standard, #ffffff);
--duet-color-surface: var(--scl-color-background-standard, #ffffff);
--duet-z-index: 600;

--spacing-heading: 0 0 var(--scl-spacing-16) 0;
--font-size-heading: var(--scl-font-size-20);
--font-size-select-label: var(--scl-font-size-16);
--radius-day: var(--scl-radius-8);
--font-size-day: var(--scl-font-size-16);
--font-size-table-header: var(--font-size-day);
--font-weight-table-header: var(--scl-font-weight-extrabold);
}
```

## Helper Text

Expand Down
Binary file modified ...image_snapshots__/datagrid-visual-spec-js-data-grid-selection-export-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../__image_snapshots__/date-picker-visual-spec-js-date-picker-standard-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 3311bf2

Please sign in to comment.