From 822e041b9ea458a0b2de92fe088d66b7535ebf21 Mon Sep 17 00:00:00 2001
From: Miguel <miguel.soco@gov.ab.ca>
Date: Tue, 5 Aug 2025 14:10:08 -0600
Subject: [PATCH 1/2] feat(#2131): date picker - added "Choose a date" example

---
 src/examples/choose-a-date.tsx                | 231 ++++++++++++++++++
 .../date-picker/DatePickerExamples.tsx        |   7 +
 src/examples/reset-date-picker-field.tsx      | 156 ++++++------
 src/routes/components/DatePicker.tsx          |   2 +-
 4 files changed, 321 insertions(+), 75 deletions(-)
 create mode 100644 src/examples/choose-a-date.tsx

diff --git a/src/examples/choose-a-date.tsx b/src/examples/choose-a-date.tsx
new file mode 100644
index 000000000..6007fd35e
--- /dev/null
+++ b/src/examples/choose-a-date.tsx
@@ -0,0 +1,231 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabBlock, GoabButton, GoabDatePicker, GoabFormItem } from "@abgov/react-components";
+import { GoabDatePickerOnChangeDetail } from "@abgov/ui-components-common";
+import { useContext, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const TodayDatePickerField = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const [date, setDate] = useState<Date | undefined>();
+
+  const setNewDate = (value: Date | undefined) => {
+    setDate(value);
+  };
+
+  function setToday() {
+    const d = new Date();
+    d.setDate(d.getDate());
+
+    setDate(d);
+  }
+
+  return (
+      <Sandbox skipRender flags={version === "old" ? ["reactive"] : ["event"]}>
+        {/*React*/}
+        {version === "old" && <CodeSnippet
+          tags="react"
+          lang="typescript"
+          allowCopy={true}
+          code={`
+                    const [date, setDate] = useState<Date | undefined>();
+
+                    const setNewDate = (value: Date | undefined) => {
+                        setDate(value);
+                    };
+
+                    function setToday() {
+                        const d = new Date();
+                        d.setDate(d.getDate());
+
+                        setDate(d);
+                    }
+              `}
+        />}
+
+        {version === "old" && <CodeSnippet
+          tags="react"
+          lang="typescript"
+          allowCopy={true}
+          code={`
+                <GoABlock gap="s" alignment="end">
+                    <GoAFormItem label="Date Picker">
+                        <GoADatePicker
+                            name="item"
+                            value={date}
+                            onChange={(_, value) => setNewDate(value)}
+                        ></GoADatePicker>
+                    </GoAFormItem>
+                    <GoAButton type="tertiary" onClick={setToday} mr="l">
+                        Today
+                    </GoAButton>
+                </GoABlock>
+            `}
+        />}
+
+        {version === "new" && <CodeSnippet
+          tags="react"
+          lang="typescript"
+          allowCopy={true}
+          code={`
+                const [date, setDate] = useState<Date | undefined>();
+
+                const setNewDate = (value: Date | undefined) => {
+                    setDate(value);
+                };
+
+                function setToday() {
+                    const d = new Date();
+                    d.setDate(d.getDate());
+
+                    setDate(d);
+                }
+            `}
+        />}
+
+         {version === "new" && <CodeSnippet
+          tags="react"
+          lang="typescript"
+          allowCopy={true}
+          code={`
+                <GoabBlock gap="s" alignment="end">
+                    <GoabFormItem label="Date Picker">
+                        <GoabDatePicker
+                            name="item"
+                            value={date}
+                            onChange={(_, value) => setNewDate(value)}
+                        ></GoabDatePicker>
+                    </GoabFormItem>
+                    <GoabButton type="tertiary" onClick={setToday} mr="l">
+                        Today
+                    </GoabButton>
+                </GoabBlock>
+            `}
+        />}
+
+        {/*Angular*/}
+
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  export class DatePickerComponent {
+                    item = "";
+                    onChange(event: Event) {
+                      const value = (event as CustomEvent).detail.value;
+                      this.item = value;
+                    }
+
+                    setToday() {
+                      const d = new Date();
+                      this.item = (d.getDate()).toDateString();
+                    }
+                  }
+                `}
+        />}
+
+        {version === "old" && <CodeSnippet
+            lang="html"
+            tags="angular"
+            allowCopy={true}
+            code={`
+                <goa-block gap="s" alignment="end">
+                    <goa-form-item label="Date Picker">
+                        <goa-date-picker (_change)="onChange($event)" name="item" [value]="item"></goa-date-picker>
+                    </goa-form-item>
+                    <goa-button type="tertiary" (onClick)="setToday()" mr="l">
+                        Today
+                    </goa-button>
+                </goa-block>
+            `}
+        />}
+
+        {version === "old" && <CodeSnippet
+            tags={["angular", "reactive"]}
+            lang="typescript"
+            allowCopy={true}
+            code={`
+                export class DatePickerComponent {
+                    dateCtrl = new FormControl();
+
+                    setToday() {
+                        const d = new Date();
+                        d.setDate(d.getDate());
+                        this.dateCtrl.patchValue(d);
+                        console.log("setValue called: ", this.dateCtrl.value);
+                    }
+                }
+            `}
+        />}
+        {version === "old" && <CodeSnippet
+            tags={["angular", "reactive"]}
+            lang="typescript"
+            allowCopy={true}
+            code={`
+                <goa-block gap="s" alignment="end">
+                    <goa-form-item label="Date Picker">
+                        <goa-date-picker [formControl]="dateCtrl" [value]="dateCtrl.value" ngDefaultControl />
+                    </goa-form-item>
+                    <goa-button type="tertiary" (onClick)="setToday()" mr="l">
+                        Today
+                    </goa-button>
+                </goa-block>
+            `}
+        />}
+
+        {/*New version*/}
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  export class DatePickerComponent {
+                    item: Date|undefined = new Date();
+                    onChange(event: GoabDatePickerOnChangeDetail) {
+                      console.log(event.value);
+                      this.item = event.value as Date;
+                    }
+                    setToday() {
+                      const d = new Date();
+                      this.item = (d.getDate()).toDateString();
+                    }
+                  }
+                `}
+        />}
+
+        {version === "new" && <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                <goab-block gap="s" alignment="end">
+                    <goab-form-item label="Date Picker">
+                        <goab-date-picker
+                            name="item"
+                            [value]="item"
+                            (onChange)="onChange($event)"></goab-date-picker>
+                        </goab-form-item>
+                    <goab-button type="tertiary" (onClick)="setToday()" mr="l">
+                        Today
+                    </goab-button>
+                </goab-block>
+            `}
+        />}
+        <GoabBlock gap="s" alignment="end">
+            <GoabFormItem label="Date Picker">
+            <GoabDatePicker
+                name="item"
+                value={date}
+                onChange={(e: GoabDatePickerOnChangeDetail) => setNewDate(e.value as Date)}></GoabDatePicker>
+            </GoabFormItem>
+            <GoabButton type="tertiary" onClick={setToday} mr="l">
+                Today
+            </GoabButton>
+        </GoabBlock>
+
+      </Sandbox>
+  )
+}
+
+export default TodayDatePickerField;
diff --git a/src/examples/date-picker/DatePickerExamples.tsx b/src/examples/date-picker/DatePickerExamples.tsx
index 12e61da93..3829fdfbe 100644
--- a/src/examples/date-picker/DatePickerExamples.tsx
+++ b/src/examples/date-picker/DatePickerExamples.tsx
@@ -1,9 +1,16 @@
+import { TodayDatePickerField } from "@examples/choose-a-date.tsx";
 import { ResetDatePickerField } from "@examples/reset-date-picker-field.tsx";
 import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
 
 export const DatePickerExamples = () => {
   return (
     <>
+      <SandboxHeader
+        exampleTitle="Choose a date"
+        figmaExample="">
+      </SandboxHeader>
+      < TodayDatePickerField />    
+
       <SandboxHeader
         exampleTitle="Reset example"
         figmaExample="">
diff --git a/src/examples/reset-date-picker-field.tsx b/src/examples/reset-date-picker-field.tsx
index 009dca0f7..1c5a16bc4 100644
--- a/src/examples/reset-date-picker-field.tsx
+++ b/src/examples/reset-date-picker-field.tsx
@@ -24,50 +24,55 @@ export const ResetDatePickerField = () => {
     setDate(undefined);
   }
   return (
-      <Sandbox fullWidth skipRender flags={version === "old" ? ["reactive"] : ["event"]}>
+      <Sandbox skipRender flags={version === "old" ? ["reactive"] : ["event"]}>
         {/*React*/}
         {version === "old" && <CodeSnippet
           tags="react"
           lang="typescript"
           allowCopy={true}
           code={`
-                  export function Datepicker() {
-                    const [date, setDate] = useState<Date | undefined>();
+            const [date, setDate] = useState<Date | undefined>();
 
-                    const setNewDate = (value: Date | undefined) => {
-                      setDate(value);
-                    };
+            const setNewDate = (value: Date | undefined) => {
+              setDate(value);
+            };
 
-                    function setValue() {
-                      const d = new Date();
-                      d.setDate(d.getDate() - 7);
+            function setValue() {
+              const d = new Date();
+              d.setDate(d.getDate() - 7);
 
-                      setDate(d);
-                    }
+              setDate(d);
+            }
 
-                    function clearValue() {
-                      setDate(undefined);
-                    }
+            function clearValue() {
+              setDate(undefined);
+            }
+          `}
+        />}
 
-                    return (
-                      <>
-                        <GoAFormItem label="Item">
-                          <GoADatePicker
-                            name="item"
-                            value={date}
-                            onChange={(_, value) => setNewDate(value)}
-                            mb="xl"
-                          ></GoADatePicker>
-                        </GoAFormItem>
-                        
-                        <GoAButtonGroup mt={"xs"} alignment={"start"}>
-                          <GoAButton onClick={setValue} mr="l">Set Value</GoAButton>
-                          <GoAButton onClick={clearValue}>Clear Value</GoAButton>
-                        </GoAButtonGroup>
-                      </>
-                    );
-                  }
-              `}
+        {version === "old" && <CodeSnippet
+          tags="react"
+          lang="typescript"
+          allowCopy={true}
+          code={`
+            <GoAFormItem label="Item">
+              <GoADatePicker
+                name="item"
+                value={date}
+                onChange={(_, value) => setNewDate(value)}
+                mb="xl"
+              ></GoADatePicker>
+            </GoAFormItem>
+            
+            <GoAButtonGroup mt={"xs"} alignment={"start"}>
+              <GoAButton onClick={setValue} mr="2xs">
+                Set Value
+              </GoAButton>
+              <GoAButton onClick={clearValue} type="secondary">
+                Clear Value
+              </GoAButton>
+            </GoAButtonGroup>
+          `}
         />}
 
         {version === "new" && <CodeSnippet
@@ -75,44 +80,47 @@ export const ResetDatePickerField = () => {
           lang="typescript"
           allowCopy={true}
           code={`
-                  export function Datepicker() {
-                    const [date, setDate] = useState<Date | undefined>();
+            const [date, setDate] = useState<Date | undefined>();
 
-                    const setNewDate = (value: Date | undefined) => {
-                      setDate(value);
-                    };
+            const setNewDate = (value: Date | undefined) => {
+              setDate(value);
+            };
 
-                    function setValue() {
-                      const d = new Date();
-                      d.setDate(d.getDate() - 7);
+            function setValue() {
+              const d = new Date();
+              d.setDate(d.getDate() - 7);
 
-                      setDate(d);
-                    }
+              setDate(d);
+            }
 
-                    function clearValue() {
-                      setDate(undefined);
-                    }
+            function clearValue() {
+              setDate(undefined);
+            }
+          `}
+        />}
 
-                    return (
-                      <>
-                        <GoabFormItem label="Date Picker">
-                          <GoabDatePicker
-                            name="item"
-                            value={date}
-                            onChange={(e: GoabDatePickerOnChangeDetail) => setNewDate(e.value as Date)}
-                            mb="xl"></GoabDatePicker>
-                        </GoabFormItem>
-
-                        <GoabButtonGroup mt={"xs"} alignment={"start"}>
-                          <GoabButton onClick={setValue} mr="l">
-                            Set Value
-                          </GoabButton>
-                          <GoabButton onClick={clearValue}>Clear Value</GoabButton>
-                        </GoabButtonGroup>
-                      </>
-                    );
-                  }
-              `}
+        {version === "new" && <CodeSnippet
+          tags="react"
+          lang="typescript"
+          allowCopy={true}
+          code={`
+            <GoabFormItem label="Date Picker">
+              <GoabDatePicker
+                name="item"
+                value={date}
+                onChange={(e: GoabDatePickerOnChangeDetail) => setNewDate(e.value as Date)}
+                mb="xl"></GoabDatePicker>
+            </GoabFormItem>
+
+            <GoabButtonGroup mt={"xs"} alignment={"start"}>
+              <GoabButton onClick={setValue} mr="2xs">
+                Set Value
+              </GoabButton>
+              <GoabButton onClick={clearValue} type="secondary">
+                Clear Value
+              </GoabButton>
+            </GoabButtonGroup>
+          `}
         />}
 
         {/*Angular*/}
@@ -151,8 +159,8 @@ export const ResetDatePickerField = () => {
                   </goa-form-item>
 
                   <goa-button-group alignment="start" mt="xs">
-                    <goa-button (_click)="setValue()" mr="l">Set Value</goa-button>
-                    <goa-button (_click)="clearValue()">Clear Value</goa-button>
+                    <goa-button (_click)="setValue()" mr="2xs">Set Value</goa-button>
+                    <goa-button (_click)="clearValue()" type="secondary">Clear Value</goa-button>
                   </goa-button-group>
                 `}
         />}
