Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(date-picker): sync code and figma
Browse files Browse the repository at this point in the history
nowseemee committed May 31, 2023

Verified

This commit was signed with the committer’s verified signature. The key has expired.
nowseemee Daniel Beck
1 parent d6def10 commit 9142b68
Showing 3 changed files with 50 additions and 20 deletions.
46 changes: 35 additions & 11 deletions packages/components/src/components/date-picker/date-picker.css
Original file line number Diff line number Diff line change
@@ -28,9 +28,9 @@ duet-date-picker {
--spacing-x: var(--telekom-spacing-unit-x3);

--spacing-heading: 0 0 var(--telekom-spacing-unit-x4) 0;
--font-size-heading: var(--telekom-typography-font-size-callout);
--font-size-heading: var(--telekom-typography-font-size-body);
--font-size-select-label: var(--telekom-typography-font-size-body);
--radius-day: var(--telekom-radius-large);
--radius-day: var(--telekom-radius-standard);
--font-size-day: var(--telekom-typography-font-size-body);
--font-size-table-header: var(--font-size-day);
--font-weight-table-header: var(--telekom-typography-font-weight-extra-bold);
@@ -161,6 +161,13 @@ duet-date-picker .duet-date__input::placeholder {
var(--telekom-motion-easing-standard);
}

duet-date-picker .duet-date__prev,
duet-date-picker .duet-date__next,
duet-date-picker .duet-date__day {
width: 44px;
height: 44px;
}

.scale-date-picker.scale-date-picker--focus .date-picker__label,
.scale-date-picker.animated .date-picker__label {
color: var(--telekom-color-text-and-icon-additional);
@@ -250,6 +257,17 @@ duet-date-picker .duet-date__input:focus::placeholder {
duet-date-picker .duet-date__dialog-content {
border: none;
box-shadow: var(--telekom-shadow-top);
max-width: 324px;
padding: var(--telekom-spacing-unit-x2);
}

duet-date-picker .duet-date__cell {
padding: 0;
}
duet-date-picker .duet-date__mobile {
margin-left: 0;
width: 100%;
padding: var(--telekom-spacing-unit-x1) 0 var(--telekom-spacing-unit-x3) 0;
}

duet-date-picker .duet-date__select {
@@ -265,8 +283,9 @@ duet-date-picker .duet-date__select-label {
}

duet-date-picker .duet-date__select-label svg {
width: 16px;
height: 16px;
width: var(--telekom-spacing-unit-x3);
height: var(--telekom-spacing-unit-x3);
margin-left: var(--telekom-spacing-unit-x2);
}

duet-date-picker .duet-date__select select:focus + .duet-date__select-label {
@@ -288,11 +307,7 @@ duet-date-picker .duet-date__next {
border-radius: var(--duet-radius);
margin-left: var(--telekom-spacing-unit-x05);
}
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 {
background: var(--telekom-color-primary-hovered);
@@ -345,8 +360,8 @@ duet-date-picker .duet-date__day.is-today::before {
border-radius: var(--telekom-radius-standard);
background-color: var(--telekom-color-primary-standard);
opacity: 1;
left: var(--telekom-spacing-unit-x4);
top: 27px;
left: var(--telekom-spacing-unit-x5);
top: var(--telekom-spacing-unit-x8);
}

duet-date-picker [aria-selected='true'] .duet-date__day.is-today::before,
@@ -390,3 +405,12 @@ duet-date-picker .duet-date__day:hover::before {
zoom: 70%;
}
}

@media (max-width: 35.9375em) {
duet-date-picker .scale-date-picker__popup-heading {
display: none;
}
duet-date-picker .duet-date__dialog-content {
max-width: none;
}
}
18 changes: 12 additions & 6 deletions packages/components/src/components/date-picker/date-picker.tsx
Original file line number Diff line number Diff line change
@@ -261,25 +261,31 @@ export class DatePicker {
);

if (calendarIcon) {
calendarIcon.replaceWith(
document.createElement('scale-icon-content-calendar')
const scaleCalendarIcon = document.createElement(
'scale-icon-content-calendar'
);
scaleCalendarIcon.size = 18;
calendarIcon.replaceWith(scaleCalendarIcon);
}

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

if (navLeftIcon) {
navLeftIcon.replaceWith(
document.createElement('scale-icon-navigation-left')
const scaleNavLeftIcon = document.createElement(
'scale-icon-navigation-left'
);
scaleNavLeftIcon.size = 12;
navLeftIcon.replaceWith(scaleNavLeftIcon);
}

const navRightIcon = this.duetInput.querySelector('.duet-date__next svg');

if (navRightIcon) {
navRightIcon.replaceWith(
document.createElement('scale-icon-navigation-right')
const scaleNavRightIcon = document.createElement(
'scale-icon-navigation-right'
);
scaleNavRightIcon.size = 12;
navRightIcon.replaceWith(scaleNavRightIcon);
}

const selectIcon = this.duetInput.querySelectorAll(
Original file line number Diff line number Diff line change
@@ -26,7 +26,7 @@ export const Template = (args, { argTypes }) => ({
components: { ScaleDatePicker },
props: ScaleDatePicker.props,
template: `
<div style="height: 380px;">
<div style="height: 500px;">
<scale-date-picker
ref="picker"
:name="name"
@@ -140,7 +140,7 @@ export const Template = (args, { argTypes }) => ({
export const RangeTemplate = (args, { argTypes }) => ({
components: { ScaleDatePicker },
template: `
<div style="height: 380px;">
<div style="height: 500px;">
<scale-date-picker
ref="start"
identifier="start"
@@ -417,7 +417,7 @@ duet-date-picker {
const RangeTemplate = (args, { argTypes }) => ({
components: { ScaleDatePicker },
template: `
<div style="height: 380px; display: inline-flex;">
<div style="height: 500px; display: inline-flex;">
<scale-date-picker
ref="start"
identifier="start"

0 comments on commit 9142b68

Please sign in to comment.