diff --git a/cypress/components/number/number.cy.tsx b/cypress/components/number/number.cy.tsx index b1788b1a8c..c071bb7c9b 100644 --- a/cypress/components/number/number.cy.tsx +++ b/cypress/components/number/number.cy.tsx @@ -81,37 +81,6 @@ context("Tests for Number component", () => { } ); - it.each([ - [11, 11], - [10, 10], - ])( - "should input %s characters and enforce character limit of %s in Number", - (charactersUsed, limit) => { - const inputValue = "12345678901"; - const underCharacters = - limit - charactersUsed === 1 ? "character" : "characters"; - const overCharacters = - charactersUsed - limit === 1 ? "character" : "characters"; - - CypressMountWithProviders( - - ); - - commonDataElementInputPreview() - .type(inputValue) - .then(() => { - characterCount().should( - "have.text", - `${ - charactersUsed - limit - ? `${limit - charactersUsed} ${overCharacters} too many` - : `${charactersUsed - limit} ${underCharacters} left` - }` - ); - }); - } - ); - it.each([ [11, 11, "rgba(0, 0, 0, 0.55)"], [11, 10, "rgb(203, 55, 74)"], @@ -125,10 +94,7 @@ context("Tests for Number component", () => { charactersUsed - limit === 1 ? "character" : "characters"; CypressMountWithProviders( - + ); commonDataElementInputPreview() diff --git a/cypress/components/textarea/textarea.cy.tsx b/cypress/components/textarea/textarea.cy.tsx index ecb649de82..d365f18293 100644 --- a/cypress/components/textarea/textarea.cy.tsx +++ b/cypress/components/textarea/textarea.cy.tsx @@ -190,12 +190,7 @@ context("Tests for Textarea component", () => { const overCharacters = charactersUsed - limit === 1 ? "character" : "characters"; - CypressMountWithProviders( - - ); + CypressMountWithProviders(); textareaChildren() .type(inputValue) @@ -229,12 +224,7 @@ context("Tests for Textarea component", () => { ])( "input hint should be conditionally rendered", (inputHint, renderStatus) => { - CypressMountWithProviders( - - ); + CypressMountWithProviders(); getDataElementByValue("input-hint").should(renderStatus); } @@ -247,10 +237,7 @@ context("Tests for Textarea component", () => { "character counter should be conditionally rendered", (characterLimit, renderStatus) => { CypressMountWithProviders( - + ); characterCount().should(renderStatus); @@ -264,10 +251,7 @@ context("Tests for Textarea component", () => { "visually hidden character count should be conditionally rendered", (characterLimit, renderStatus) => { CypressMountWithProviders( - + ); visuallyHiddenCharacterCount().should(renderStatus); @@ -281,10 +265,7 @@ context("Tests for Textarea component", () => { "visually hidden hint should be conditionally rendered", (characterLimit, renderStatus) => { CypressMountWithProviders( - + ); visuallyHiddenHint().should(renderStatus); @@ -312,37 +293,6 @@ context("Tests for Textarea component", () => { .should("have.css", "max-width", "100%"); }); - it.each([ - [11, 11], - [10, 10], - ])( - "should input %s characters and enforce character limit of %s in Textarea", - (charactersUsed, limit) => { - const inputValue = "12345678901"; - const underCharacters = - limit - charactersUsed === 1 ? "character" : "characters"; - const overCharacters = - charactersUsed - limit === 1 ? "character" : "characters"; - - CypressMountWithProviders( - - ); - - textareaChildren() - .type(inputValue) - .then(() => { - characterCount().should( - "have.text", - `${ - charactersUsed - limit - ? `${limit - charactersUsed} ${underCharacters} too many` - : `${charactersUsed - limit} ${overCharacters} left` - }` - ); - }); - } - ); - it("should render Textarea with name prop", () => { CypressMountWithProviders( @@ -793,12 +743,6 @@ context("Tests for Textarea component", () => { cy.checkAccessibility(); }); - it("should pass accessibility tests for Textarea UnenforcedCharacterLimitStory", () => { - CypressMountWithProviders(); - - cy.checkAccessibility(); - }); - it("should pass accessibility tests for Textarea ValidationBooleanStory", () => { CypressMountWithProviders(); diff --git a/cypress/components/textbox/textbox.cy.tsx b/cypress/components/textbox/textbox.cy.tsx index e4227a6add..989eefa888 100644 --- a/cypress/components/textbox/textbox.cy.tsx +++ b/cypress/components/textbox/textbox.cy.tsx @@ -229,10 +229,7 @@ context("Tests for Textbox component", () => { "input hint should be conditionally rendered", (inputHint, renderStatus) => { CypressMountWithProviders( - + ); getDataElementByValue("input-hint").should(renderStatus); @@ -246,10 +243,7 @@ context("Tests for Textbox component", () => { "character counter should be conditionally rendered", (characterLimit, renderStatus) => { CypressMountWithProviders( - + ); characterCount().should(renderStatus); @@ -263,10 +257,7 @@ context("Tests for Textbox component", () => { "visually hidden character count should be conditionally rendered", (characterLimit, renderStatus) => { CypressMountWithProviders( - + ); visuallyHiddenCharacterCount().should(renderStatus); @@ -280,10 +271,7 @@ context("Tests for Textbox component", () => { "visually hidden hint should be conditionally rendered", (characterLimit, renderStatus) => { CypressMountWithProviders( - + ); visuallyHiddenHint().should(renderStatus); @@ -332,10 +320,7 @@ context("Tests for Textbox component", () => { charactersUsed - limit === 1 ? "character" : "characters"; CypressMountWithProviders( - + ); textboxInput() @@ -364,40 +349,6 @@ context("Tests for Textbox component", () => { } ); - it.each([ - [11, 11], - [10, 10], - ])( - "should input %s characters and enforce character limit of %s in Textbox", - (charactersUsed, limit) => { - const inputValue = "12345678901"; - const underCharacters = - limit - charactersUsed === 1 ? "character" : "characters"; - const overCharacters = - charactersUsed - limit === 1 ? "character" : "characters"; - - CypressMountWithProviders( - - ); - - textboxInput() - .type(inputValue) - .then(() => { - characterCount().should( - "have.text", - `${ - charactersUsed - limit - ? `${limit - charactersUsed} ${overCharacters} too many` - : `${charactersUsed - limit} ${underCharacters} left` - }` - ); - }); - } - ); - it("should render Textbox with name prop", () => { CypressMountWithProviders( diff --git a/src/components/date/date.component.tsx b/src/components/date/date.component.tsx index bd24aa46ee..ae7fd4b7e6 100644 --- a/src/components/date/date.component.tsx +++ b/src/components/date/date.component.tsx @@ -66,7 +66,6 @@ export interface DateInputProps | "placeholder" | "iconOnClick" | "iconOnMouseDown" - | "enforceCharacterLimit" | "characterLimit" | "warnOverLimit" | "iconTabIndex" diff --git a/src/components/date/date.stories.mdx b/src/components/date/date.stories.mdx index cb2af73c31..58457af0d9 100644 --- a/src/components/date/date.stories.mdx +++ b/src/components/date/date.stories.mdx @@ -207,7 +207,6 @@ the German (`de`) locale whilst the second is for a Chinese (`zh-CN`) locale. Re "placeholder", "iconOnClick", "iconOnMouseDown", - "enforceCharacterLimit", "characterLimit", "prefix", "inputIcon", diff --git a/src/components/password/password.stories.tsx b/src/components/password/password.stories.tsx index eac8be7f58..d32e2c149f 100644 --- a/src/components/password/password.stories.tsx +++ b/src/components/password/password.stories.tsx @@ -59,7 +59,6 @@ export const CharacterCounter = () => { value={state} characterLimit={10} onChange={setValue} - enforceCharacterLimit={false} /> ); }; diff --git a/src/components/textarea/textarea-test.stories.tsx b/src/components/textarea/textarea-test.stories.tsx index 1a0e3ca489..9bbf465852 100644 --- a/src/components/textarea/textarea-test.stories.tsx +++ b/src/components/textarea/textarea-test.stories.tsx @@ -104,7 +104,6 @@ export default { fieldHelp: "", characterLimit: undefined, inputWidth: 100, - enforceCharacterLimit: true, label: "Textarea", labelHelp: "", labelInline: false, diff --git a/src/components/textarea/textarea.component.tsx b/src/components/textarea/textarea.component.tsx index 78b23ee1b6..f440061a95 100644 --- a/src/components/textarea/textarea.component.tsx +++ b/src/components/textarea/textarea.component.tsx @@ -51,8 +51,6 @@ export interface TextareaProps cols?: number; /** If true, the component will be disabled */ disabled?: boolean; - /** Stop the user typing over the characterLimit */ - enforceCharacterLimit?: boolean; /** Indicate that error has occurred Pass string to display icon, tooltip and red border Pass true boolean to only display red border */ @@ -136,7 +134,6 @@ export const Textarea = React.forwardRef( size, children, characterLimit, - enforceCharacterLimit = true, onChange, disabled = false, labelInline, @@ -254,10 +251,9 @@ export const Textarea = React.forwardRef( fieldHelp, }); - const [maxLength, characterCount, visuallyHiddenHintId] = useCharacterCount( + const [characterCount, visuallyHiddenHintId] = useCharacterCount( value, - characterLimit, - enforceCharacterLimit + characterLimit ); useEffect(() => { @@ -323,7 +319,6 @@ export const Textarea = React.forwardRef( name={name} value={value} ref={callbackRef} - maxLength={maxLength} onChange={onChange} disabled={disabled} readOnly={readOnly} diff --git a/src/components/textarea/textarea.stories.mdx b/src/components/textarea/textarea.stories.mdx index 43613da414..b2552152ac 100644 --- a/src/components/textarea/textarea.stories.mdx +++ b/src/components/textarea/textarea.stories.mdx @@ -90,14 +90,6 @@ as it forces a pause before any other announcements, this well help screen reade -### With characterLimit - not enforced - - - - ### with characterLimit - with translations diff --git a/src/components/textarea/textarea.stories.tsx b/src/components/textarea/textarea.stories.tsx index db79bd95fe..bb3b65d3d9 100644 --- a/src/components/textarea/textarea.stories.tsx +++ b/src/components/textarea/textarea.stories.tsx @@ -70,26 +70,6 @@ export const CharacterLimitStory: ComponentStory = () => { ); }; -export const UnenforcedCharacterLimitStory: ComponentStory< - typeof Textarea -> = () => { - const [value, setValue] = useState(""); - return ( -