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 456cbeb34e..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 152b8895c9..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 4d94e7cfcf..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-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..f5f686a12d 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..9eaf5c6b59 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..b2dc23b111 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__/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..7a705b499b 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..662d242fa3 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..fec7b4204a 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/src/style/calendar.shadow.css b/semcore/date-picker/src/style/calendar.shadow.css index d042618d1f..8dd3199da4 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,31 +155,31 @@ 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] { @@ -208,23 +209,23 @@ SCalendarUnit[compareEnd] { } SCalendarUnit[compareStartHighlighted] { - 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[compareEndHighlighted] { - 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[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 +244,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/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index cc351101f8..a638682001 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -3266,6 +3266,7 @@ "description": "Small gap between content elements inside controls, rows, or columns.", "components": [ "base-trigger", + "date-picker", "dropdown-menu", "inline-input" ] @@ -3293,6 +3294,7 @@ "components": [ "button", "checkbox", + "date-picker", "dropdown", "radio", "select" @@ -3366,7 +3368,6 @@ "base-trigger", "bulk-textarea", "button", - "date-picker", "dropdown-menu", "feature-highlight", "inline-edit", @@ -3436,7 +3437,6 @@ "card", "carousel", "d3-chart", - "date-picker", "feedback-form", "notice" ]