Skip to content

feat(date): align with fusion ds #8085

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ibutakova wants to merge 12 commits into
base: master
Choose a base branch
from
+8,103 −3,112
Open

feat(date): align with fusion ds #8085

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
bc47784
feat(date): align with fusion ds
ibutakova Jul 21, 2026
382d6f1
feat(date): fix click away behaviour and some tests
ibutakova Aug 10, 2026
5eed28a
feat(date): fix select styles, fix close button styles
ibutakova Aug 13, 2026
050c52f
feat(date): fix test
ibutakova Aug 14, 2026
01c4bfb
feat(date): update calendar dialog and trigger accessibility
ibutakova Aug 20, 2026
14dbb1f
feat(date): fix tests
ibutakova Aug 20, 2026
63d559b
feat(date): limit select option to max 12 items. fix trigger active s…
ibutakova Aug 28, 2026
a90a54d
feat(date): add calendar navigation test. add strory for disabled yea…
ibutakova Sep 2, 2026
4ed947d
feat(date): remove year/month disabled styles. cleanup story
ibutakova Sep 4, 2026
c35d467
feat(date): allow naviation on disabled dates
ibutakova Sep 7, 2026
e97f1b3
feat(date): add yearRangeOffset to public API
ibutakova Sep 7, 2026
83408ea
feat(date): fix anchor ref in documents
ibutakova Sep 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
409 changes: 231 additions & 178 deletions skills/carbon-react/components/date-input.md
View file
Open in desktop

Large diffs are not rendered by default.

90 changes: 45 additions & 45 deletions skills/carbon-react/components/date-range.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,51 +13,51 @@ description: Carbon DateRange component props and usage examples.
- Props interface: `DateRangeProps`

