From 889c3da8c625d12cc567ea1f0b4b1c109c768b5f Mon Sep 17 00:00:00 2001 From: Dustin Nielsen Date: Mon, 24 Nov 2025 16:27:13 -0700 Subject: [PATCH 1/4] fix(#2579,#3202): Updated GoabTextarea and switch checkbox and radio example --- src/examples/add-another-item-in-a-modal.tsx | 6 +- ...wer-question-with-a-maximum-word-count.tsx | 4 +- ...t-before-asking-a-long-answer-question.tsx | 4 +- ...a-link-in-the-helper-text-of-an-option.tsx | 108 ++++++++-------- ...criptions-for-items-in-a-checkbox-list.tsx | 119 +++++++++--------- src/examples/review-and-action.tsx | 4 +- src/routes/components/TextArea.tsx | 4 +- src/routes/get-started/ReportBug.tsx | 10 +- 8 files changed, 136 insertions(+), 123 deletions(-) diff --git a/src/examples/add-another-item-in-a-modal.tsx b/src/examples/add-another-item-in-a-modal.tsx index 60d5874e3..335443853 100644 --- a/src/examples/add-another-item-in-a-modal.tsx +++ b/src/examples/add-another-item-in-a-modal.tsx @@ -4,7 +4,7 @@ import { GoabContainer, GoabDropdown, GoabDropdownItem, GoabFormItem, GoabInput, - GoabModal, GoabTextarea + GoabModal, GoabTextArea } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { useContext, useState } from "react"; @@ -66,12 +66,12 @@ export const AddAnotherItemInAModal = () => { name="name"> - + value={description}> diff --git a/src/examples/ask-a-long-answer-question-with-a-maximum-word-count.tsx b/src/examples/ask-a-long-answer-question-with-a-maximum-word-count.tsx index cbf4e2b52..1e2cbc331 100644 --- a/src/examples/ask-a-long-answer-question-with-a-maximum-word-count.tsx +++ b/src/examples/ask-a-long-answer-question-with-a-maximum-word-count.tsx @@ -1,7 +1,7 @@ import { Sandbox } from "@components/sandbox"; import { GoabFormItem, - GoabTextarea + GoabTextArea } from "@abgov/react-components"; export const AskALongAnswerQuestionWithAMaximumWordCount = () => { @@ -13,7 +13,7 @@ export const AskALongAnswerQuestionWithAMaximumWordCount = () => { - + diff --git a/src/examples/give-context-before-asking-a-long-answer-question.tsx b/src/examples/give-context-before-asking-a-long-answer-question.tsx index e3de88d02..3e0fd8a2a 100644 --- a/src/examples/give-context-before-asking-a-long-answer-question.tsx +++ b/src/examples/give-context-before-asking-a-long-answer-question.tsx @@ -4,7 +4,7 @@ import { GoabButtonGroup, GoabDetails, GoabFormItem, - GoabTextarea + GoabTextArea } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { useContext } from "react"; @@ -44,7 +44,7 @@ export const GiveContextBeforeAskingALongAnswerQuestion = () => { - + diff --git a/src/examples/include-a-link-in-the-helper-text-of-an-option.tsx b/src/examples/include-a-link-in-the-helper-text-of-an-option.tsx index 18714d585..df2fce271 100644 --- a/src/examples/include-a-link-in-the-helper-text-of-an-option.tsx +++ b/src/examples/include-a-link-in-the-helper-text-of-an-option.tsx @@ -1,11 +1,13 @@ import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; -import { GoabCheckbox, GoabFormItem } from "@abgov/react-components"; +import { GoabRadioGroup, GoabRadioItem, GoabFormItem } from "@abgov/react-components"; import { Sandbox } from "@components/sandbox"; import { useContext } from "react"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; export const IncludeALinkInTheHelperTextOfAnOption = () => { const {version} = useContext(LanguageVersionContext); + const noop = () => { + }; return ( <> @@ -17,14 +19,16 @@ export const IncludeALinkInTheHelperTextOfAnOption = () => { tags="angular" allowCopy={true} code={` - - - Help text with a link. - - - - - `} + + + + Help text with a link. + + + + + + `} />} {version === "new" && { tags="angular" allowCopy={true} code={` - - - - Help text with a link. - - - - - - `} + + + + + Help text with a link. + + + + + + + `} />} {/*React*/} @@ -50,17 +56,18 @@ export const IncludeALinkInTheHelperTextOfAnOption = () => { tags="react" allowCopy={true} code={` - - Help text with a link.} - /> - - - - `} + + + Help text with a link.} + /> + + + + + `} />} {version === "new" && { tags="react" allowCopy={true} code={` - - Help text with a link.} - /> - - - - `} + + + Help text with a link.} + /> + + + + + `} />} - Help text with a link.} - /> - - + + Help text with a link.} + /> + + + diff --git a/src/examples/include-descriptions-for-items-in-a-checkbox-list.tsx b/src/examples/include-descriptions-for-items-in-a-checkbox-list.tsx index 98aa9c562..c3605278c 100644 --- a/src/examples/include-descriptions-for-items-in-a-checkbox-list.tsx +++ b/src/examples/include-descriptions-for-items-in-a-checkbox-list.tsx @@ -1,4 +1,4 @@ -import { GoabFormItem, GoabRadioGroup, GoabRadioItem } from "@abgov/react-components"; +import { GoabFormItem, GoabCheckbox } from "@abgov/react-components"; import { Sandbox } from "@components/sandbox"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { useContext } from "react"; @@ -19,14 +19,12 @@ export default function IncludeDescriptionsForIndividualInputOptions() { allowCopy={true} code={` - - - Use the account associated with the business - - - If you don't have a Alberta.ca login, you can create one - - + + Use the account associated with the business + + If you don't have a Alberta.ca login, you can create one + `} /> @@ -42,7 +40,8 @@ export default function IncludeDescriptionsForIndividualInputOptions() { public constructor(private fb: FormBuilder) { this.form = this.fb.group({ - selectOne: ["1"] + checkboxOne: [""], + checkboxTwo: [""] }); } } @@ -57,18 +56,16 @@ export default function IncludeDescriptionsForIndividualInputOptions() { allowCopy={true} code={` - - - - Use the account associated with the business - - - - - If you don't have a Alberta.ca login, you can create one - - - + + + Use the account associated with the business + + + + + If you don't have a Alberta.ca login, you can create one + + `} /> @@ -82,18 +79,20 @@ export default function IncludeDescriptionsForIndividualInputOptions() { allowCopy={true} code={` - - - - + + `} /> @@ -106,36 +105,40 @@ export default function IncludeDescriptionsForIndividualInputOptions() { allowCopy={true} code={` - - - - + + `} /> )} - - - - + + ) diff --git a/src/examples/review-and-action.tsx b/src/examples/review-and-action.tsx index 79d5b8f9d..e43cb057d 100644 --- a/src/examples/review-and-action.tsx +++ b/src/examples/review-and-action.tsx @@ -6,7 +6,7 @@ import { GoabContainer, GoabDropdown, GoabDropdownItem, GoabFormItem, GoabGrid, - GoabRadioGroup, GoabRadioItem, GoabTextarea + GoabRadioGroup, GoabRadioItem, GoabTextArea } from "@abgov/react-components"; import { useContext } from "react"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; @@ -170,7 +170,7 @@ export const ReviewAndAction = () => { - {}} /> + {}} /> {}}> diff --git a/src/routes/components/TextArea.tsx b/src/routes/components/TextArea.tsx index 3d18a5eb2..b1aa0e960 100644 --- a/src/routes/components/TextArea.tsx +++ b/src/routes/components/TextArea.tsx @@ -5,7 +5,7 @@ import { ComponentProperty, } from "@components/component-properties/ComponentProperties.tsx"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; -import { GoabBadge, GoabFormItem, GoabTab, GoabTabs, GoabTextarea } from "@abgov/react-components"; +import { GoabBadge, GoabFormItem, GoabTab, GoabTabs, GoabTextArea } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { useSandboxFormItem } from "@hooks/useSandboxFormItem.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; @@ -517,7 +517,7 @@ export default function TextAreaPage() { )}
- - handleChange(event.name, event.value) } rows={ 6 } width="90%" error={ !!expectedError } /> + handleChange(event.name, event.value) } rows={ 6 } width="90%" error={ !!expectedError } /> - handleChange(event.name, event.value) } rows={ 6 } width="90%" error={ !!actualError } /> + handleChange(event.name, event.value) } rows={ 6 } width="90%" error={ !!actualError } /> - handleChange(event.name, event.value) } rows={ 6 } width="90%" error={ !!replicationError } /> + handleChange(event.name, event.value) } rows={ 6 } width="90%" error={ !!replicationError } /> - handleChange(event.name, event.value) } rows={ 6 } width="90%" /> + handleChange(event.name, event.value) } rows={ 6 } width="90%" /> Submit bug report From f96c66090fbe2d38e276aee4a26757aaeb20d690 Mon Sep 17 00:00:00 2001 From: Dustin Nielsen Date: Mon, 24 Nov 2025 16:31:59 -0700 Subject: [PATCH 2/4] fix(#2579,#3202): Removed an unused function --- src/examples/include-a-link-in-the-helper-text-of-an-option.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/examples/include-a-link-in-the-helper-text-of-an-option.tsx b/src/examples/include-a-link-in-the-helper-text-of-an-option.tsx index df2fce271..5b7e18747 100644 --- a/src/examples/include-a-link-in-the-helper-text-of-an-option.tsx +++ b/src/examples/include-a-link-in-the-helper-text-of-an-option.tsx @@ -6,8 +6,6 @@ import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; export const IncludeALinkInTheHelperTextOfAnOption = () => { const {version} = useContext(LanguageVersionContext); - const noop = () => { - }; return ( <> From 07baddce2fcba62e09eaa77df1342ef98c06a985 Mon Sep 17 00:00:00 2001 From: Dustin Nielsen Date: Tue, 25 Nov 2025 15:06:17 -0700 Subject: [PATCH 3/4] fix(#2579,#3202): Updated serialization of the TextArea component for Angular --- src/components/sandbox/AngularSerializer.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/sandbox/AngularSerializer.ts b/src/components/sandbox/AngularSerializer.ts index 96f837288..157eda398 100644 --- a/src/components/sandbox/AngularSerializer.ts +++ b/src/components/sandbox/AngularSerializer.ts @@ -94,6 +94,9 @@ export class AngularSerializer extends BaseSerializer implements Serializer { if (tail === "OneColumnLayout" && this.version === "new") { tail = "ColumnLayout"; } + if (tail === "TextArea" && this.version === "new") { + tail = "Textarea" + } return `${this.version === "old" ? "goa" : "goab"}-${this.dasherize(tail)}`; } From db9f9bedf66f2a6f012f9ba5d4eac44c79fbd946 Mon Sep 17 00:00:00 2001 From: Dustin Nielsen Date: Tue, 25 Nov 2025 16:05:40 -0700 Subject: [PATCH 4/4] fix(#2579,#3202): Updated reactive serializer as well --- src/components/sandbox/AngularReactiveSerializer.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/sandbox/AngularReactiveSerializer.ts b/src/components/sandbox/AngularReactiveSerializer.ts index 81314ffbe..9ed0cf6a9 100644 --- a/src/components/sandbox/AngularReactiveSerializer.ts +++ b/src/components/sandbox/AngularReactiveSerializer.ts @@ -102,7 +102,11 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali } const currentPrefix = "Goab"; const oldPrefix = "goa"; - const tail = name.replace(currentPrefix, ""); + let tail = name.replace(currentPrefix, ""); + + if (tail === "TextArea" && this.version === "new") { + tail = "Textarea" + } if (this.version === "old") { return `${oldPrefix}-${this.dasherize(tail)}`;