diff --git a/semcore/date-picker/__tests__/date-picker.browser-test.tsx b/semcore/date-picker/__tests__/date-picker.browser-test.tsx index 26ea1fbd0b..e9743404a2 100644 --- a/semcore/date-picker/__tests__/date-picker.browser-test.tsx +++ b/semcore/date-picker/__tests__/date-picker.browser-test.tsx @@ -146,14 +146,14 @@ test.describe(`${TAG.VISUAL}`, () => { await test.step('Verify disabled date styles', async () => { await checkStyle(locators.cells(page, 0), { ...defaultCellStyles, - margin: '4px 0px 0px', + margin: '0px', }); }); await test.step('Verify style of available date', async () => { await checkStyle(locators.cells(page, 2), { ...defaultCellStyles, - margin: '4px 0px 0px', + margin: '0px', }); }); @@ -165,7 +165,7 @@ test.describe(`${TAG.VISUAL}`, () => { await test.step('Verify style of selected date', async () => { await checkStyle(selectedCell, { ...selectedCellStyles, - margin: '4px 0px 0px', + margin: '0px', width: '32px', height: '32px', }); @@ -206,14 +206,14 @@ test.describe(`${TAG.VISUAL}`, () => { await test.step('Verify hover disabled date', async () => { await checkStyle(locators.cells(page, 0), { ...defaultCellStyles, - margin: '4px 0px 0px', + margin: '0px', }); }); await test.step('Verify style of available date', async () => { await checkStyle(locators.cells(page, 10), { ...defaultCellStyles, - margin: '4px 0px 0px', + margin: '0px', }); }); @@ -229,7 +229,7 @@ test.describe(`${TAG.VISUAL}`, () => { await test.step('Verify style of selected date', async () => { await checkStyle(selectedCell, { ...selectedCellStyles, - margin: '4px 0px 0px', + margin: '0px', width: '32px', }); }); diff --git a/semcore/date-picker/__tests__/date-picker.browser-test.tsx-snapshots/-visual-Calendar-props-and-date-picker-Verify-all-calendar-props-work-good-1-chromium-linux.png b/semcore/date-picker/__tests__/date-picker.browser-test.tsx-snapshots/-visual-Calendar-props-and-date-picker-Verify-all-calendar-props-work-good-1-chromium-linux.png index 62380c6183..8075c4f5bd 100644 Binary files a/semcore/date-picker/__tests__/date-picker.browser-test.tsx-snapshots/-visual-Calendar-props-and-date-picker-Verify-all-calendar-props-work-good-1-chromium-linux.png and b/semcore/date-picker/__tests__/date-picker.browser-test.tsx-snapshots/-visual-Calendar-props-and-date-picker-Verify-all-calendar-props-work-good-1-chromium-linux.png differ diff --git a/semcore/date-picker/__tests__/date-picker.browser-test.tsx-snapshots/-visual-Calendar-props-and-date-picker-Verify-all-calendar-props-work-good-1-firefox-linux.png b/semcore/date-picker/__tests__/date-picker.browser-test.tsx-snapshots/-visual-Calendar-props-and-date-picker-Verify-all-calendar-props-work-good-1-firefox-linux.png index d4dc60e827..87f03a5949 100644 Binary files a/semcore/date-picker/__tests__/date-picker.browser-test.tsx-snapshots/-visual-Calendar-props-and-date-picker-Verify-all-calendar-props-work-good-1-firefox-linux.png and b/semcore/date-picker/__tests__/date-picker.browser-test.tsx-snapshots/-visual-Calendar-props-and-date-picker-Verify-all-calendar-props-work-good-1-firefox-linux.png differ diff --git a/semcore/date-picker/__tests__/date-picker.browser-test.tsx-snapshots/-visual-Calendar-props-and-date-picker-Verify-all-calendar-props-work-good-1-webkit-linux.png b/semcore/date-picker/__tests__/date-picker.browser-test.tsx-snapshots/-visual-Calendar-props-and-date-picker-Verify-all-calendar-props-work-good-1-webkit-linux.png index 7b2f53a564..09eb8a021e 100644 Binary files a/semcore/date-picker/__tests__/date-picker.browser-test.tsx-snapshots/-visual-Calendar-props-and-date-picker-Verify-all-calendar-props-work-good-1-webkit-linux.png and b/semcore/date-picker/__tests__/date-picker.browser-test.tsx-snapshots/-visual-Calendar-props-and-date-picker-Verify-all-calendar-props-work-good-1-webkit-linux.png differ diff --git a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx index 32b9f4e7b8..4522512ef0 100644 --- a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx +++ b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx @@ -82,7 +82,7 @@ test.describe(`${TAG.VISUAL}`, () => { await test.step('Verify style of available date', async () => { await checkStyle(locators.cells(page, 2), { ...defaultCellStyles, - margin: '4px 0px 0px', + margin: '0px', }); }); @@ -98,7 +98,7 @@ test.describe(`${TAG.VISUAL}`, () => { await test.step('Verify style of selected date', async () => { await checkStyle(selectedCell.nth(0), { - margin: '4px 0px 0px', + margin: '0px', width: '32px', height: '32px', }); diff --git a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png index 7464582eb5..c86f920c89 100644 Binary files a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png and b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png differ diff --git a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png index a60194f005..517f1a65d7 100644 Binary files a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png and b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png differ diff --git a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png index 626be74add..f983106e7d 100644 Binary files a/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png and b/semcore/date-picker/__tests__/date-range-comparator.browser-test.tsx-snapshots/-visual-Date-Range-comparator-with-advanced-us-f1256-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png differ diff --git a/semcore/date-picker/__tests__/date-range-picker.browser-test.tsx b/semcore/date-picker/__tests__/date-range-picker.browser-test.tsx index a84007b8cb..9db5a9ee94 100644 --- a/semcore/date-picker/__tests__/date-range-picker.browser-test.tsx +++ b/semcore/date-picker/__tests__/date-range-picker.browser-test.tsx @@ -179,14 +179,14 @@ test.describe(`${TAG.VISUAL}`, () => { locator: locators.cells(page, 0), expectedStyles: { ...defaultCellStyles, - margin: '4px 0px 0px', + margin: '0px', }, }, { locator: locators.cells(page, 10), expectedStyles: { ...defaultCellStyles, - margin: '4px 0px 0px', + margin: '0px', }, }, ]; @@ -208,7 +208,7 @@ test.describe(`${TAG.VISUAL}`, () => { await locators.button(page, 'Apply').waitFor({ state: 'visible' }); const cell = page.locator('[data-ui-name="CalendarDays.Unit"][class*="Selected"]'); - await checkStyle(cell.nth(1), { margin: '4px 0px 0px', width: '32px', height: '32px' }); + await checkStyle(cell.nth(1), { margin: '0px', width: '32px', height: '32px' }); }); await test.step('Verify style for Apply picker button', async () => { diff --git a/semcore/date-picker/__tests__/month-picker.browser-test.tsx b/semcore/date-picker/__tests__/month-picker.browser-test.tsx index 965e4ae533..394357d94b 100644 --- a/semcore/date-picker/__tests__/month-picker.browser-test.tsx +++ b/semcore/date-picker/__tests__/month-picker.browser-test.tsx @@ -113,14 +113,14 @@ test.describe(`${TAG.VISUAL}`, () => { const nonSelectedCell = page.locator('[data-ui-name="CalendarMonths.Unit"]:not([class*="Selected"])').first(); await checkStyle(nonSelectedCell, { ...defaultCellStyles, - margin: '4px 0px 0px', + margin: '0px', }); }); await test.step('Verify style of selected date', async () => { await checkStyle(selectedCell, { ...selectedCellStyles, - margin: '4px 0px 0px', + margin: '0px', width: '60px', height: '32px', }); diff --git a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx index 57921dae1e..0cc0a7112d 100644 --- a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx +++ b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx @@ -93,7 +93,7 @@ test.describe(`${TAG.VISUAL}`, () => { const cell = locators.cells(page, 2); await checkStyle(cell, { ...defaultCellStyles, - margin: '4px 0px 0px', + margin: '0px', }); }); @@ -110,7 +110,7 @@ test.describe(`${TAG.VISUAL}`, () => { .locator('[data-ui-name="CalendarMonths.Unit"][class*="Selected"]') .nth(0); await checkStyle(selectedCell, { - margin: '4px 0px 0px', + margin: '0px', width: '60px', height: '32px', }); diff --git a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png index 32362f49dc..66a3fa22c6 100644 Binary files a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png and b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-chromium-linux.png differ diff --git a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png index a95413e98a..ef3548375c 100644 Binary files a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png and b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-firefox-linux.png differ diff --git a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png index bba3804c88..54d9a80725 100644 Binary files a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png and b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-Month-Range-comparator-with-advanced-u-22177-mouse-intearctions-and-styles-of-advanced-use-1-webkit-linux.png differ diff --git a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-MonthRangeComparator-range-Month-range-comparator-filled-state-2-chromium-linux.png b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-MonthRangeComparator-range-Month-range-comparator-filled-state-2-chromium-linux.png index 864992b4f8..9c076b51d3 100644 Binary files a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-MonthRangeComparator-range-Month-range-comparator-filled-state-2-chromium-linux.png and b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-MonthRangeComparator-range-Month-range-comparator-filled-state-2-chromium-linux.png differ diff --git a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-MonthRangeComparator-range-Month-range-comparator-filled-state-2-firefox-linux.png b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-MonthRangeComparator-range-Month-range-comparator-filled-state-2-firefox-linux.png index 3df655f16f..83a7394096 100644 Binary files a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-MonthRangeComparator-range-Month-range-comparator-filled-state-2-firefox-linux.png and b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-MonthRangeComparator-range-Month-range-comparator-filled-state-2-firefox-linux.png differ diff --git a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-MonthRangeComparator-range-Month-range-comparator-filled-state-2-webkit-linux.png b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-MonthRangeComparator-range-Month-range-comparator-filled-state-2-webkit-linux.png index 9de1958576..29bae09f34 100644 Binary files a/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-MonthRangeComparator-range-Month-range-comparator-filled-state-2-webkit-linux.png and b/semcore/date-picker/__tests__/month-range-comparator.browser-test.tsx-snapshots/-visual-MonthRangeComparator-range-Month-range-comparator-filled-state-2-webkit-linux.png differ diff --git a/semcore/date-picker/__tests__/month-range-picker.browser-test.tsx b/semcore/date-picker/__tests__/month-range-picker.browser-test.tsx index 7c27e2d7a2..0ea0bcca86 100644 --- a/semcore/date-picker/__tests__/month-range-picker.browser-test.tsx +++ b/semcore/date-picker/__tests__/month-range-picker.browser-test.tsx @@ -150,14 +150,14 @@ test.describe(`${TAG.VISUAL}`, () => { await checkStyle(locators.cells(page, 0), { ...defaultCellStyles, - margin: '4px 0px 0px', + margin: '0px', }); }); await test.step('Verify available date style', async () => { await checkStyle(locators.cells(page, 2), { ...defaultCellStyles, - margin: '4px 0px 0px', + margin: '0px', }); }); @@ -175,7 +175,7 @@ test.describe(`${TAG.VISUAL}`, () => { await test.step('Verify selected date style', async () => { await checkStyle(selectedCells.nth(0), { - margin: '4px 0px 0px', + margin: '0px', width: '60px', height: '32px', }); diff --git a/semcore/date-picker/src/style/calendar.shadow.css b/semcore/date-picker/src/style/calendar.shadow.css index b1f16965c2..bb4a48cc27 100644 --- a/semcore/date-picker/src/style/calendar.shadow.css +++ b/semcore/date-picker/src/style/calendar.shadow.css @@ -1,7 +1,8 @@ SCalendar { display: flex; flex-direction: column; - border-radius: var(--intergalactic-surface-rounded, 8px); + border-radius: var(--intergalactic-rounded-small, 4px); + gap: var(--intergalactic-spacing-content-gap-small, 4px); SCalendarUnit:focus-visible { outline: none; @@ -12,11 +13,12 @@ SGridDays { display: grid; grid-template-columns: repeat(7, minmax(32px, auto)); grid-template-rows: repeat(auto-fit, minmax(32px, auto)); + grid-row-gap: var(--intergalactic-spacing-content-gap-small, 4px); } SGridMonths { display: grid; - grid-row-gap: var(--intergalactic-spacing-2x, 8px); + grid-row-gap: var(--intergalactic-spacing-content-gap-large, 8px); grid-template-columns: repeat(3, minmax(60px, auto)); grid-template-rows: repeat(4, minmax(32px, auto)); } @@ -55,7 +57,7 @@ SCalendarUnit { background-color: var(--intergalactic-date-picker-cell, oklch(1 0 0)); align-items: center; - border-radius: var(--intergalactic-control-rounded, 6px); + border-radius: var(--intergalactic-rounded-small, 4px); box-sizing: border-box; cursor: pointer; display: flex; @@ -67,7 +69,6 @@ SCalendarUnit { transition: border-radius 0.15s 0.15s; outline: none; margin: 0; - margin-top: 4px; &:hover { color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); @@ -82,7 +83,7 @@ SCalendarUnit[today] { display: block; top: 1px; left: 1px; - border-radius: var(--intergalactic-control-rounded, 6px); + border-radius: var(--intergalactic-rounded-small, 4px); width: calc(100% - 2px); height: calc(100% - 2px); box-sizing: border-box; @@ -124,9 +125,9 @@ SCalendarUnit[startSelected] { background-color: var(--intergalactic-date-picker-cell-active, oklch(0.23 0.01 140)); &:not([highlighted]) { - border-bottom-left-radius: var(--intergalactic-control-rounded, 6px); + border-bottom-left-radius: var(--intergalactic-rounded-small, 4px); border-bottom-right-radius: 0; - border-top-left-radius: var(--intergalactic-control-rounded, 6px); + border-top-left-radius: var(--intergalactic-rounded-small, 4px); border-top-right-radius: 0; } @@ -142,9 +143,9 @@ SCalendarUnit[endSelected] { &:not([highlighted]) { border-bottom-left-radius: 0; - border-bottom-right-radius: var(--intergalactic-control-rounded, 6px); + border-bottom-right-radius: var(--intergalactic-rounded-small, 4px); border-top-left-radius: 0; - border-top-right-radius: var(--intergalactic-control-rounded, 6px); + border-top-right-radius: var(--intergalactic-rounded-small, 4px); } &:hover { @@ -154,45 +155,66 @@ SCalendarUnit[endSelected] { } SCalendarUnit[startHighlighted]:not([selected]) { - border-bottom-left-radius: var(--intergalactic-control-rounded, 6px); + border-bottom-left-radius: var(--intergalactic-rounded-small, 4px); border-bottom-right-radius: 0; - border-top-left-radius: var(--intergalactic-control-rounded, 6px); + border-top-left-radius: var(--intergalactic-rounded-small, 4px); border-top-right-radius: 0; } SCalendarUnit[endHighlighted]:not([selected]) { border-bottom-left-radius: 0; - border-bottom-right-radius: var(--intergalactic-control-rounded, 6px); + border-bottom-right-radius: var(--intergalactic-rounded-small, 4px); border-top-left-radius: 0; - border-top-right-radius: var(--intergalactic-control-rounded, 6px); + border-top-right-radius: var(--intergalactic-rounded-small, 4px); } SCalendarUnit[startHighlighted]SCalendarUnit[endHighlighted] { - border-bottom-left-radius: var(--intergalactic-control-rounded, 6px); - border-bottom-right-radius: var(--intergalactic-control-rounded, 6px); - border-top-left-radius: var(--intergalactic-control-rounded, 6px); - border-top-right-radius: var(--intergalactic-control-rounded, 6px); + border-bottom-left-radius: var(--intergalactic-rounded-small, 4px); + border-bottom-right-radius: var(--intergalactic-rounded-small, 4px); + border-top-left-radius: var(--intergalactic-rounded-small, 4px); + border-top-right-radius: var(--intergalactic-rounded-small, 4px); } SCalendarUnit[startSelected]SCalendarUnit[endSelected] { - border-bottom-left-radius: var(--intergalactic-control-rounded, 6px); - border-bottom-right-radius: var(--intergalactic-control-rounded, 6px); - border-top-left-radius: var(--intergalactic-control-rounded, 6px); - border-top-right-radius: var(--intergalactic-control-rounded, 6px); + border-bottom-left-radius: var(--intergalactic-rounded-small, 4px); + border-bottom-right-radius: var(--intergalactic-rounded-small, 4px); + border-top-left-radius: var(--intergalactic-rounded-small, 4px); + border-top-right-radius: var(--intergalactic-rounded-small, 4px); } SCalendarUnit[compareHighlighted] { - border-top: 2px dashed var(--intergalactic-date-picker-cell-comparison-active, oklch(0.74 0.117 274.1)); - border-bottom: 2px dashed var(--intergalactic-date-picker-cell-comparison-active, oklch(0.74 0.117 274.1)); - border-radius: 0; + border: none; transition: none; + + &::after { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + + background-image: + linear-gradient(to right, var(--intergalactic-date-picker-cell-comparison-active, oklch(0.74 0.117 274.1)) 50%, transparent 50%), + linear-gradient(to right, var(--intergalactic-date-picker-cell-comparison-active, oklch(0.74 0.117 274.1)) 50%, transparent 50%), + linear-gradient(to bottom, var(--intergalactic-date-picker-cell-comparison-active, oklch(0.74 0.117 274.1)) 50%, transparent 50%), + linear-gradient(to bottom, var(--intergalactic-date-picker-cell-comparison-active, oklch(0.74 0.117 274.1)) 50%, transparent 50%); + background-repeat: repeat-x; + background-size: 10.8px 2px, 10.8px 2px, 0 0, 0 0; + background-position: top left -2.9px, bottom left -2.9px, top -2.9px left, top -2.9px right; + } } SCalendarUnit[compareStartHighlighted], SCalendarUnit[compareEndHighlighted] { - border-left: 2px dashed var(--intergalactic-date-picker-cell-comparison-active, oklch(0.74 0.117 274.1)); - border-right: 2px dashed var(--intergalactic-date-picker-cell-comparison-active, oklch(0.74 0.117 274.1)); + border-left: 0; + border-right: 0; + + &::after { + background-size: 10.8px 2px, 10.8px 2px, 2px 10.8px, 2px 10.8px; + background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; + } } SCalendarUnit[compareStart], @@ -207,24 +229,26 @@ SCalendarUnit[compareEnd] { } } -SCalendarUnit[compareStartHighlighted] { - border-top-left-radius: var(--intergalactic-control-rounded, 6px); - border-bottom-left-radius: var(--intergalactic-control-rounded, 6px); +SCalendarUnit[compareStartHighlighted], +SCalendarUnit[compareStartHighlighted]::after { + border-top-left-radius: var(--intergalactic-rounded-small, 4px); + border-bottom-left-radius: var(--intergalactic-rounded-small, 4px); } -SCalendarUnit[compareEndHighlighted] { - border-top-right-radius: var(--intergalactic-control-rounded, 6px); - border-bottom-right-radius: var(--intergalactic-control-rounded, 6px); +SCalendarUnit[compareEndHighlighted], +SCalendarUnit[compareEndHighlighted]::after { + border-top-right-radius: var(--intergalactic-rounded-small, 4px); + border-bottom-right-radius: var(--intergalactic-rounded-small, 4px); } SCalendarUnit[compareStart]:not([compareHighlighted]) { - border-top-left-radius: var(--intergalactic-control-rounded, 6px); - border-bottom-left-radius: var(--intergalactic-control-rounded, 6px); + border-top-left-radius: var(--intergalactic-rounded-small, 4px); + border-bottom-left-radius: var(--intergalactic-rounded-small, 4px); } SCalendarUnit[compareEnd]:not([compareHighlighted]) { - border-top-right-radius: var(--intergalactic-control-rounded, 6px); - border-bottom-right-radius: var(--intergalactic-control-rounded, 6px); + border-top-right-radius: var(--intergalactic-rounded-small, 4px); + border-bottom-right-radius: var(--intergalactic-rounded-small, 4px); } SCalendarUnit[outdated] { @@ -243,7 +267,7 @@ SCalendar:focus { } &:not(&:has(SCalendarUnit[highlighted])) { - border-radius: var(--intergalactic-surface-rounded, 8px); + border-radius: var(--intergalactic-rounded-small, 4px); } } diff --git a/stories/components/date-picker/docs/date-picker.stories.tsx b/stories/components/date-picker/docs/date-picker.stories.tsx index 0c6cd12978..e893419db0 100644 --- a/stories/components/date-picker/docs/date-picker.stories.tsx +++ b/stories/components/date-picker/docs/date-picker.stories.tsx @@ -17,7 +17,7 @@ import CustomDayExample from './examples/custom_day'; import CustomHeaderExample from './examples/custom_header'; import DateRangeComparatorExample from './examples/date_range_comparator'; import DateRangeComparatorAdvanceUseExample from './examples/date_range_comparator_advanced_use'; -import DatepickerExample from './examples/datepicker'; +import DatePickerExample from './examples/datepicker'; import DisabledDatesExample from './examples/disabled_dates'; import MonthRangeComparatorAdvanceUseExample from './examples/month_range_comparator_advanced_use'; import MonthRangePickerExample from './examples/monthrangepicker'; @@ -66,8 +66,8 @@ export const DateRangeComparatorAdvanceUse: StoryObj = { }; -export const Datepicker: StoryObj = { - render: DatepickerExample, +export const DatePicker: StoryObj = { + render: DatePickerExample, play: playWrapper(DatePickerTest), }; diff --git a/stories/components/date-picker/docs/examples/date_range_comparator_advanced_use.tsx b/stories/components/date-picker/docs/examples/date_range_comparator_advanced_use.tsx index c14386b9ed..8f01e80afa 100644 --- a/stories/components/date-picker/docs/examples/date_range_comparator_advanced_use.tsx +++ b/stories/components/date-picker/docs/examples/date_range_comparator_advanced_use.tsx @@ -1,7 +1,7 @@ import WarningIcon from '@semcore/icon/Warning/m'; import { Flex } from '@semcore/ui/base-components'; import { DateRangeComparator } from '@semcore/ui/date-picker'; -import Notice from '@semcore/ui/notice'; +import Dropdown from '@semcore/ui/dropdown'; import React from 'react'; const Demo = () => { @@ -46,24 +46,24 @@ const Demo = () => { Place for a hint, useful message or controls. - - + - + - - + + Warning - + If you change your location, all previously collected data for this article will be lost. - - + + diff --git a/stories/components/date-picker/docs/examples/month_range_comparator_advanced_use.tsx b/stories/components/date-picker/docs/examples/month_range_comparator_advanced_use.tsx index 63b8c3f09e..b69a970a07 100644 --- a/stories/components/date-picker/docs/examples/month_range_comparator_advanced_use.tsx +++ b/stories/components/date-picker/docs/examples/month_range_comparator_advanced_use.tsx @@ -1,8 +1,7 @@ import WarningIcon from '@semcore/icon/Warning/m'; import { Flex } from '@semcore/ui/base-components'; import { MonthDateRangeComparator } from '@semcore/ui/date-picker'; -import Notice from '@semcore/ui/notice'; -import { Text } from '@semcore/ui/typography'; +import Dropdown from '@semcore/ui/dropdown'; import React from 'react'; const Demo = () => { @@ -47,24 +46,24 @@ const Demo = () => { Place for a hint, useful message or controls. - - + - + - - + + Warning - + If you change your location, all previously collected data for this article will be lost. - - + + diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index d8d4bc5b5a..2ff39414a7 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -3400,6 +3400,7 @@ "components": [ "base-trigger", "bulk-textarea", + "date-picker", "dropdown-menu", "inline-input", "pagination", @@ -3429,6 +3430,7 @@ "components": [ "button", "checkbox", + "date-picker", "dropdown", "notice-bubble", "pagination", @@ -3513,7 +3515,6 @@ "base-trigger", "bulk-textarea", "button", - "date-picker", "dropdown-menu", "feature-highlight", "inline-edit", @@ -3583,7 +3584,6 @@ "card", "carousel", "d3-chart", - "date-picker", "feedback-form", "notice" ]