## Props
| Name | Type | Required | Literals | Description | Default |
| --- | --- | --- | --- | --- | --- |
| onChange | (ev: DateRangeChangeEvent) => void | Yes | | Specify a callback triggered on change | |
| value | string[] | Yes | | An array containing the value of startDate and endDate | |
| dateFormatOverride | string \| undefined | No | | Date format string to be applied to the date inputs | |
| datePickerEndAriaLabel | string \| undefined | No | | Prop to specify the aria-label attribute of the end date picker | |
| datePickerEndAriaLabelledBy | string \| undefined | No | | Prop to specify the aria-labelledby attribute of the end date picker | |
| datePickerStartAriaLabel | string \| undefined | No | | Prop to specify the aria-label attribute of the start date picker | |
| datePickerStartAriaLabelledBy | string \| undefined | No | | Prop to specify the aria-labelledby attribute of the start date picker | |
| endDateProps | Omit<Partial<DateInputProps>, "required"> \| undefined | No | | Props for the child end Date component | {} |
| endError | string \| boolean \| undefined | No | | Indicate that error has occurred on end date. Pass string to display icon, tooltip and red border. Pass true boolean to only display red border. | |
| endInfo | string \| boolean \| undefined | No | | [Legacy] Indicate additional information for end date. Pass string to display icon, tooltip and blue border. Pass true boolean to only display blue border. | |
| endLabel | string \| undefined | No | | Optional label for endDate field | |
| endRef | React.ForwardedRef<HTMLInputElement> \| undefined | No | | A React ref to pass to the second of the two Date Input fields | |
| endWarning | string \| boolean \| undefined | No | | Indicate that warning has occurred on end date. Pass string to display icon, tooltip and orange border. Pass true boolean to only display orange border. | |
| id | string \| undefined | No | | An optional string prop to provide an id to the component | |
| labelsInline | boolean \| undefined | No | | [Legacy] Display labels inline | |
| m | ResponsiveValue<TVal, ThemeType> \| undefined | No | | Margin on top, left, bottom and right | |
| margin | ResponsiveValue<TVal, ThemeType> \| undefined | No | | Margin on top, left, bottom and right | |
| marginBottom | ResponsiveValue<TVal, ThemeType> \| undefined | No | | Margin on bottom | |
| marginLeft | ResponsiveValue<TVal, ThemeType> \| undefined | No | | Margin on left | |
| marginRight | ResponsiveValue<TVal, ThemeType> \| undefined | No | | Margin on right | |
| marginTop | ResponsiveValue<TVal, ThemeType> \| undefined | No | | Margin on top | |
| marginX | ResponsiveValue<TVal, ThemeType> \| undefined | No | | Margin on left and right | |
| marginY | ResponsiveValue<TVal, ThemeType> \| undefined | No | | Margin on top and bottom | |
| mb | ResponsiveValue<TVal, ThemeType> \| undefined | No | | Margin on bottom | |
| ml | ResponsiveValue<TVal, ThemeType> \| undefined | No | | Margin on left | |
| mr | ResponsiveValue<TVal, ThemeType> \| undefined | No | | Margin on right | |
| mt | ResponsiveValue<TVal, ThemeType> \| undefined | No | | Margin on top | |
| mx | ResponsiveValue<TVal, ThemeType> \| undefined | No | | Margin on left and right | |
| my | ResponsiveValue<TVal, ThemeType> \| undefined | No | | Margin on top and bottom | |
| name | string \| undefined | No | | An optional string prop to provide a name to the component | |
| onBlur | ((ev: DateRangeChangeEvent) => void) \| undefined | No | | Specify a callback triggered on blur | |
| required | boolean \| undefined | No | | Flag to configure component as mandatory. | |
| startDateProps | Omit<Partial<DateInputProps>, "required"> \| undefined | No | | Props for the child start Date component | {} |
| startError | string \| boolean \| undefined | No | | Indicate that error has occurred on start date. Pass string to display icon, tooltip and red border. Pass true boolean to only display red border. | |
| startInfo | string \| boolean \| undefined | No | | [Legacy] Indicate additional information for start date. Pass string to display icon, tooltip and blue border. Pass true boolean to only display blue border. | |
| startLabel | string \| undefined | No | | Optional label for startDate field | |
| startRef | React.ForwardedRef<HTMLInputElement> \| undefined | No | | A React ref to pass to the first of the two Date Input fields | |
| startWarning | string \| boolean \| undefined | No | | Indicate that warning has occurred on start date. Pass string to display icon, tooltip and orange border. Pass true boolean to only display orange border. | |
| tooltipPosition | "left" \| "right" \| "bottom" \| "top" \| undefined | No | | [Legacy] Overrides the default tooltip position | |
| validationMessagePositionTop | boolean \| undefined | No | | Render the ValidationMessage above the Date inputs when validationRedesignOptIn flag is set | true |
| validationOnLabel | boolean \| undefined | No | | [Legacy] When true, validation icons will be placed on labels instead of being placed on the inputs | |
| data-element | string \| undefined | No | | Identifier used for testing purposes, applied to the root element of the component. | |
| data-role | string \| undefined | No | | Identifier used for testing purposes, applied to the root element of the component. | |
| Name | Type | Required | Literals | Deprecated | Deprecation reason | Description | Default |
| --- | --- | --- | --- | --- | --- | --- | --- |
| onChange | (ev: DateRangeChangeEvent) => void | Yes | | | | Specify a callback triggered on change | |
| value | string[] | Yes | | | | An array containing the value of startDate and endDate | |
| dateFormatOverride | string \| undefined | No | | | | Date format string to be applied to the date inputs | |
| endDateProps | Omit<Partial<DateInputProps>, "required"> \| undefined | No | | | | Props for the child end Date component | {} |
| endError | string \| boolean \| undefined | No | | | | Indicate that error has occurred on end date. Pass string to display icon, tooltip and red border. Pass true boolean to only display red border. | |
| endInfo | string \| boolean \| undefined | No | | | | [Legacy] Indicate additional information for end date. Pass string to display icon, tooltip and blue border. Pass true boolean to only display blue border. | |
| endLabel | string \| undefined | No | | | | Optional label for endDate field | |
| endRef | React.ForwardedRef<HTMLInputElement> \| undefined | No | | | | A React ref to pass to the second of the two Date Input fields | |
| endWarning | string \| boolean \| undefined | No | | | | Indicate that warning has occurred on end date. Pass string to display icon, tooltip and orange border. Pass true boolean to only display orange border. | |
| id | string \| undefined | No | | | | An optional string prop to provide an id to the component | |
| labelsInline | boolean \| undefined | No | | | | [Legacy] Display labels inline | |
| m | ResponsiveValue<TVal, ThemeType> \| undefined | No | | | | Margin on top, left, bottom and right | |
| margin | ResponsiveValue<TVal, ThemeType> \| undefined | No | | | | Margin on top, left, bottom and right | |
| marginBottom | ResponsiveValue<TVal, ThemeType> \| undefined | No | | | | Margin on bottom | |
| marginLeft | ResponsiveValue<TVal, ThemeType> \| undefined | No | | | | Margin on left | |
| marginRight | ResponsiveValue<TVal, ThemeType> \| undefined | No | | | | Margin on right | |
| marginTop | ResponsiveValue<TVal, ThemeType> \| undefined | No | | | | Margin on top | |
| marginX | ResponsiveValue<TVal, ThemeType> \| undefined | No | | | | Margin on left and right | |
| marginY | ResponsiveValue<TVal, ThemeType> \| undefined | No | | | | Margin on top and bottom | |
| mb | ResponsiveValue<TVal, ThemeType> \| undefined | No | | | | Margin on bottom | |
| ml | ResponsiveValue<TVal, ThemeType> \| undefined | No | | | | Margin on left | |
| mr | ResponsiveValue<TVal, ThemeType> \| undefined | No | | | | Margin on right | |
| mt | ResponsiveValue<TVal, ThemeType> \| undefined | No | | | | Margin on top | |
| mx | ResponsiveValue<TVal, ThemeType> \| undefined | No | | | | Margin on left and right | |
| my | ResponsiveValue<TVal, ThemeType> \| undefined | No | | | | Margin on top and bottom | |
| name | string \| undefined | No | | | | An optional string prop to provide a name to the component | |
| onBlur | ((ev: DateRangeChangeEvent) => void) \| undefined | No | | | | Specify a callback triggered on blur | |
| required | boolean \| undefined | No | | | | Flag to configure component as mandatory. | |
| startDateProps | Omit<Partial<DateInputProps>, "required"> \| undefined | No | | | | Props for the child start Date component | {} |
| startError | string \| boolean \| undefined | No | | | | Indicate that error has occurred on start date. Pass string to display icon, tooltip and red border. Pass true boolean to only display red border. | |
| startInfo | string \| boolean \| undefined | No | | | | [Legacy] Indicate additional information for start date. Pass string to display icon, tooltip and blue border. Pass true boolean to only display blue border. | |
| startLabel | string \| undefined | No | | | | Optional label for startDate field | |
| startRef | React.ForwardedRef<HTMLInputElement> \| undefined | No | | | | A React ref to pass to the first of the two Date Input fields | |
| startWarning | string \| boolean \| undefined | No | | | | Indicate that warning has occurred on start date. Pass string to display icon, tooltip and orange border. Pass true boolean to only display orange border. | |
| tooltipPosition | "left" \| "right" \| "bottom" \| "top" \| undefined | No | | | | [Legacy] Overrides the default tooltip position | |
| validationMessagePositionTop | boolean \| undefined | No | | | | Render the ValidationMessage above the Date inputs when validationRedesignOptIn flag is set | true |
| validationOnLabel | boolean \| undefined | No | | | | [Legacy] When true, validation icons will be placed on labels instead of being placed on the inputs | |
| data-element | string \| undefined | No | | | | Identifier used for testing purposes, applied to the root element of the component. | |
| data-role | string \| undefined | No | | | | Identifier used for testing purposes, applied to the root element of the component. | |
| datePickerEndAriaLabel | string \| undefined | No | | Yes | The dialog label is now always derived from the locale (`date.ariaLabels.chooseDate`). Remove this prop; it has no effect. | | |
| datePickerEndAriaLabelledBy | string \| undefined | No | | Yes | The dialog label is now always derived from the locale (`date.ariaLabels.chooseDate`). Remove this prop; it has no effect. | | |
| datePickerStartAriaLabel | string \| undefined | No | | Yes | The dialog label is now always derived from the locale (`date.ariaLabels.chooseDate`). Remove this prop; it has no effect. | | |
| datePickerStartAriaLabelledBy | string \| undefined | No | | Yes | The dialog label is now always derived from the locale (`date.ariaLabels.chooseDate`). Remove this prop; it has no effect. | | |

