From b7d64b05dea76dbc91817d0348520f5f6b5c31a4 Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Tue, 28 Jan 2025 13:59:28 +1100 Subject: [PATCH 1/4] Content: Adjust width on small viewports (#5488) * fix(Content): Adjust width to take margin into account * chore: Add changeset --- .changeset/moody-terms-drum.md | 5 +++++ packages/components/src/Content/Content.module.scss | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/moody-terms-drum.md diff --git a/.changeset/moody-terms-drum.md b/.changeset/moody-terms-drum.md new file mode 100644 index 00000000000..73280995f11 --- /dev/null +++ b/.changeset/moody-terms-drum.md @@ -0,0 +1,5 @@ +--- +'@kaizen/components': patch +--- + +Content: Adjust width on small viewports diff --git a/packages/components/src/Content/Content.module.scss b/packages/components/src/Content/Content.module.scss index 3ed6c80bddd..c17c76c255f 100644 --- a/packages/components/src/Content/Content.module.scss +++ b/packages/components/src/Content/Content.module.scss @@ -8,5 +8,6 @@ @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) { margin: 0 $content-margin-width-on-medium-and-small; + width: calc(100% - 2 * #{$content-margin-width-on-medium-and-small}); } } From aee35dfa0ca8ef94b54e0a99c0d3078242ca03a7 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 28 Jan 2025 03:55:00 +0000 Subject: [PATCH 2/4] version packages (#5489) Co-authored-by: github-actions[bot] --- .changeset/moody-terms-drum.md | 5 ----- packages/components/CHANGELOG.md | 6 ++++++ packages/components/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/moody-terms-drum.md diff --git a/.changeset/moody-terms-drum.md b/.changeset/moody-terms-drum.md deleted file mode 100644 index 73280995f11..00000000000 --- a/.changeset/moody-terms-drum.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@kaizen/components': patch ---- - -Content: Adjust width on small viewports diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 3d4c059c91f..6afa0b2b889 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 1.70.13 + +### Patch Changes + +- [#5488](https://github.com/cultureamp/kaizen-design-system/pull/5488) [`b7d64b0`](https://github.com/cultureamp/kaizen-design-system/commit/b7d64b05dea76dbc91817d0348520f5f6b5c31a4) - Content: Adjust width on small viewports + ## 1.70.12 ### Patch Changes diff --git a/packages/components/package.json b/packages/components/package.json index 508c712c561..24a393de0e8 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@kaizen/components", - "version": "1.70.12", + "version": "1.70.13", "description": "Kaizen component library", "author": "Geoffrey Chong ", "homepage": "https://cultureamp.design", From 1785576ce4ecc5f5a4bd604a10e30bb4c43d64f6 Mon Sep 17 00:00:00 2001 From: Christian Moore <33382564+Zystix@users.noreply.github.com> Date: Wed, 29 Jan 2025 13:49:58 +1100 Subject: [PATCH 3/4] Add Support for 320px Filter Date Range Picker (#5457) * Fixed buttons * Add changeset * Mocked matchMedia(), fixes tests * Lift mockMedia logic to own function/file * mocked matchMedia() * Add test * Fix overflow * Update changeset Co-authored-by: Doug MacKenzie * used css media query, rationalised css properties. * lint fix * force rebuild * remove comment * empty commit to force rebuild --------- Co-authored-by: Christian Moore Co-authored-by: Doug MacKenzie --- .changeset/seven-hornets-boil.md | 5 +++ packages/components/__tests__/index.ts | 1 + .../components/__tests__/matchMediaMock.ts | 17 +++++++++ .../CalendarRange/CalendarRange.module.scss | 5 +++ .../Calendar/CalendarRange/CalendarRange.tsx | 4 +- .../FilterDateRangePicker.module.css | 7 ++++ .../FilterDateRangePicker.tsx | 4 +- .../_docs/FilterDateRangePicker.stories.tsx | 37 ++++++++++++++++++- .../FilterDateRangePickerField.tsx | 6 ++- vitest.setup.ts | 3 +- 10 files changed, 84 insertions(+), 5 deletions(-) create mode 100644 .changeset/seven-hornets-boil.md create mode 100644 packages/components/__tests__/matchMediaMock.ts create mode 100644 packages/components/src/Filter/FilterDateRangePicker/FilterDateRangePicker.module.css diff --git a/.changeset/seven-hornets-boil.md b/.changeset/seven-hornets-boil.md new file mode 100644 index 00000000000..bf20bd44e66 --- /dev/null +++ b/.changeset/seven-hornets-boil.md @@ -0,0 +1,5 @@ +--- +'@kaizen/components': patch +--- + +FilterDateRangePicker responsive support: now shrinks from two months showing to 1 on small viewports diff --git a/packages/components/__tests__/index.ts b/packages/components/__tests__/index.ts index 042591ec6cc..4ab6b316ada 100644 --- a/packages/components/__tests__/index.ts +++ b/packages/components/__tests__/index.ts @@ -1 +1,2 @@ +export * from './matchMediaMock' export * from './reactIntlMock' diff --git a/packages/components/__tests__/matchMediaMock.ts b/packages/components/__tests__/matchMediaMock.ts new file mode 100644 index 00000000000..5082dfc50e5 --- /dev/null +++ b/packages/components/__tests__/matchMediaMock.ts @@ -0,0 +1,17 @@ +import { vi } from 'vitest' + +export const matchMediaMock = (): any => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: vi.fn().mockImplementation((query) => ({ + matches: false, + media: query, + onchange: null, + addListener: vi.fn(), // deprecated + removeListener: vi.fn(), // deprecated + addEventListener: vi.fn(), + removeEventListener: vi.fn(), + dispatchEvent: vi.fn(), + })), + }) +} diff --git a/packages/components/src/Calendar/CalendarRange/CalendarRange.module.scss b/packages/components/src/Calendar/CalendarRange/CalendarRange.module.scss index 91d14849a8c..9cff0973b7e 100644 --- a/packages/components/src/Calendar/CalendarRange/CalendarRange.module.scss +++ b/packages/components/src/Calendar/CalendarRange/CalendarRange.module.scss @@ -47,6 +47,11 @@ $cell-border-radius: 3px; .captionEnd & { flex-direction: row-reverse; } + + .captionStart.captionEnd & { + justify-content: space-between; + flex-direction: row; + } } .dayRangeStart, diff --git a/packages/components/src/Calendar/CalendarRange/CalendarRange.tsx b/packages/components/src/Calendar/CalendarRange/CalendarRange.tsx index 929855d9bc0..1b98fffe5c3 100644 --- a/packages/components/src/Calendar/CalendarRange/CalendarRange.tsx +++ b/packages/components/src/Calendar/CalendarRange/CalendarRange.tsx @@ -22,6 +22,7 @@ export const CalendarRange = ({ classNameOverride, selected, defaultMonth, + numberOfMonths = 2, locale = enAU, ...restProps }: CalendarRangeProps): JSX.Element => { @@ -39,6 +40,7 @@ export const CalendarRange = ({ ...baseCalendarClassNames, month: hasDivider ? styles.monthWithDivider : styles.month, caption_end: styles.captionEnd, + caption_start: styles.captionStart, nav: styles.nav, day_range_start: styles.dayRangeStart, day_range_end: styles.dayRangeEnd, @@ -57,7 +59,7 @@ export const CalendarRange = ({ IconRight: () => , IconLeft: () => , }} - numberOfMonths={2} + numberOfMonths={numberOfMonths} locale={locale} {...restProps} /> diff --git a/packages/components/src/Filter/FilterDateRangePicker/FilterDateRangePicker.module.css b/packages/components/src/Filter/FilterDateRangePicker/FilterDateRangePicker.module.css new file mode 100644 index 00000000000..9c3c0bbaddf --- /dev/null +++ b/packages/components/src/Filter/FilterDateRangePicker/FilterDateRangePicker.module.css @@ -0,0 +1,7 @@ +@media (width <= 320px) { + .filterDateRangePickerContents { + padding: var(--spacing-16); + max-width: 320px; + box-sizing: border-box; + } +} diff --git a/packages/components/src/Filter/FilterDateRangePicker/FilterDateRangePicker.tsx b/packages/components/src/Filter/FilterDateRangePicker/FilterDateRangePicker.tsx index a34a5707fe1..37917ab50b3 100644 --- a/packages/components/src/Filter/FilterDateRangePicker/FilterDateRangePicker.tsx +++ b/packages/components/src/Filter/FilterDateRangePicker/FilterDateRangePicker.tsx @@ -1,4 +1,5 @@ import React, { useId } from 'react' +import classNames from 'classnames' import { getLocale } from '~components/DatePicker/utils/getLocale' import { Filter, FilterContents, type FilterProps } from '~components/Filter/Filter' import { type FilterButtonProps } from '../FilterButton' @@ -9,6 +10,7 @@ import { } from './subcomponents/FilterDateRangePickerField' import { isValidRange } from './subcomponents/FilterDateRangePickerField/utils/isValidRange' import { isCompleteDateRange } from './utils/isCompleteDateRange' +import styles from './FilterDateRangePicker.module.css' export type FilterDateRangePickerProps = { id?: string @@ -46,7 +48,7 @@ export const FilterDateRangePicker = ({ }) } > - + { + const canvas = within(canvasElement) + + await step('initial render complete', async () => { + await waitFor(() => { + canvas.getByRole('button', { + name: 'Dates', + }) + }) + }) + + await step('Can open the date picker', async () => { + await waitFor(() => { + const button = canvas.getByRole('button', { + name: 'Dates', + }) + button.click() + }) + }) + + await step('Back and Forward arrow and both visible', async () => { + await waitFor(() => { + const prevMonth = canvas.getByLabelText('Go to previous month') + const nextMonth = canvas.getByLabelText('Go to next month') + + expect(prevMonth).toBeVisible() + expect(nextMonth).toBeVisible() + }) + }) + }, +} diff --git a/packages/components/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx b/packages/components/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx index e54233a5dcb..7e453fdff4b 100644 --- a/packages/components/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx +++ b/packages/components/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx @@ -15,6 +15,7 @@ import { type DateValidationResponse } from '~components/Filter/FilterDatePicker import { useDateInputHandlers } from '~components/Filter/FilterDatePicker/hooks/useDateInputHandlers' import { type DataAttributes } from '~components/types/DataAttributes' import { type OverrideClassName } from '~components/types/OverrideClassName' +import { useMediaQueries } from '~components/utils/useMediaQueries' import { DateRangeInputField, type DateRangeInputFieldProps } from '../DateRangeInputField' import { filterDatePickerFieldReducer } from './filterDateRangePickerFieldReducer' import { useEndDateValidation } from './hooks/useEndDateValidation' @@ -84,6 +85,8 @@ export const FilterDateRangePickerField = ({ const { formatMessage } = useIntl() const locale = getLocale(propsLocale) + const { queries } = useMediaQueries() + const translatedDateFrom = formatMessage({ id: 'filterDateRangePicker.dateFrom', defaultMessage: 'Date from', @@ -292,7 +295,7 @@ export const FilterDateRangePickerField = ({ dateStart: dateStartValidation.validationMessage, dateEnd: dateEndValidation.validationMessage, }} - classNameOverride={styles.dateRangeInputField} + classNameOverride={classnames(styles.dateRangeInputField)} /> dispatch({ type: 'navigate_months', date: value })} /> diff --git a/vitest.setup.ts b/vitest.setup.ts index 6cca0be482e..ac4cebd6e73 100644 --- a/vitest.setup.ts +++ b/vitest.setup.ts @@ -2,12 +2,13 @@ import * as JestDomMatchers from '@testing-library/jest-dom/matchers' import { cleanup } from '@testing-library/react' import { afterEach, beforeEach, expect } from 'vitest' import 'vitest-axe/extend-expect' -import { reactIntlMock } from '~tests' +import { matchMediaMock, reactIntlMock } from '~tests' expect.extend(JestDomMatchers) beforeEach(() => { reactIntlMock() + matchMediaMock() }) afterEach(() => { From b118d9d8e3d3bdbb68af2d8cc5228436921694f1 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 29 Jan 2025 02:52:23 +0000 Subject: [PATCH 4/4] version packages (#5490) Co-authored-by: github-actions[bot] --- .changeset/seven-hornets-boil.md | 5 ----- packages/components/CHANGELOG.md | 6 ++++++ packages/components/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/seven-hornets-boil.md diff --git a/.changeset/seven-hornets-boil.md b/.changeset/seven-hornets-boil.md deleted file mode 100644 index bf20bd44e66..00000000000 --- a/.changeset/seven-hornets-boil.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@kaizen/components': patch ---- - -FilterDateRangePicker responsive support: now shrinks from two months showing to 1 on small viewports diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 6afa0b2b889..274f3e70d8e 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 1.70.14 + +### Patch Changes + +- [#5457](https://github.com/cultureamp/kaizen-design-system/pull/5457) [`1785576`](https://github.com/cultureamp/kaizen-design-system/commit/1785576ce4ecc5f5a4bd604a10e30bb4c43d64f6) - FilterDateRangePicker responsive support: now shrinks from two months showing to 1 on small viewports + ## 1.70.13 ### Patch Changes diff --git a/packages/components/package.json b/packages/components/package.json index 24a393de0e8..62fbc844950 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@kaizen/components", - "version": "1.70.13", + "version": "1.70.14", "description": "Kaizen component library", "author": "Geoffrey Chong ", "homepage": "https://cultureamp.design",