Skip to content

Commit

Permalink
fix(date-picker): sync code and figma
Browse files Browse the repository at this point in the history
  • Loading branch information
nowseemee committed May 31, 2023
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.