Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(date-picker): input value handling, calendarHeading + styles #660

Merged
merged 1 commit into from
Nov 1, 2021
Merged

fix(date-picker): input value handling, calendarHeading + styles #660

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 42 additions & 7 deletions packages/components/src/components/date-picker/date-picker.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.