From 922694f654e3c8cd7f9f49c56892be29828fb1fd Mon Sep 17 00:00:00 2001 From: Mihai Albu Date: Fri, 11 Oct 2024 09:19:16 +0000 Subject: [PATCH] fix: inline label props have unexpected behaviour with new validation labelInline and legendInline should have no effect with new validation --- .../date-range/date-range-test.stories.tsx | 38 ++++++++++++ .../date-range/date-range.component.tsx | 18 +++++- src/components/date-range/date-range.test.tsx | 19 ++++++ .../numeral-date-test.stories.tsx | 24 +++++++ .../numeral-date/numeral-date.component.tsx | 6 +- .../numeral-date/numeral-date.test.tsx | 18 ++++++ .../radio-button-group.component.tsx | 6 +- .../radio-button-group.test.tsx | 25 ++++++++ .../radio-button-test.stories.tsx | 62 +++++++++++++++++++ .../textarea/textarea-test.stories.tsx | 37 ++++++++++- .../textarea/textarea.component.tsx | 9 ++- src/components/textarea/textarea.test.tsx | 2 + 12 files changed, 256 insertions(+), 8 deletions(-) diff --git a/src/components/date-range/date-range-test.stories.tsx b/src/components/date-range/date-range-test.stories.tsx index 68ad525e1f..f0c2eb7577 100644 --- a/src/components/date-range/date-range-test.stories.tsx +++ b/src/components/date-range/date-range-test.stories.tsx @@ -144,3 +144,41 @@ export const DateRangeNewValidation = () => { ); }; + +export const DateRangeNewValidationWithLabelsInline = () => { + const [state, setState] = React.useState(["01/10/2016", "30/10/2016"]); + + const handleChange = ({ target }: DateRangeChangeEvent) => { + const newValue = [ + target.value[0].formattedValue, + target.value[1].formattedValue, + ]; + setState(newValue); + }; + + return ( + + {[ + { + startError: "Start error with long text string", + endError: "End error", + }, + { + startWarning: "Start warning", + endWarning: "End warning with long text string", + }, + ].map((validation) => ( + + ))} + + ); +}; diff --git a/src/components/date-range/date-range.component.tsx b/src/components/date-range/date-range.component.tsx index 795bcf66ef..d5da042f88 100644 --- a/src/components/date-range/date-range.component.tsx +++ b/src/components/date-range/date-range.component.tsx @@ -1,4 +1,10 @@ -import React, { useCallback, useEffect, useMemo, useState } from "react"; +import React, { + useCallback, + useEffect, + useMemo, + useState, + useContext, +} from "react"; import { MarginProps } from "styled-system"; import { formatToISO, @@ -21,6 +27,7 @@ import DateRangeContext, { InputName, SetInputRefMapValue, } from "./__internal__/date-range.context"; +import NewValidationContext from "../carbon-provider/__internal__/new-validation.context"; interface DateInputValue { formattedValue: string; @@ -128,6 +135,11 @@ export const DateRange = ({ isOptional, ...rest }: DateRangeProps) => { + const { validationRedesignOptIn } = useContext(NewValidationContext); + const labelsInlineWithNewValidation = validationRedesignOptIn + ? false + : labelsInline; + const l = useLocale(); const { dateFnsLocale } = l.date; const { format } = useMemo(() => getFormatData(dateFnsLocale()), [ @@ -324,7 +336,7 @@ export const DateRange = ({ return { label: rest[`${propsKey}Label`], - labelInline: labelsInline, + labelInline: labelsInlineWithNewValidation, value: inputValue, error: rest[`${propsKey}Error`], warning: rest[`${propsKey}Warning`], @@ -343,7 +355,7 @@ export const DateRange = ({ return ( { + render( + + {}} + value={["10/10/2016", "11/11/2016"]} + labelsInline + startDateProps={{ "data-role": "start" }} + endDateProps={{ "data-role": "end" }} + /> + + ); + + expect(screen.getByTestId("start")).toHaveStyle("vertical-align: bottom"); + expect(screen.getByTestId("end")).toHaveStyle("vertical-align: bottom"); +}); diff --git a/src/components/numeral-date/numeral-date-test.stories.tsx b/src/components/numeral-date/numeral-date-test.stories.tsx index 1989cdfece..32cc54a09f 100644 --- a/src/components/numeral-date/numeral-date-test.stories.tsx +++ b/src/components/numeral-date/numeral-date-test.stories.tsx @@ -184,6 +184,30 @@ export const NewDesignValidations = () => { NewDesignValidations.storyName = "new design validations"; +export const NewDesignValidationsWithLabelInline = () => { + return ( + +

New designs validation

+ {["error", "warning"].map((validationType) => + ["small", "medium", "large"].map((size) => ( +
+ +
+ )) + )} + + ); +}; + +NewDesignValidationsWithLabelInline.storyName = + "new design validations with labelInline"; + export const Required = () => { return ; }; diff --git a/src/components/numeral-date/numeral-date.component.tsx b/src/components/numeral-date/numeral-date.component.tsx index 59c4c60d8e..95fce1c1d1 100644 --- a/src/components/numeral-date/numeral-date.component.tsx +++ b/src/components/numeral-date/numeral-date.component.tsx @@ -259,6 +259,10 @@ export const NumeralDate = ({ const locale = useLocale(); const { validationRedesignOptIn } = useContext(NewValidationContext); + const labelInlineWithNewValidation = validationRedesignOptIn + ? false + : labelInline; + const { current: uniqueId } = useRef(id || guid()); const isControlled = useRef(value !== undefined); const initialValue = isControlled.current ? value : defaultValue; @@ -403,7 +407,7 @@ export const NumeralDate = ({ warning={internalWarning} info={info} label={label} - labelInline={labelInline} + labelInline={labelInlineWithNewValidation} labelWidth={labelWidth} labelAlign={labelAlign} labelHelp={!validationRedesignOptIn && labelHelp} diff --git a/src/components/numeral-date/numeral-date.test.tsx b/src/components/numeral-date/numeral-date.test.tsx index cf07febb23..073cc69726 100644 --- a/src/components/numeral-date/numeral-date.test.tsx +++ b/src/components/numeral-date/numeral-date.test.tsx @@ -669,6 +669,24 @@ test("should render the `labelHelp` text as additional content and not render th expect(screen.queryByRole("tooltip")).not.toBeInTheDocument(); }); +test("should have the default styling when the `labelsInline` prop is set and `validationRedesignOptIn` is set", () => { + render( + + {}} + labelHelp="labelHelp" + labelInline + /> + + ); + + const fields = screen.getAllByTestId("field-line"); + + expect(fields[0]).toHaveStyle("display: block"); +}); + test("should render the help icon and tooltip when `labelHelp` prop is set and `validationRedesignOptIn` is not", async () => { const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); render( diff --git a/src/components/radio-button/radio-button-group/radio-button-group.component.tsx b/src/components/radio-button/radio-button-group/radio-button-group.component.tsx index 1b001a41ce..8a9cf520a3 100644 --- a/src/components/radio-button/radio-button-group/radio-button-group.component.tsx +++ b/src/components/radio-button/radio-button-group/radio-button-group.component.tsx @@ -86,6 +86,10 @@ export const RadioButtonGroup = (props: RadioButtonGroupProps) => { const { validationRedesignOptIn } = useContext(NewValidationContext); + const legendInlineWithNewValidation = validationRedesignOptIn + ? false + : legendInline; + if (!deprecateUncontrolledWarnTriggered && !onChange) { deprecateUncontrolledWarnTriggered = true; Logger.deprecate( @@ -103,7 +107,7 @@ export const RadioButtonGroup = (props: RadioButtonGroupProps) => { adaptiveSpacingBreakpoint ); - let inlineLegend = legendInline; + let inlineLegend = legendInlineWithNewValidation; if (adaptiveLegendBreakpoint) { inlineLegend = !!isAboveLegendBreakpoint; } diff --git a/src/components/radio-button/radio-button-group/radio-button-group.test.tsx b/src/components/radio-button/radio-button-group/radio-button-group.test.tsx index 55d5640735..83c47d7c18 100644 --- a/src/components/radio-button/radio-button-group/radio-button-group.test.tsx +++ b/src/components/radio-button/radio-button-group/radio-button-group.test.tsx @@ -296,4 +296,29 @@ describe("when `validationRedesignOptIn` flag is true", () => { expect(screen.getAllByRole("radio")).toHaveLength(2); expect(screen.getByText("foo")).toBeVisible(); }); + + it("renders legend with default styling when `legendInline` is set", () => { + render( + + {}} + legendInline + > + {[ + , + null, + undefined, + "foo", + , + ]} + + + ); + + expect(screen.getByTestId("radio-group-inline")).not.toHaveStyle({ + marginTop: "4px", + }); + }); }); diff --git a/src/components/radio-button/radio-button-test.stories.tsx b/src/components/radio-button/radio-button-test.stories.tsx index 442ca1ddaf..97e532cc67 100644 --- a/src/components/radio-button/radio-button-test.stories.tsx +++ b/src/components/radio-button/radio-button-test.stories.tsx @@ -4,6 +4,8 @@ import { StoryFn } from "@storybook/react"; import { RadioButtonGroup, RadioButton } from "."; import { RadioButtonGroupProps } from "./radio-button-group/radio-button-group.component"; import { RadioButtonProps } from "./radio-button.component"; +import CarbonProvider from "../carbon-provider"; +import Box from "../box"; export default { title: "Radio Button/Test", @@ -13,6 +15,7 @@ export default { "WithValidationsOnRadioGroup", "WithTooltipPosition", "WithTooltipPositionOnRadioGroup", + "WithNewValidationLegendInline", ], parameters: { info: { disable: true }, @@ -187,3 +190,62 @@ export const RadioButtonGroupComponent = ({ ); }; + +export const WithNewValidationLegendInline = () => { + return ( + + + + + + + + + + + + + + + + ); +}; + +WithNewValidationLegendInline.storyName = + "with new validation - legend inline "; diff --git a/src/components/textarea/textarea-test.stories.tsx b/src/components/textarea/textarea-test.stories.tsx index 9c2796e856..4ec0168bc0 100644 --- a/src/components/textarea/textarea-test.stories.tsx +++ b/src/components/textarea/textarea-test.stories.tsx @@ -6,6 +6,8 @@ import Dialog from "../dialog"; import Form from "../form"; import Button from "../button"; import isChromatic from "../../../.storybook/isChromatic"; +import Box from "../box"; +import CarbonProvider from "../carbon-provider/carbon-provider.component"; interface TextareaTestProps extends TextareaProps { labelHelp?: string; @@ -13,7 +15,12 @@ interface TextareaTestProps extends TextareaProps { export default { title: "Textarea/Test", - includeStories: ["Default", "InScrollableContainer", "WithExpandableAndRows"], + includeStories: [ + "Default", + "InScrollableContainer", + "WithExpandableAndRows", + "NewDesignValidationStoryWithLableInline", + ], parameters: { info: { disable: true }, chromatic: { @@ -258,3 +265,31 @@ WithExpandableAndRows.decorators = [ WithExpandableAndRows.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NewDesignValidationStoryWithLableInline: StoryType = () => { + return ( + + {["error", "warning"].map((validationType) => ( + +