From 86f55c7d14f32c3ba26f021e64b9546821d5cbe1 Mon Sep 17 00:00:00 2001 From: syedszeeshan <47701214+syedszeeshan@users.noreply.github.com> Date: Fri, 31 Oct 2025 14:45:31 -0400 Subject: [PATCH 01/10] fix(#3110): docs relpace ngfor sitewide --- src/examples/add-a-filter-chip.tsx | 26 +-- src/examples/compact-buttons-in-a-table.tsx | 52 +++--- ...mically-add-an-item-to-a-dropdown-list.tsx | 26 +-- ...ically-change-items-in-a-dropdown-list.tsx | 38 ++-- src/examples/filter-data-in-a-table.tsx | 62 +++--- src/examples/multiple-actions-in-a-table.tsx | 12 +- src/examples/popover/TablePopover.tsx | 15 +- src/examples/remove-a-filter.tsx | 26 +-- .../set-a-specific-tab-to-be-active.tsx | 176 ++++++++++-------- ...how-different-views-of-data-in-a-table.tsx | 148 ++++++++------- .../show-number-of-results-per-page.tsx | 24 ++- src/examples/show-status-in-a-table.tsx | 28 +-- src/examples/sort-data-in-a-table.tsx | 24 ++- src/examples/type-to-create-a-new-filter.tsx | 34 ++-- src/routes/components/FileUploader.tsx | 42 +++-- src/routes/components/Pagination.tsx | 24 ++- 16 files changed, 417 insertions(+), 340 deletions(-) diff --git a/src/examples/add-a-filter-chip.tsx b/src/examples/add-a-filter-chip.tsx index b28cf82ab..58869f339 100644 --- a/src/examples/add-a-filter-chip.tsx +++ b/src/examples/add-a-filter-chip.tsx @@ -64,12 +64,13 @@ export const AddAFilterChip = () => { allowCopy={true} code={`
- - + @for (filter of activeFilters; track filter) { + + + }
Add Random Filter @@ -84,12 +85,13 @@ export const AddAFilterChip = () => { allowCopy={true} code={`
- - + @for (filter of activeFilters; track filter) { + + + }
Add Random Filter diff --git a/src/examples/compact-buttons-in-a-table.tsx b/src/examples/compact-buttons-in-a-table.tsx index 606f73411..655acce02 100644 --- a/src/examples/compact-buttons-in-a-table.tsx +++ b/src/examples/compact-buttons-in-a-table.tsx @@ -359,18 +359,20 @@ export const CompactButtonsInATable = () => { - - {{ user.firstName }} - {{ user.lastName }} - 12345667 - - - - View - - - - + @for (user of pageUsers; track $index) { + + {{ user.firstName }} + {{ user.lastName }} + 12345667 + + + + View + + + + + } @@ -400,18 +402,20 @@ export const CompactButtonsInATable = () => { - - {{ user.firstName }} - {{ user.lastName }} - 12345667 - - - - View - - - - + @for (user of pageUsers; track $index) { + + {{ user.firstName }} + {{ user.lastName }} + 12345667 + + + + View + + + + + } diff --git a/src/examples/dynamically-add-an-item-to-a-dropdown-list.tsx b/src/examples/dynamically-add-an-item-to-a-dropdown-list.tsx index a07ef32d7..0776c05ec 100644 --- a/src/examples/dynamically-add-an-item-to-a-dropdown-list.tsx +++ b/src/examples/dynamically-add-an-item-to-a-dropdown-list.tsx @@ -321,12 +321,13 @@ export const DynamicallyAddAnItemToADropdownList = () => { [value]="selectedTask" name="selectedTask" (_change)="onSelectedTaskChange($event)"> - - + @for (task of tasks; track trackByFn($index, task)) { + + + } @@ -382,12 +383,13 @@ export const DynamicallyAddAnItemToADropdownList = () => { [value]="selectedTask" name="selectedTask" (onChange)="onSelectedTaskChange($event)"> - - + @for (task of tasks; track trackByFn($index, task)) { + + + } diff --git a/src/examples/dynamically-change-items-in-a-dropdown-list.tsx b/src/examples/dynamically-change-items-in-a-dropdown-list.tsx index 54e083901..686f5b237 100644 --- a/src/examples/dynamically-change-items-in-a-dropdown-list.tsx +++ b/src/examples/dynamically-change-items-in-a-dropdown-list.tsx @@ -193,22 +193,25 @@ export const DynamicallyChangeItemsInADropdownList = () => { code={`
- - + } - + @for (child of children; track generateUniqueKey($index, child)) { + + } @@ -226,20 +229,23 @@ export const DynamicallyChangeItemsInADropdownList = () => { - + @for (parent of parents; track parent) { + + } - + @for (child of children; track generateUniqueKey($index, child)) { + + } diff --git a/src/examples/filter-data-in-a-table.tsx b/src/examples/filter-data-in-a-table.tsx index c1036e1e5..9169afe58 100644 --- a/src/examples/filter-data-in-a-table.tsx +++ b/src/examples/filter-data-in-a-table.tsx @@ -417,13 +417,14 @@ export const FilterDataInATable = () => { Filter: - - + @for (typedChip of typedChips; track typedChip) { + + + } Clear all @@ -438,13 +439,15 @@ export const FilterDataInATable = () => { - - - - - Lorem ipsum - {{ u.key }} - + @for (u of filteredData; track u) { + + + + + Lorem ipsum + {{ u.key }} + + } @@ -855,13 +858,14 @@ export const FilterDataInATable = () => { Filter: - - + @for (typedChip of typedChips; track typedChip) { + + + } Clear all @@ -876,13 +880,15 @@ export const FilterDataInATable = () => { - - - - - Lorem ipsum - {{ u.key }} - + @for (u of filteredData; track u) { + + + + + Lorem ipsum + {{ u.key }} + + } diff --git a/src/examples/multiple-actions-in-a-table.tsx b/src/examples/multiple-actions-in-a-table.tsx index 161deea0b..af910b133 100644 --- a/src/examples/multiple-actions-in-a-table.tsx +++ b/src/examples/multiple-actions-in-a-table.tsx @@ -860,8 +860,8 @@ export default function MultipleActionsinATable() { - {pageUsers.map(user => ( - + @for (user of users; track $index) { + {{ user.text }} {{ user.number }} @@ -879,7 +879,7 @@ export default function MultipleActionsinATable() { - ))} + } @@ -1077,8 +1077,8 @@ export default function MultipleActionsinATable() { - {pageUsers.map(user => ( - + @for (user of users; track $index) { + {{ user.text }} {{ user.number }} @@ -1096,7 +1096,7 @@ export default function MultipleActionsinATable() { - ))} + } diff --git a/src/examples/popover/TablePopover.tsx b/src/examples/popover/TablePopover.tsx index b6d2ebcba..ffa0239bc 100644 --- a/src/examples/popover/TablePopover.tsx +++ b/src/examples/popover/TablePopover.tsx @@ -304,12 +304,15 @@ export const TablePopover = () => { Action - - - Lorem ipsum - 1234567890 - Action - + + @for (u of popoverValues; track u) { + + + Lorem ipsum + 1234567890 + Action + + } `} diff --git a/src/examples/remove-a-filter.tsx b/src/examples/remove-a-filter.tsx index 664bc5f5e..ae575cf78 100644 --- a/src/examples/remove-a-filter.tsx +++ b/src/examples/remove-a-filter.tsx @@ -36,12 +36,13 @@ export const RemoveAFilter = () => { tags="angular" allowCopy={true} code={` - - + @for (chip of chips; track chip) { + + + } `} /> )} @@ -51,12 +52,13 @@ export const RemoveAFilter = () => { tags="angular" allowCopy={true} code={` - - + @for (chip of chips; track chip) { + + + } `} /> )} diff --git a/src/examples/set-a-specific-tab-to-be-active.tsx b/src/examples/set-a-specific-tab-to-be-active.tsx index 3f005b8d3..0313d1c87 100644 --- a/src/examples/set-a-specific-tab-to-be-active.tsx +++ b/src/examples/set-a-specific-tab-to-be-active.tsx @@ -126,26 +126,30 @@ export const SetASpecificTabToBeActive = () => { - - - - - Lorem ipsum - 1234567890 - - Action - - - - - - - Lorem Ipsum - 1234567890 - - Action - - + @for (i of [0,1,2,3]; track i) { + + + + + Lorem ipsum + 1234567890 + + Action + + + } + @for (i of [0,1]; track i) { + + + + + Lorem Ipsum + 1234567890 + + Action + + + } @@ -161,16 +165,18 @@ export const SetASpecificTabToBeActive = () => { - - - - - Lorem ipsum - 1234567890 - - Action - - + @for (i of [0,1,2,3]; track i) { + + + + + Lorem ipsum + 1234567890 + + Action + + + } @@ -186,16 +192,18 @@ export const SetASpecificTabToBeActive = () => { - - - - - Lorem Ipsum - 1234567890 - - Action - - + @for (i of [0,1]; track i) { + + + + + Lorem Ipsum + 1234567890 + + Action + + + } @@ -220,26 +228,30 @@ export const SetASpecificTabToBeActive = () => { - - - - - Lorem ipsum - 1234567890 - - Action - - - - - - - Lorem Ipsum - 1234567890 - - Action - - + @for (i of [0,1,2,3]; track i) { + + + + + Lorem ipsum + 1234567890 + + Action + + + } + @for (i of [0,1]; track i) { + + + + + Lorem Ipsum + 1234567890 + + Action + + + } @@ -255,16 +267,18 @@ export const SetASpecificTabToBeActive = () => { - - - - - Lorem ipsum - 1234567890 - - Action - - + @for (i of [0,1,2,3]; track i) { + + + + + Lorem ipsum + 1234567890 + + Action + + + } @@ -280,16 +294,18 @@ export const SetASpecificTabToBeActive = () => { - - - - - Lorem Ipsum - 1234567890 - - Action - - + @for (i of [0,1]; track i) { + + + + + Lorem Ipsum + 1234567890 + + Action + + + } diff --git a/src/examples/show-different-views-of-data-in-a-table.tsx b/src/examples/show-different-views-of-data-in-a-table.tsx index 446867320..964615f82 100644 --- a/src/examples/show-different-views-of-data-in-a-table.tsx +++ b/src/examples/show-different-views-of-data-in-a-table.tsx @@ -126,26 +126,30 @@ export const ShowDifferentViewsOfDataInATable = () => { - - - - - Lorem ipsum - 1234567890 - - Action - - - - - - - Lorem Ipsum - 1234567890 - - Action - - + @for (i of [0,1,2,3]; track i) { + + + + + Lorem ipsum + 1234567890 + + Action + + + } + @for (i of [0,1]; track i) { + + + + + Lorem Ipsum + 1234567890 + + Action + + + } @@ -161,16 +165,18 @@ export const ShowDifferentViewsOfDataInATable = () => { - - - - - Lorem ipsum - 1234567890 - - Action - - + @for (i of [0,1,2,3]; track i) { + + + + + Lorem ipsum + 1234567890 + + Action + + + } @@ -186,16 +192,18 @@ export const ShowDifferentViewsOfDataInATable = () => { - - - - - Lorem Ipsum - 1234567890 - - Action - - + @for (i of [0,1]; track i) { + + + + + Lorem Ipsum + 1234567890 + + Action + + + } @@ -219,18 +227,22 @@ export const ShowDifferentViewsOfDataInATable = () => { - - - Lorem ipsum - 1234567890 - Action - - - - Lorem Ipsum - 1234567890 - Action - + @for (i of [0,1,2,3]; track i) { + + + Lorem ipsum + 1234567890 + Action + + } + @for (i of [0,1]; track i) { + + + Lorem Ipsum + 1234567890 + Action + + } @@ -246,14 +258,16 @@ export const ShowDifferentViewsOfDataInATable = () => { - - - - - Lorem ipsum - 1234567890 - Action - + @for (i of [0,1,2,3]; track i) { + + + + + Lorem ipsum + 1234567890 + Action + + } @@ -269,12 +283,14 @@ export const ShowDifferentViewsOfDataInATable = () => { - - - Lorem Ipsum - 1234567890 - Action - + @for (i of [0,1]; track i) { + + + Lorem Ipsum + 1234567890 + Action + + } diff --git a/src/examples/show-number-of-results-per-page.tsx b/src/examples/show-number-of-results-per-page.tsx index 6764a0140..3e198c6f0 100644 --- a/src/examples/show-number-of-results-per-page.tsx +++ b/src/examples/show-number-of-results-per-page.tsx @@ -422,11 +422,13 @@ export default function ShowResultsPerPageExample() { - - {{ user.firstName }} - {{ user.lastName }} - {{ user.age }} - + @for (user of pageUsers; track $index) { + + {{ user.firstName }} + {{ user.lastName }} + {{ user.age }} + + } @@ -484,11 +486,13 @@ export default function ShowResultsPerPageExample() { - - {{ user.firstName }} - {{ user.lastName }} - {{ user.age }} - + @for (user of pageUsers; track $index) { + + {{ user.firstName }} + {{ user.lastName }} + {{ user.age }} + + } diff --git a/src/examples/show-status-in-a-table.tsx b/src/examples/show-status-in-a-table.tsx index 7b6f56499..d47d01491 100644 --- a/src/examples/show-status-in-a-table.tsx +++ b/src/examples/show-status-in-a-table.tsx @@ -134,7 +134,8 @@ export const ShowStatusInATable = () => { - + @for (badge of badgeValues; track badge) { + @@ -143,7 +144,8 @@ export const ShowStatusInATable = () => { Assign - + + } `} @@ -164,16 +166,18 @@ export const ShowStatusInATable = () => { - - - - - Lorem ipsum dolor sit amet consectetur. - 1234567890 - - Assign - - + @for (badge of badgeValues; track badge) { + + + + + Lorem ipsum dolor sit amet consectetur. + 1234567890 + + Assign + + + } `} diff --git a/src/examples/sort-data-in-a-table.tsx b/src/examples/sort-data-in-a-table.tsx index ad7fe3480..e49cb4ab5 100644 --- a/src/examples/sort-data-in-a-table.tsx +++ b/src/examples/sort-data-in-a-table.tsx @@ -315,11 +315,13 @@ export class TableComponent() { - - {{ user.firstName }} - {{ user.lastName }} - {{ user.age }} - + @for (user of users; track $index) { + + {{ user.firstName }} + {{ user.lastName }} + {{ user.age }} + + } `} @@ -392,11 +394,13 @@ export class TableComponent() { - - {{ user.firstName }} - {{ user.lastName }} - {{ user.age }} - + @for (user of users; track $index) { + + {{ user.firstName }} + {{ user.lastName }} + {{ user.age }} + + } `} diff --git a/src/examples/type-to-create-a-new-filter.tsx b/src/examples/type-to-create-a-new-filter.tsx index 520de6dd0..1a5a1b699 100644 --- a/src/examples/type-to-create-a-new-filter.tsx +++ b/src/examples/type-to-create-a-new-filter.tsx @@ -112,14 +112,15 @@ export class FilterChipComponent {
- - + @for (typedChip of typedChips; track typedChip) { + + + }
`} /> @@ -180,14 +181,15 @@ export class FilterChipComponent {
- - + @for (typedChip of typedChips; track typedChip) { + + + }
`} /> diff --git a/src/routes/components/FileUploader.tsx b/src/routes/components/FileUploader.tsx index b7371139e..c6e755801 100644 --- a/src/routes/components/FileUploader.tsx +++ b/src/routes/components/FileUploader.tsx @@ -404,16 +404,17 @@ export default function FileUploaderPage() { code={` - - + @for (upload of uploads; track $index) { + + + } `} />} @@ -468,16 +469,17 @@ export default function FileUploaderPage() { code={` - - + @for (upload of uploads; track $index) { + + + } `} />} diff --git a/src/routes/components/Pagination.tsx b/src/routes/components/Pagination.tsx index 89e4ca71c..04dc7227c 100644 --- a/src/routes/components/Pagination.tsx +++ b/src/routes/components/Pagination.tsx @@ -448,11 +448,13 @@ export default function PaginationPage() { - - {{ user.firstName }} - {{ user.lastName }} - {{ user.age }} - + @for (user of pageUsers; track $index) { + + {{ user.firstName }} + {{ user.lastName }} + {{ user.age }} + + } @@ -473,11 +475,13 @@ export default function PaginationPage() { - - {{ user.firstName }} - {{ user.lastName }} - {{ user.age }} - + @for (user of pageUsers; track $index) { + + {{ user.firstName }} + {{ user.lastName }} + {{ user.age }} + + } Date: Wed, 5 Nov 2025 17:42:20 -0500 Subject: [PATCH 02/10] fix(#3119): docs notification banner type property --- src/routes/components/Notificationbanner.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/components/Notificationbanner.tsx b/src/routes/components/Notificationbanner.tsx index 5925c0171..d0cbf0f42 100644 --- a/src/routes/components/Notificationbanner.tsx +++ b/src/routes/components/Notificationbanner.tsx @@ -63,7 +63,7 @@ export default function NotificationBannerPage() { const oldComponentProperties: ComponentProperty[] = [ { name: "type", - type: "success | important | information | emergency", + type: "important | information | event | emergency", description: "Define the context and colour of the badge", }, { @@ -108,7 +108,7 @@ export default function NotificationBannerPage() { const componentProperties: ComponentProperty[] = [ { name: "type", - type: "GoabNotificationType(success | important | information | emergency)", + type: "GoabNotificationType(important | information | event | emergency)", description: "Define the context and colour of the badge", defaultValue: "information" }, From aa918ac22a7a934e6d9c97e766bef60e8de4d022 Mon Sep 17 00:00:00 2001 From: Eric Hoff Date: Mon, 10 Nov 2025 16:39:09 -0700 Subject: [PATCH 03/10] fix: remove, add, and update team members and role names --- src/routes/get-started/Support.tsx | 70 ++++++++++++++++++++---------- 1 file changed, 48 insertions(+), 22 deletions(-) diff --git a/src/routes/get-started/Support.tsx b/src/routes/get-started/Support.tsx index 8e804de24..07a250d71 100644 --- a/src/routes/get-started/Support.tsx +++ b/src/routes/get-started/Support.tsx @@ -3,7 +3,8 @@ import { GoabFormItem, GoabRadioGroup, GoabRadioItem, - GoabSpacer, GoabText + GoabSpacer, + GoabText, } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent.tsx"; import { useState } from "react"; @@ -13,7 +14,7 @@ import { GoabRadioGroupOnChangeDetail } from "@abgov/ui-components-common"; export default function SupportPage() { let navigate = useNavigate(); - const [issueSelection, setIssueSelection] = useState("") + const [issueSelection, setIssueSelection] = useState(""); function bugOrFeature(value: string) { setIssueSelection(value); @@ -33,69 +34,94 @@ export default function SupportPage() { Get support - Get help from our team with using the design system, including components, guidelines, best practices, and accessibility. + Get help from our team with using the design system, including components, guidelines, best + practices, and accessibility.
-

- Raise an issue -

+

Raise an issue

- Let us know if you find a problem in the design system or if you need a new component or pattern. + Let us know if you find a problem in the design system or if you need a new component or + pattern.

- bugOrFeature(event.value)}> + bugOrFeature(event.value)}>
- Raise an issue + + Raise an issue +

Talk to us

Slack

- #design-system-support + + #design-system-support +
Reach out to the design system directly to ask a question and get support.

- #figma -
- A place for any Figma discussion. Share tips, tricks, techniques, ask questions, report issues. + + #figma + +
A place for any Figma discussion. Share tips, tricks, techniques, ask questions, + report issues.

Drop in Hours

(Tuesday and Friday 1:00 - 3:00pm MST)

- For service teams to get feedback on their usage of the design system, propose new components or changes - to existing components, ask any questions, and give feedback to the design system. + For service teams to get feedback on their usage of the design system, propose new + components or changes to existing components, ask any questions, and give feedback to the + design system.
- Book a time + + Book a time +

Design system team

- Product Owner + + Product owner +

Mark Elamatha | mark.elamatha@gov.ab.ca

- Digital architect and Lead developer + + Digital architect and Lead developer +

Chris Olsen | chris.olsen@gov.ab.ca

- Scrum master and DevOps + + Scrum master and DevOps +

Dustin Nielsen | dustin.nielsen@gov.ab.ca

- Developers + + Developers +

Vanessa Tran | vanessa.m.tran@gov.ab.ca
- Syed Zeeshan | syed.zeeshan@gov.ab.ca + Eric Hoff | eric.hoff@gov.ab.ca

- Designer + + Designer and Developer +

Thomas Jeffery | thomas.jeffery@gov.ab.ca +
+ Benji Franck | benji.franck@gov.ab.ca

From 6ad0ed799ac32a4debb95ac04d5d79910f04ebdc Mon Sep 17 00:00:00 2001 From: syedszeeshan <47701214+syedszeeshan@users.noreply.github.com> Date: Tue, 4 Nov 2025 15:40:26 -0500 Subject: [PATCH 04/10] fix(#3123): docs updat for badge icon type prop --- src/routes/components/Badge.tsx | 32 ++++++++++++++++++++++++-------- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/src/routes/components/Badge.tsx b/src/routes/components/Badge.tsx index 26f3ebf7b..c333ec495 100644 --- a/src/routes/components/Badge.tsx +++ b/src/routes/components/Badge.tsx @@ -11,10 +11,12 @@ import BadgeExamples from "@examples/badge/BadgeExamples.tsx"; import { GoabBadgeType } from "@abgov/ui-components-common"; import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; +import ICONS from "@routes/components/icons.json"; // == Page props == -const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=458-16984"; +const FIGMA_LINK = + "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=458-16984"; const componentName = "Badge"; const description = "Small labels which hold small amounts of information, system feedback, or states."; @@ -90,6 +92,13 @@ export default function BadgePage() { name: "icon", value: false, }, + { + label: "Icon type", + type: "combobox", + name: "iconType", + options: [""].concat(ICONS), + value: "", + }, { label: "Content", type: "string", @@ -166,6 +175,12 @@ export default function BadgePage() { description: "Includes an icon in the badge.", defaultValue: "false", }, + { + name: "iconType", + type: "GoabIconType", + description: + "Specifies which icon to display when icon is enabled. See the Icons component for available options.", + }, { name: "content", type: "string", @@ -202,17 +217,20 @@ export default function BadgePage() { relatedComponents={relatedComponents} figmaLink={FIGMA_LINK} githubLink="Badge" - /> -

Playground

+

+ Playground +

- - + - } - > + }> @@ -233,7 +250,6 @@ export default function BadgePage() { - From 86c5104c5b8509a25e1ce7523f6a50758a1d280c Mon Sep 17 00:00:00 2001 From: Dustin Nielsen Date: Fri, 21 Nov 2025 12:57:38 -0700 Subject: [PATCH 05/10] fix(#3146): Updated View content link on home page --- src/routes/home.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/home.tsx b/src/routes/home.tsx index ad45ba89b..af6fb70f5 100644 --- a/src/routes/home.tsx +++ b/src/routes/home.tsx @@ -54,7 +54,7 @@ const HomePage = () => { Date: Mon, 24 Nov 2025 16:27:13 -0700 Subject: [PATCH 06/10] 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 07/10] 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 0b5d46f3b31da6f802778263cdec47f6e61104b6 Mon Sep 17 00:00:00 2001 From: Eric Hoff Date: Tue, 25 Nov 2025 10:32:44 -0700 Subject: [PATCH 08/10] feat(#3189) Add width documentation for DatePicker (#455) * feat(#3189): Added width documentation * feat(#3189): Update packages so DatePicker width works as expected * feat(#3189): Update documentation to include defaults * feat(#3189): Remove extra period * feat(#3189): Remove extra content --- package-lock.json | 36 ++++-- package.json | 6 +- src/routes/components/DatePicker.tsx | 163 ++++++++++++++++----------- 3 files changed, 126 insertions(+), 79 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9ad951bc5..4633cda17 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,9 @@ "name": "code-sandbox", "version": "0.0.0", "dependencies": { - "@abgov/react-components": "6.9.0-alpha.2", - "@abgov/ui-components-common": "1.9.0-alpha.1", - "@abgov/web-components": "1.39.0-alpha.2", + "@abgov/react-components": "6.9.3-next.1", + "@abgov/ui-components-common": "1.9.1-next.1", + "@abgov/web-components": "1.39.3-next.1", "@faker-js/faker": "^8.3.1", "highlight.js": "^11.8.0", "js-cookie": "^3.0.5", @@ -68,9 +68,10 @@ } }, "node_modules/@abgov/react-components": { - "version": "6.9.0-alpha.2", - "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-6.9.0-alpha.2.tgz", - "integrity": "sha512-mBlGM/u/wsHLTPpZxiVhdES9Ra+Hj6JaVGzQuWm3JI+Jqz5wwCRLeGzLZD03fAlfnEhMshXpPuKtQxphVLQNPg==", + "version": "6.9.3-next.1", + "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-6.9.3-next.1.tgz", + "integrity": "sha512-hbiS5eogLknYPdpojyy8BqocIojArORB45d9SLC7D4tQuxUD1mDF2qcE5Z/Bbtvgt8OmKipbsCK2N7Ba5uRLgg==", + "license": "Apache-2.0", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", @@ -78,14 +79,16 @@ } }, "node_modules/@abgov/ui-components-common": { - "version": "1.9.0-alpha.1", - "resolved": "https://registry.npmjs.org/@abgov/ui-components-common/-/ui-components-common-1.9.0-alpha.1.tgz", - "integrity": "sha512-5ZSV7XuVJ+NMNCJd9LTQzAGwLERGUig/L1WlIn+1n0OOxonYo4df4jhinj2VyJRQ/XiNYa1vYlh59NRlAyu8pg==" + "version": "1.9.1-next.1", + "resolved": "https://registry.npmjs.org/@abgov/ui-components-common/-/ui-components-common-1.9.1-next.1.tgz", + "integrity": "sha512-OGUR24MKznHc7alzqro1tQgc9VGdU2UEruCxXeufv5vEeh4PJHIqyk4o+BEEvgJ524Kyl+WyYq+pWDeDqyMV5Q==", + "license": "Apache-2.0" }, "node_modules/@abgov/web-components": { - "version": "1.39.0-alpha.2", - "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.39.0-alpha.2.tgz", - "integrity": "sha512-eY66yYlJTkqoDDQWj6p0rcywcjvwExa6mDJoBpVwp325Guki10l59xUeC78WwYaVTFZP7nmTB1OXKuV3+Vnkhg==" + "version": "1.39.3-next.1", + "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.39.3-next.1.tgz", + "integrity": "sha512-+K2H871jm9/AOCwddqinQkiWepj7zxPooRLNCOtON4DTgDnk3Lz/B6BDcDfjRvD1DF4ui4KaZHC5N2qvftYogg==", + "license": "Apache-2.0" }, "node_modules/@esbuild/aix-ppc64": { "version": "0.21.5", @@ -697,6 +700,7 @@ "version": "6.1.2", "resolved": "https://registry.npmjs.org/@octokit/core/-/core-6.1.2.tgz", "integrity": "sha512-hEb7Ma4cGJGEUNOAVmyfdB/3WirWMg5hDuNFVejGEDFqupeOysLc2sG6HJxY2etBp5YQu5Wtxwi020jS9xlUwg==", + "peer": true, "dependencies": { "@octokit/auth-token": "^5.0.0", "@octokit/graphql": "^8.0.0", @@ -1415,6 +1419,7 @@ "version": "18.2.67", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.67.tgz", "integrity": "sha512-vkIE2vTIMHQ/xL0rgmuoECBCkZFZeHr49HeWSc24AptMbNRo7pwSBvj73rlJJs9fGKj0koS+V7kQB1jHS0uCgw==", + "peer": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -1501,6 +1506,7 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz", "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==", "dev": true, + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "5.62.0", "@typescript-eslint/types": "5.62.0", @@ -1673,6 +1679,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", "dev": true, + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1952,6 +1959,7 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz", "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==", "dev": true, + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -2869,6 +2877,7 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -2880,6 +2889,7 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" @@ -3210,6 +3220,7 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz", "integrity": "sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==", "dev": true, + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -3254,6 +3265,7 @@ "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.43", diff --git a/package.json b/package.json index c4e5befb4..cfaee2ed4 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,9 @@ "prettier": "npx prettier . --write" }, "dependencies": { - "@abgov/react-components": "6.9.0-alpha.2", - "@abgov/ui-components-common": "1.9.0-alpha.1", - "@abgov/web-components": "1.39.0-alpha.2", + "@abgov/react-components": "6.9.3-next.1", + "@abgov/ui-components-common": "1.9.1-next.1", + "@abgov/web-components": "1.39.3-next.1", "@faker-js/faker": "^8.3.1", "highlight.js": "^11.8.0", "js-cookie": "^3.0.5", diff --git a/src/routes/components/DatePicker.tsx b/src/routes/components/DatePicker.tsx index 668f5a96a..e7fa0f57d 100644 --- a/src/routes/components/DatePicker.tsx +++ b/src/routes/components/DatePicker.tsx @@ -19,30 +19,34 @@ import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { GoabDatePickerOnChangeDetail } from "@abgov/ui-components-common"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; -import { LegacyMarginProperty, MarginProperty } from "@components/component-properties/common-properties.ts"; +import { + LegacyMarginProperty, + MarginProperty, +} from "@components/component-properties/common-properties.ts"; import { DatePickerExamples } from "@examples/date-picker/DatePickerExamples.tsx"; import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; // == Page props == -const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=33054-33175"; +const FIGMA_LINK = + "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=33054-33175"; const componentName = "Date picker"; const category = Category.INPUTS_AND_ACTIONS; const relatedComponents = [ { link: "/content/date-format", name: "Date format" }, - { link: "/components/form-item", name: "Form item" } + { link: "/components/form-item", name: "Form item" }, ]; const description = "Lets users select a date through a calendar without the need to manually type it in a field."; type ComponentPropsType = GoabDatePickerProps; type CastingType = { [key: string]: unknown; - onChange: (event: GoabDatePickerOnChangeDetail)=> void; + onChange: (event: GoabDatePickerOnChangeDetail) => void; }; export default function DatePickerPage() { - const {version} = useContext(LanguageVersionContext); + const { version } = useContext(LanguageVersionContext); const [componentProps, setComponentProps] = useState({ onChange: () => {}, }); @@ -70,6 +74,12 @@ export default function DatePickerPage() { name: "disabled", value: false, }, + { + label: "Width", + type: "string", + name: "width", + value: "", + }, ]); useEffect(() => { @@ -86,7 +96,7 @@ export default function DatePickerPage() { options: ["", "calendar", "input"], value: "", defaultValue: "calendar", - } + }, ]; } } else { @@ -174,6 +184,13 @@ export default function DatePickerPage() { defaultValue: "5 years forward", description: "Maximum date value allowed. Only used for calendar type.", }, + { + name: "width", + type: "string | undefined", + defaultValue: "16ch", + description: + "Set the width of the date text field. Supports all valid CSS units, including %, px, em, rem, and ch.", + }, { name: "error", type: "boolean", @@ -197,7 +214,7 @@ export default function DatePickerPage() { name: "onChange", type: "(event: GoabDatePickerOnChangeDetail) => void", description: "Function to call when the date changes.", - } + }, ]; function onSandboxChange(bindings: ComponentBinding[], props: Record) { @@ -219,23 +236,24 @@ export default function DatePickerPage() { /> - -

Playground

+

+ Playground +

- {/*Angular*/} - {version === "old" && } + /> + )} - {version === "new" && } + /> + )} - {version === "old" && } + /> + )} - {version === "new" && } + /> + )} - {version === "new" && } + /> + )} {/*React*/} - {version === "old" && } + /> + )} - {version === "new" && } + /> + )} - + - - - + {version === "new" && ( + <> Examples - } - > + }> )} @@ -363,8 +399,7 @@ export default function DatePickerPage() { Examples - } - > + }> )} From 07baddce2fcba62e09eaa77df1342ef98c06a985 Mon Sep 17 00:00:00 2001 From: Dustin Nielsen Date: Tue, 25 Nov 2025 15:06:17 -0700 Subject: [PATCH 09/10] 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 10/10] 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)}`;