Skip to content

fix(#2579,#3202): Updated GoabTextarea and switch checkbox and radio … #458

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

Merged
chrisolsen merged 4 commits into from
Nov 26, 2025
Merged

fix(#2579,#3202): Updated GoabTextarea and switch checkbox and radio … #458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
889c3da
fix(#2579,#3202): Updated GoabTextarea and switch checkbox and radio …
ArakTaiRoth Nov 24, 2025
f96c660
fix(#2579,#3202): Removed an unused function
ArakTaiRoth Nov 24, 2025
07baddc
fix(#2579,#3202): Updated serialization of the TextArea component for…
ArakTaiRoth Nov 25, 2025
db9f9be
fix(#2579,#3202): Updated reactive serializer as well
ArakTaiRoth Nov 25, 2025
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
6 changes: 5 additions & 1 deletion src/components/sandbox/AngularReactiveSerializer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}`;
Expand Down
3 changes: 3 additions & 0 deletions src/components/sandbox/AngularSerializer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}`;
}

Expand Down
6 changes: 3 additions & 3 deletions src/examples/add-another-item-in-a-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -66,12 +66,12 @@ export const AddAnotherItemInAModal = () => {
name="name"></GoabInput>
</GoabFormItem>
<GoabFormItem label="Description" mt="xs">
<GoabTextarea
<GoabTextArea
name="description"
width="80%"
rows={2}
onChange={onChangeDescription}
value={description}></GoabTextarea>
value={description}></GoabTextArea>
</GoabFormItem>
</GoabModal>
</GoabContainer>
Expand Down
4 changes: 2 additions & 2 deletions src/examples/ask-a-long-answer-question-with-a-maximum-word-count.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Sandbox } from "@components/sandbox";
import {
GoabFormItem,
GoabTextarea
GoabTextArea
} from "@abgov/react-components";

export const AskALongAnswerQuestionWithAMaximumWordCount = () => {
Expand All @@ -13,7 +13,7 @@ export const AskALongAnswerQuestionWithAMaximumWordCount = () => {
<GoabFormItem
label="Provide more detail"
helpText="Do not include personal or financial information, like your National Insurance number or credit card details.">
<GoabTextarea name="program" onChange={noop} width="100%" rows={6} maxCount={500} countBy={"word"} />
<GoabTextArea name="program" onChange={noop} width="100%" rows={6} maxCount={500} countBy={"word"} />
</GoabFormItem>

</Sandbox>
Expand Down
4 changes: 2 additions & 2 deletions src/examples/give-context-before-asking-a-long-answer-question.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -44,7 +44,7 @@ export const GiveContextBeforeAskingALongAnswerQuestion = () => {
<GoabFormItem
label="Provide details about your situation"
helpText="Include specific details to help us answer your question quickly.">
<GoabTextarea name="program" onChange={noop} maxCount={400} countBy={"character"} />
<GoabTextArea name="program" onChange={noop} maxCount={400} countBy={"character"} />
</GoabFormItem>
</form>
<GoabDetails mt={"m"} heading="What kind of information is useful?">
Expand Down
106 changes: 57 additions & 49 deletions src/examples/include-a-link-in-the-helper-text-of-an-option.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
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";
Expand All @@ -17,31 +17,35 @@ export const IncludeALinkInTheHelperTextOfAnOption = () => {
tags="angular"
allowCopy={true}
code={`
<goa-form-item label="How would you like to be contacted?">
<goa-checkbox checked="true" name="optionOne" text="Email">
<span slot="description">Help text with a <a href="#">link</a>.</span>
</goa-checkbox>
<goa-checkbox checked="false" name="optionTwo" text="Phone" />
<goa-checkbox checked="false" name="optionThree" text="Text message" />
</goa-form-item>
`}
<goa-form-item label="How would you like to be contacted?">
<goa-radio-group name="contactOption">
<goa-radio-item value="1" label="Email">
<span slot="description">Help text with a <a href="#">link</a>.</span>
</goa-radio-item>
<goa-radio-item value="2" text="Phone" />
<goa-radio-item value="3" text="Text message" />
</goa-radio-group>
</goa-form-item>
`}
/>}

{version === "new" && <CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
<goab-form-item label="How would you like to be contacted?">
<goab-checkbox [checked]="true" name="optionOne" text="Email" [description]="descriptionTemplate">
<ng-template #descriptionTemplate>
<span>Help text with a <a href="#">link</a>.</span>
</ng-template>
</goab-checkbox>
<goab-checkbox [checked]="false" name="optionTwo" text="Phone" />
<goab-checkbox [checked]="false" name="optionThree" text="Text message" />
</goab-form-item>
`}
<goab-form-item label="How would you like to be contacted?">
<goab-radio-group name="contactOption">
<goab-radio-item value="1" label="Email" [description]="descriptionTemplate">
<ng-template #descriptionTemplate>
<span>Help text with a <a href="#">link</a>.</span>
</ng-template>
</goab-radio-item>
<goab-radio-item value="2" text="Phone" />
<goab-radio-item value="3" text="Text message" />
</goab-radio-group>
</goab-form-item>
`}
/>}

{/*React*/}
Expand All @@ -50,46 +54,50 @@ export const IncludeALinkInTheHelperTextOfAnOption = () => {
tags="react"
allowCopy={true}
code={`
<GoAFormItem label="How would you like to be contacted?">
<GoACheckbox
checked={true}
name="optionOne"
text="Email"
description={<span>Help text with a <a href="#">link</a>.</span>}
/>
<GoACheckbox checked={false} name="optionTwo" text="Phone" />
<GoACheckbox checked={false} name="optionThree" text="Text message" />
</GoAFormItem>
`}
<GoAFormItem label="How would you like to be contacted?">
<GoARadioGroup name="contactOption">
<GoARadioItem
value="1"
label="Email"
description={<span>Help text with a <a href="#">link</a>.</span>}
/>
<GoARadioItem value="2" label="Phone" />
<GoARadioItem value="3" label="Text message" />
</GoARadioGroup>
</GoAFormItem>
`}
/>}

{version === "new" && <CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
<GoabFormItem label="How would you like to be contacted?">
<GoabCheckbox
checked={true}
name="optionOne"
text="Email"
description={<span>Help text with a <a href="#">link</a>.</span>}
/>
<GoabCheckbox checked={false} name="optionTwo" text="Phone" />
<GoabCheckbox checked={false} name="optionThree" text="Text message" />
</GoabFormItem>
`}
<GoabFormItem label="How would you like to be contacted?">
<GoabRadioGroup name="contactOption">
<GoabRadioItem
value="1"
label="Email"
description={<span>Help text with a <a href="#">link</a>.</span>}
/>
<GoabRadioItem value="2" label="Phone" />
<GoabRadioItem value="3" label="Text message" />
</GoabRadioGroup>
</GoabFormItem>
`}
/>}

<GoabFormItem label="How would you like to be contacted?">
<GoabCheckbox
checked={true}
name="optionOne"
text="Email"
description={<span>Help text with a <a href="#">link</a>.</span>}
/>
<GoabCheckbox checked={false} name="optionTwo" text="Phone" />
<GoabCheckbox checked={false} name="optionThree" text="Text message" />
<GoabRadioGroup name="contactOption">
<GoabRadioItem
name="optionOne"
value="1"
label="Email"
description={<span>Help text with a <a href="#">link</a>.</span>}
/>
<GoabRadioItem value="2" name="optionTwo" label="Phone" />
<GoabRadioItem value="3" name="optionThree" label="Text message" />
</GoabRadioGroup>
</GoabFormItem>
</Sandbox>
</>
Expand Down
119 changes: 61 additions & 58 deletions src/examples/include-descriptions-for-items-in-a-checkbox-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -19,14 +19,12 @@ export default function IncludeDescriptionsForIndividualInputOptions() {
allowCopy={true}
code={`
<goa-form-item label="How do you want to sign in?">
<goa-radio-group name="selectOne" (_change)="onChange($event)">
<goa-radio-item value="1" label="Sign in as a business">
<span slot="description">Use the account associated with the business</span>
</goa-radio-item>
<goa-radio-item value="2" label="Sign in as an individual">
<span slot="description">If you don't have a Alberta.ca login, you can create one</span>
</goa-radio-item>
</goa-radio-group>
<goa-checkbox text="Sign in as a business" (_change)="onChange($event)">
<span slot="description">Use the account associated with the business</span>
</goa-checkbox>
<goa-checkbox text="Sign in as an individual" (_change)="onChange($event)>
<span slot="description">If you don't have a Alberta.ca login, you can create one</span>
</goa-checkbox>
</goa-form-item>
`}
/>
Expand All @@ -42,7 +40,8 @@ export default function IncludeDescriptionsForIndividualInputOptions() {

public constructor(private fb: FormBuilder) {
this.form = this.fb.group({
selectOne: ["1"]
checkboxOne: [""],
checkboxTwo: [""]
});
}
}
Expand All @@ -57,18 +56,16 @@ export default function IncludeDescriptionsForIndividualInputOptions() {
allowCopy={true}
code={`
<goab-form-item label="How do you want to sign in?" [formGroup]="form">
<goab-radio-group name="selectOne" formControlName="selectOne">
<goab-radio-item value="1" label="Sign in as a business" [description]="optionOneDescription">
<ng-template #optionOneDescription>
Use the account associated with the business
</ng-template>
</goab-radio-item>
<goab-radio-item value="2" label="Sign in as an individual" [description]="optionTwoDescription">
<ng-template #optionTwoDescription>
If you don't have a Alberta.ca login, you can create one
</ng-template>
</goab-radio-item>
</goab-radio-group>
<goab-checkbox text="Sign in as a business" [description]="optionOneDescription" formControlName="checkboxOne">
<ng-template #optionOneDescription>
Use the account associated with the business
</ng-template>
</goab-checkbox>
<goab-checkbox text="Sign in as an individual" [description]="optionTwoDescription" formControlName="checkboxTwo">
<ng-template #optionTwoDescription>
If you don't have a Alberta.ca login, you can create one
</ng-template>
</goab-checkbox>
</goab-form-item>
`}
/>
Expand All @@ -82,18 +79,20 @@ export default function IncludeDescriptionsForIndividualInputOptions() {
allowCopy={true}
code={`
<GoAFormItem label="How do you want to sign in?">
<GoARadioGroup name="selectOne" onChange={onChange}>
<GoARadioItem
value="1"
label="Sign in as a business"
description="Use the account associated with the business"
/>
<GoARadioItem
value="2"
label="Sign in as an individual"
description="If you don't have a Alberta.ca login, you can create one"
/>
</GoARadioGroup>
<GoACheckbox
name="checkboxOne"
value="1"
text="Sign in as a business"
description="Use the account associated with the business"
onChange={onChange}
/>
<GoACheckbox
name="checkboxTwo"
value="2"
text="Sign in as an individual"
description="If you don't have a Alberta.ca login, you can create one"
onChange={onChange}
/>
</GoAFormItem>
`}
/>
Expand All @@ -106,36 +105,40 @@ export default function IncludeDescriptionsForIndividualInputOptions() {
allowCopy={true}
code={`
<GoabFormItem label="How do you want to sign in?">
<GoabRadioGroup name="selectOne" onChange={onChange}>
<GoabRadioItem
value="1"
label="Sign in as a business"
description="Use the account associated with the business"
/>
<GoabRadioItem
value="2"
label="Sign in as an individual"
description="If you don't have a Alberta.ca login, you can create one"
/>
</GoabRadioGroup>
<GoabCheckbox
name="checkboxOne"
value="1"
text="Sign in as a business"
description="Use the account associated with the business"
onChange={onChange}
/>
<GoabCheckbox
name="checkboxTwo
value="2"
text="Sign in as an individual"
description="If you don't have a Alberta.ca login, you can create one"
onChange={onChange}
/>
</GoabFormItem>
`}
/>
)}

<GoabFormItem label="How do you want to sign in?">
<GoabRadioGroup name="selectOne" onChange={noop}>
<GoabRadioItem
value="1"
label="Sign in as a business"
description="Use the account associated with the business"
/>
<GoabRadioItem
value="2"
label="Sign in as an individual"
description="If you don't have a Alberta.ca login, you can create one"
/>
</GoabRadioGroup>
<GoabCheckbox
name="checkboxOne"
value="1"
text="Sign in as a business"
description="Use the account associated with the business"
onChange={noop}
/>
<GoabCheckbox
name="checkboxTwo"
value="2"
text="Sign in as an individual"
description="If you don't have a Alberta.ca login, you can create one"
onChange={noop}
/>
</GoabFormItem>
</Sandbox>
)
Expand Down
Loading