From 8fece28b5739f875ff42293566a25d7ba7dd217c Mon Sep 17 00:00:00 2001 From: Eric Hoff Date: Tue, 18 Nov 2025 15:07:50 -0700 Subject: [PATCH 1/5] feat(#3189): Added width documentation --- src/routes/components/DatePicker.tsx | 161 ++++++++++++++++----------- 1 file changed, 97 insertions(+), 64 deletions(-) diff --git a/src/routes/components/DatePicker.tsx b/src/routes/components/DatePicker.tsx index 668f5a96a..e7c3cf09d 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,11 @@ export default function DatePickerPage() { defaultValue: "5 years forward", description: "Maximum date value allowed. Only used for calendar type.", }, + { + name: "width", + type: "string | undefined", + description: "Set the width of the date text field.", + }, { name: "error", type: "boolean", @@ -197,7 +212,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 +234,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 +397,7 @@ export default function DatePickerPage() { Examples - } - > + }> )} From 071f73661dc00a208f41b510d4558c1535955fb6 Mon Sep 17 00:00:00 2001 From: Eric Hoff Date: Tue, 18 Nov 2025 15:54:56 -0700 Subject: [PATCH 2/5] feat(#3189): Update packages so DatePicker width works as expected --- package-lock.json | 36 ++++++++++++++++++---------- package.json | 6 ++--- src/routes/components/DatePicker.tsx | 3 ++- 3 files changed, 29 insertions(+), 16 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 e7c3cf09d..ced1a988a 100644 --- a/src/routes/components/DatePicker.tsx +++ b/src/routes/components/DatePicker.tsx @@ -244,7 +244,8 @@ export default function DatePickerPage() { formItemProperties={formItemBindings} onChange={onSandboxChange} onChangeFormItemBindings={onFormItemChange} - flags={version === "old" ? ["reactive"] : ["reactive", "template-driven", "event"]}> + flags={version === "old" ? ["reactive"] : ["reactive", "template-driven", "event"]} + fullWidth> {/*Angular*/} {version === "old" && ( Date: Mon, 24 Nov 2025 16:48:14 -0700 Subject: [PATCH 3/5] feat(#3189): Update documentation to include defaults --- src/routes/components/DatePicker.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/routes/components/DatePicker.tsx b/src/routes/components/DatePicker.tsx index ced1a988a..1fc739136 100644 --- a/src/routes/components/DatePicker.tsx +++ b/src/routes/components/DatePicker.tsx @@ -187,7 +187,9 @@ export default function DatePickerPage() { { name: "width", type: "string | undefined", - description: "Set the width of the date text field.", + defaultValue: "Defaults to 16ch.", + description: + "Set the width of the date text field. Supports all CSS units, including %, px, em, rem, and ch.", }, { name: "error", @@ -244,8 +246,7 @@ export default function DatePickerPage() { formItemProperties={formItemBindings} onChange={onSandboxChange} onChangeFormItemBindings={onFormItemChange} - flags={version === "old" ? ["reactive"] : ["reactive", "template-driven", "event"]} - fullWidth> + flags={version === "old" ? ["reactive"] : ["reactive", "template-driven", "event"]}> {/*Angular*/} {version === "old" && ( Date: Mon, 24 Nov 2025 16:53:21 -0700 Subject: [PATCH 4/5] feat(#3189): Remove extra period --- src/routes/components/DatePicker.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/components/DatePicker.tsx b/src/routes/components/DatePicker.tsx index 1fc739136..82be0b035 100644 --- a/src/routes/components/DatePicker.tsx +++ b/src/routes/components/DatePicker.tsx @@ -187,9 +187,9 @@ export default function DatePickerPage() { { name: "width", type: "string | undefined", - defaultValue: "Defaults to 16ch.", + defaultValue: "Defaults to 16ch", description: - "Set the width of the date text field. Supports all CSS units, including %, px, em, rem, and ch.", + "Set the width of the date text field. Supports all valid CSS units, including %, px, em, rem, and ch.", }, { name: "error", From db63ecfb7548f79516198b0a9ed9f51864934562 Mon Sep 17 00:00:00 2001 From: Eric Hoff Date: Mon, 24 Nov 2025 16:59:39 -0700 Subject: [PATCH 5/5] feat(#3189): Remove extra content --- src/routes/components/DatePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/components/DatePicker.tsx b/src/routes/components/DatePicker.tsx index 82be0b035..e7fa0f57d 100644 --- a/src/routes/components/DatePicker.tsx +++ b/src/routes/components/DatePicker.tsx @@ -187,7 +187,7 @@ export default function DatePickerPage() { { name: "width", type: "string | undefined", - defaultValue: "Defaults to 16ch", + defaultValue: "16ch", description: "Set the width of the date text field. Supports all valid CSS units, including %, px, em, rem, and ch.", },