@@ -189,8 +197,8 @@ export const ResetDatePickerField = () => {
                   </goa-form-item>
                   
                   <goa-button-group alignment="start" mt="xs">
-                    <goa-button (_click)="setValue()" mr="l">Set Value</goa-button>
-                    <goa-button (_click)="clearValue()">Clear Value</goa-button>
+                    <goa-button (_click)="setValue()" mr="2xs">Set Value</goa-button>
+                    <goa-button (_click)="clearValue()" type="secondary">Clear Value</goa-button>
                   </goa-button-group>
               `}
         />}
@@ -228,8 +236,8 @@ export const ResetDatePickerField = () => {
                   </goab-form-item>
 
                   <goab-button-group alignment="start" mt="xs">
-                    <goab-button (onClick)="setValue()" mr="l">Set Value</goab-button>
-                    <goab-button (onClick)="clearValue()">Clear Value</goab-button>
+                    <goab-button (onClick)="setValue()" mr="2xs">Set Value</goab-button>
+                    <goab-button (onClick)="clearValue()" type="secondary">Clear Value</goab-button>
                   </goab-button-group>
                 `}
         />}
@@ -243,10 +251,10 @@ export const ResetDatePickerField = () => {
         </GoabFormItem>
 
         <GoabButtonGroup mt={"xs"} alignment={"start"}>
-          <GoabButton onClick={setValue} mr="l">
+          <GoabButton onClick={setValue} mr="2xs">
             Set Value
           </GoabButton>
-          <GoabButton onClick={clearValue}>Clear Value</GoabButton>
+          <GoabButton onClick={clearValue} type="secondary">Clear Value</GoabButton>
         </GoabButtonGroup>
       </Sandbox>
   )