## Examples
### Default
Expand Down
15 changes: 8 additions & 7 deletions src/__internal__/__stories__/z-index-interaction.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,10 @@ export const DateInputInDialog: StoryObj = {
await expect(modal).toHaveAttribute("data-state", "open");
});

const icon = await screen.findByTestId("icon");
await userEvent.click(icon);
const calendarButton = await screen.findByRole("button", {
name: "Open calendar",
});
await userEvent.click(calendarButton);

const datePicker = await screen.findByTestId("date-picker");
expect(datePicker).toBeVisible();
Expand Down Expand Up @@ -458,11 +460,10 @@ export const DateInPopoverContainer: StoryObj = {
play: async () => {
if (!allowInteractions()) return;

const icon = document.querySelector(
'[data-component="icon"][data-element="calendar"]',
);

if (icon) await userEvent.click(icon);
const calendarButton = await screen.findByRole("button", {
name: "Open calendar",
});
await userEvent.click(calendarButton);

const datePicker = await screen.findByTestId("date-picker");
expect(datePicker).toBeVisible();
Expand Down
19 changes: 15 additions & 4 deletions src/__internal__/input/input-style-overrides.style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,21 @@ import addFocusStyling from "../../style/utils/add-focus-styling";
export const dateStyleOverrides = css`
.date & {
.input-text-container input {
padding: 0 0 0 12px;
margin-right: -12px;
padding-inline-end: 0;
}
}

.date-typical [data-role="date-input-wrapper"] & {
&:focus-within {
box-shadow: none;
outline: none;
}

.input-text-container input:focus {
border-radius: var(--global-radius-action-m) 0 0
var(--global-radius-action-m);
${addFocusStyling()}
z-index: 2;
}
}
`;
Expand Down Expand Up @@ -144,7 +157,6 @@ const searchNewBaseStyles = css`

&:focus-within:has(:focus:not(button)) {
box-shadow: none;
-webkit-box-shadow: none;
}

.input-text-container input[type="search"]:focus {
Expand Down Expand Up @@ -331,7 +343,6 @@ export const passwordStyleOverrides = css`
[data-component="password"] & {
&:focus-within {
box-shadow: none !important;
-webkit-box-shadow: none !important;
outline: none !important;
}

Expand Down
10 changes: 4 additions & 6 deletions src/__internal__/label/label.style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,16 +44,14 @@ const StyledLabel = styled.label<StyledLabelProps>`
${({ $isRequired, $size, $disabled }) =>
$isRequired &&
css`
display: inline-flex;
align-items: center;

::after {
content: "*";
color: ${$disabled
? "var(--input-labelset-label-disabled)"
: "var(--input-labelset-label-required)"};
content: "*";
display: inline-block;
font: ${getFontToken($size)};
margin-left: 4px;
margin-inline-start: 4px;
}
`}

Expand All @@ -65,7 +63,7 @@ const StyledLabel = styled.label<StyledLabelProps>`
.fieldset-required-input & {
::after {
content: "";
margin-left: 0;
margin-inline-start: 0;
}
}
`;
Expand Down
18 changes: 18 additions & 0 deletions src/__internal__/label/label.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,24 @@ test("should apply medium font to required indicator by default", () => {
);
});

test("should apply small font to label and required indicator", () => {
render(
<Label size="small" isRequired>
Small Required
</Label>,
);

expect(screen.getByText("Small Required")).toHaveStyleRule(
"font",
"var(--global-font-static-comp-medium-s)",
);
expect(screen.getByText("Small Required")).toHaveStyleRule(
"font",
"var(--global-font-static-comp-medium-s)",
{ modifier: "::after" },
);
});

test("should apply disabled colour and set aria-disabled when `disabled` prop is true", () => {
render(
<Label size="medium" disabled>
Expand Down
Loading
Loading