diff --git a/src/routes/components/DatePicker.tsx b/src/routes/components/DatePicker.tsx
index 694193bd8..921566c93 100644
--- a/src/routes/components/DatePicker.tsx
+++ b/src/routes/components/DatePicker.tsx
@@ -315,7 +315,7 @@ export default function DatePickerPage() {
             heading={
               <>
                 Examples
-                <GoabBadge type="information" content="1" />
+                <GoabBadge type="information" content="2" />
               </>
             }
           >

From 897a5c95ca253b5dc69ec1c42d75f6bf156b6cdb Mon Sep 17 00:00:00 2001
From: Miguel <miguel.soco@gov.ab.ca>
Date: Fri, 8 Aug 2025 12:50:34 -0600
Subject: [PATCH 2/2] feat(#2131): date picker - adjusted input labels for
 examples

---
 src/examples/choose-a-date.tsx           | 12 ++++++------
 src/examples/reset-date-picker-field.tsx | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/examples/choose-a-date.tsx b/src/examples/choose-a-date.tsx
index 6007fd35e..7c391ea88 100644
--- a/src/examples/choose-a-date.tsx
+++ b/src/examples/choose-a-date.tsx
@@ -49,7 +49,7 @@ export const TodayDatePickerField = () => {
           allowCopy={true}
           code={`
                 <GoABlock gap="s" alignment="end">
-                    <GoAFormItem label="Date Picker">
+                    <GoAFormItem label="Select a date">
                         <GoADatePicker
                             name="item"
                             value={date}
@@ -89,7 +89,7 @@ export const TodayDatePickerField = () => {
           allowCopy={true}
           code={`
                 <GoabBlock gap="s" alignment="end">
-                    <GoabFormItem label="Date Picker">
+                    <GoabFormItem label="Select a date">
                         <GoabDatePicker
                             name="item"
                             value={date}
@@ -131,7 +131,7 @@ export const TodayDatePickerField = () => {
             allowCopy={true}
             code={`
                 <goa-block gap="s" alignment="end">
-                    <goa-form-item label="Date Picker">
+                    <goa-form-item label="Select a date">
                         <goa-date-picker (_change)="onChange($event)" name="item" [value]="item"></goa-date-picker>
                     </goa-form-item>
                     <goa-button type="tertiary" (onClick)="setToday()" mr="l">
@@ -164,7 +164,7 @@ export const TodayDatePickerField = () => {
             allowCopy={true}
             code={`
                 <goa-block gap="s" alignment="end">
-                    <goa-form-item label="Date Picker">
+                    <goa-form-item label="Select a date">
                         <goa-date-picker [formControl]="dateCtrl" [value]="dateCtrl.value" ngDefaultControl />
                     </goa-form-item>
                     <goa-button type="tertiary" (onClick)="setToday()" mr="l">
@@ -200,7 +200,7 @@ export const TodayDatePickerField = () => {
           allowCopy={true}
           code={`
                 <goab-block gap="s" alignment="end">
-                    <goab-form-item label="Date Picker">
+                    <goab-form-item label="Select a date">
                         <goab-date-picker
                             name="item"
                             [value]="item"
@@ -213,7 +213,7 @@ export const TodayDatePickerField = () => {
             `}
         />}
         <GoabBlock gap="s" alignment="end">
-            <GoabFormItem label="Date Picker">
+            <GoabFormItem label="Select a date">
             <GoabDatePicker
                 name="item"
                 value={date}
diff --git a/src/examples/reset-date-picker-field.tsx b/src/examples/reset-date-picker-field.tsx
index 1c5a16bc4..1a33efa00 100644
--- a/src/examples/reset-date-picker-field.tsx
+++ b/src/examples/reset-date-picker-field.tsx
@@ -55,7 +55,7 @@ export const ResetDatePickerField = () => {
           lang="typescript"
           allowCopy={true}
           code={`
-            <GoAFormItem label="Item">
+            <GoAFormItem label="Select a date">
               <GoADatePicker
                 name="item"
                 value={date}
@@ -104,7 +104,7 @@ export const ResetDatePickerField = () => {
           lang="typescript"
           allowCopy={true}
           code={`
-            <GoabFormItem label="Date Picker">
+            <GoabFormItem label="Select a date">
               <GoabDatePicker
                 name="item"
                 value={date}
@@ -154,7 +154,7 @@ export const ResetDatePickerField = () => {
           tags="angular"
           allowCopy={true}
           code={`
-                  <goa-form-item label="Item">
+                  <goa-form-item label="Select a date">
                     <goa-date-picker (_change)="onChange($event)" name="item" [value]="item"></goa-date-picker>
                   </goa-form-item>
 
@@ -192,7 +192,7 @@ export const ResetDatePickerField = () => {
           lang="typescript"
           allowCopy={true}
           code={`
-                  <goa-form-item label="Input Label" helptext="Helper text" mb="3xl">
+                  <goa-form-item label="Select a date">
                     <goa-date-picker [formControl]="dateCtrl" [value]="dateCtrl.value" ngDefaultControl />
                   </goa-form-item>
                   
@@ -231,7 +231,7 @@ export const ResetDatePickerField = () => {
           tags="angular"
           allowCopy={true}
           code={`
-                  <goab-form-item label="Item">
+                  <goab-form-item label="Select a date">
                     <goab-date-picker (onChange)="onChange($event)" name="item" [value]="item"></goab-date-picker>
                   </goab-form-item>
 
@@ -242,7 +242,7 @@ export const ResetDatePickerField = () => {
                 `}
         />}
 
-        <GoabFormItem label="Date Picker">
+        <GoabFormItem label="Select a date">
           <GoabDatePicker
             name="item"
             value={date}