From 0b6d096fd48d843dfea25bc1415853a63faa4bf2 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Thu, 13 Jun 2024 10:51:24 -0700
Subject: [PATCH 01/33] basic scaffold and styling of RAC TextField component

---
 .../src/components/TextField/TextField.css    | 52 +++++++++++++++++++
 .../src/components/TextField/TextField.tsx    | 23 ++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 packages/react-components/src/components/TextField/TextField.css
 create mode 100644 packages/react-components/src/components/TextField/TextField.tsx

diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
new file mode 100644
index 00000000..1d5304df
--- /dev/null
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -0,0 +1,52 @@
+.bcds-react-aria-TextField {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  gap: var(--layout-margin-small);
+  background: var(--surface-color-forms-default);
+  height: var(--layout-margin-xxlarge);
+  padding: var(--layout-padding-small);
+  border-radius: var(--layout-borderRadius-default);
+  border: 1px solid var(--surface-color-border-default);
+}
+
+.bcds-react-aria-Label {
+  font: var(--typography-regular-small-body);
+  color: var(--typography-color-secondary);
+}
+
+.bcds-react-aria-Input {
+  font: var(--typography-regular-body);
+  color: var(--typography-color-primary);
+}
+
+/* Sizes */
+.bcds-react-aria-TextField.small {
+  min-height: var(--layout-margin-xlarge);
+}
+
+.bcds-react-aria-TextField.medium {
+  min-height: var(--layout-margin-xxlarge);
+}
+
+/* States */
+.bcds-react-aria-TextField[data-disabled] {
+  background: var(--surface-color-forms-disabled);
+  cursor: not-allowed;
+}
+
+.bcds-react-aria-TextField[data-hovered] {
+  background: var (--surface-color-menus-hover);
+}
+
+.bcds-react-aria-TextField[data-focused] {
+  border-radius: --layout-border-radius-large;
+  border: var(--layout-borderWidth-small) solid
+    var(--surface-color-border-active);
+}
+
+.bcds-react-aria-TextField[data-invalid] {
+  border-radius: var(--layout-borderRadius-default);
+  border: 1px solid var(--typography-color-danger);
+  background: var(--surface-color-forms-default);
+}
diff --git a/packages/react-components/src/components/TextField/TextField.tsx b/packages/react-components/src/components/TextField/TextField.tsx
new file mode 100644
index 00000000..97692f6f
--- /dev/null
+++ b/packages/react-components/src/components/TextField/TextField.tsx
@@ -0,0 +1,23 @@
+import {
+  TextField as ReactAriaTextField,
+  TextFieldProps as ReactAriaTextFieldProps,
+} from "react-aria-components";
+
+import "./TextField.css";
+
+export interface TextFieldProps extends ReactAriaTextFieldProps {
+  /** Sets size of input field */
+  size?: "medium" | "small";
+}
+
+export default function TextField({
+  size = "medium",
+  ...props
+}: TextFieldProps) {
+  return (
+    <ReactAriaTextField
+      className={`bcds-react-aria-TextField ${size}`}
+      {...props}
+    />
+  );
+}

From 039d77d095614d9743cd239f656a6717e8f7adec Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Fri, 14 Jun 2024 09:01:40 -0700
Subject: [PATCH 02/33] styling tweaks

---
 .../src/components/TextField/TextField.css    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
index 1d5304df..6af8e5c6 100644
--- a/packages/react-components/src/components/TextField/TextField.css
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -10,12 +10,12 @@
   border: 1px solid var(--surface-color-border-default);
 }
 
-.bcds-react-aria-Label {
+.bcds-react-aria-TextField--Label {
   font: var(--typography-regular-small-body);
   color: var(--typography-color-secondary);
 }
 
-.bcds-react-aria-Input {
+.bcds-react-aria-TextField--Input {
   font: var(--typography-regular-body);
   color: var(--typography-color-primary);
 }
@@ -30,23 +30,23 @@
 }
 
 /* States */
-.bcds-react-aria-TextField[data-disabled] {
-  background: var(--surface-color-forms-disabled);
-  cursor: not-allowed;
-}
-
 .bcds-react-aria-TextField[data-hovered] {
-  background: var (--surface-color-menus-hover);
+  background: var(--surface-color-menus-hover);
 }
 
 .bcds-react-aria-TextField[data-focused] {
-  border-radius: --layout-border-radius-large;
+  border-radius: var(--layout-border-radius-large);
   border: var(--layout-borderWidth-small) solid
     var(--surface-color-border-active);
 }
 
 .bcds-react-aria-TextField[data-invalid] {
   border-radius: var(--layout-borderRadius-default);
-  border: 1px solid var(--typography-color-danger);
+  border: 1px solid var(--support-border-color-danger);
   background: var(--surface-color-forms-default);
 }
+
+.bcds-react-aria-TextField[data-disabled] {
+  background: var(--surface-color-forms-disabled);
+  cursor: not-allowed;
+}

From 8660993343977c6ef4426eab41cf79d2672e6b38 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Fri, 14 Jun 2024 13:49:33 -0700
Subject: [PATCH 03/33] flesh out default TextField configuration and styling
 and stage on vite

---
 packages/react-components/src/App.tsx          |  9 ++++++++-
 .../src/components/TextField/TextField.css     | 13 +++++++------
 .../src/components/TextField/TextField.tsx     | 18 +++++++++++++++++-
 .../src/components/TextField/index.ts          |  2 ++
 .../react-components/src/components/index.ts   |  1 +
 .../src/pages/TextField/TextField.tsx          | 10 ++++++++++
 .../src/pages/TextField/index.ts               |  3 +++
 packages/react-components/src/pages/index.ts   |  3 ++-
 8 files changed, 50 insertions(+), 9 deletions(-)
 create mode 100644 packages/react-components/src/components/TextField/index.ts
 create mode 100644 packages/react-components/src/pages/TextField/TextField.tsx
 create mode 100644 packages/react-components/src/pages/TextField/index.ts

diff --git a/packages/react-components/src/App.tsx b/packages/react-components/src/App.tsx
index 9e718c67..e34a595a 100644
--- a/packages/react-components/src/App.tsx
+++ b/packages/react-components/src/App.tsx
@@ -6,7 +6,13 @@ import "@bcgov/bc-sans/css/BC_Sans.css";
 
 import { Button, Footer, FooterLinks, Header } from "@/components";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
-import { ButtonPage, SelectPage, TagGroupPage, TooltipPage } from "@/pages";
+import {
+  ButtonPage,
+  SelectPage,
+  TagGroupPage,
+  TooltipPage,
+  TextFieldPage,
+} from "@/pages";
 
 // This icon is available as a plain SVG at src/assets/icon-menu.svg
 function SvgMenuIcon() {
@@ -142,6 +148,7 @@ function App() {
         <SelectPage />
         <TagGroupPage />
         <TooltipPage />
+        <TextFieldPage />
       </main>
       <Footer />
       <Footer
diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
index 6af8e5c6..b2e2921e 100644
--- a/packages/react-components/src/components/TextField/TextField.css
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -7,7 +7,8 @@
   height: var(--layout-margin-xxlarge);
   padding: var(--layout-padding-small);
   border-radius: var(--layout-borderRadius-default);
-  border: 1px solid var(--surface-color-border-default);
+  border: var(--layout-border-width-small) solid
+    var(--surface-color-border-default);
 }
 
 .bcds-react-aria-TextField--Label {
@@ -29,24 +30,24 @@
   min-height: var(--layout-margin-xxlarge);
 }
 
-/* States */
-.bcds-react-aria-TextField[data-hovered] {
+/* Input states */
+.bcds-react-aria-TextField--Input[data-hovered] {
   background: var(--surface-color-menus-hover);
 }
 
-.bcds-react-aria-TextField[data-focused] {
+.bcds-react-aria-TextField--Input[data-focused] {
   border-radius: var(--layout-border-radius-large);
   border: var(--layout-borderWidth-small) solid
     var(--surface-color-border-active);
 }
 
-.bcds-react-aria-TextField[data-invalid] {
+.bcds-react-aria-TextField--Input[data-invalid] {
   border-radius: var(--layout-borderRadius-default);
   border: 1px solid var(--support-border-color-danger);
   background: var(--surface-color-forms-default);
 }
 
-.bcds-react-aria-TextField[data-disabled] {
+.bcds-react-aria-TextField--Input[data-disabled] {
   background: var(--surface-color-forms-disabled);
   cursor: not-allowed;
 }
diff --git a/packages/react-components/src/components/TextField/TextField.tsx b/packages/react-components/src/components/TextField/TextField.tsx
index 97692f6f..3d2eac89 100644
--- a/packages/react-components/src/components/TextField/TextField.tsx
+++ b/packages/react-components/src/components/TextField/TextField.tsx
@@ -1,6 +1,11 @@
 import {
   TextField as ReactAriaTextField,
   TextFieldProps as ReactAriaTextFieldProps,
+  Input,
+  Label,
+  FieldError,
+  Text,
+  ValidationResult,
 } from "react-aria-components";
 
 import "./TextField.css";
@@ -8,16 +13,27 @@ import "./TextField.css";
 export interface TextFieldProps extends ReactAriaTextFieldProps {
   /** Sets size of input field */
   size?: "medium" | "small";
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
 }
 
 export default function TextField({
   size = "medium",
+  label = "Label",
+  description = "Description or helper text",
+  errorMessage = "Error message",
   ...props
 }: TextFieldProps) {
   return (
     <ReactAriaTextField
       className={`bcds-react-aria-TextField ${size}`}
       {...props}
-    />
+    >
+      <Label className="bcds-react-aria-TextField--Label">{label}</Label>
+      <Input className="bcds-react-aria-TextField--Input" />
+      {description && <Text slot="description">{description}</Text>}
+      <FieldError>{errorMessage}</FieldError>
+    </ReactAriaTextField>
   );
 }
diff --git a/packages/react-components/src/components/TextField/index.ts b/packages/react-components/src/components/TextField/index.ts
new file mode 100644
index 00000000..3e6d8643
--- /dev/null
+++ b/packages/react-components/src/components/TextField/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./TextField";
+export type { TextFieldProps } from "./TextField";
diff --git a/packages/react-components/src/components/index.ts b/packages/react-components/src/components/index.ts
index d5e36eaf..a2408fab 100644
--- a/packages/react-components/src/components/index.ts
+++ b/packages/react-components/src/components/index.ts
@@ -8,4 +8,5 @@ export { default as SvgBcLogo } from "./SvgBcLogo";
 export { default as Tag } from "./Tag";
 export { default as TagGroup } from "./TagGroup";
 export { default as TagList } from "./TagList";
+export { default as TextField } from "./TextField";
 export { default as Tooltip, TooltipTrigger } from "./Tooltip";
diff --git a/packages/react-components/src/pages/TextField/TextField.tsx b/packages/react-components/src/pages/TextField/TextField.tsx
new file mode 100644
index 00000000..0e4d3937
--- /dev/null
+++ b/packages/react-components/src/pages/TextField/TextField.tsx
@@ -0,0 +1,10 @@
+import { TextField } from "@/components";
+
+export default function TextFieldPage() {
+  return (
+    <>
+      <h2>TextField</h2>
+      <TextField />
+    </>
+  );
+}
diff --git a/packages/react-components/src/pages/TextField/index.ts b/packages/react-components/src/pages/TextField/index.ts
new file mode 100644
index 00000000..61f22677
--- /dev/null
+++ b/packages/react-components/src/pages/TextField/index.ts
@@ -0,0 +1,3 @@
+import TextFieldPage from "./TextField";
+
+export default TextFieldPage;
diff --git a/packages/react-components/src/pages/index.ts b/packages/react-components/src/pages/index.ts
index c80b74e9..d55e10a1 100644
--- a/packages/react-components/src/pages/index.ts
+++ b/packages/react-components/src/pages/index.ts
@@ -1,6 +1,7 @@
 import ButtonPage from "./Button";
 import SelectPage from "./Select";
 import TagGroupPage from "./TagGroup";
+import TextFieldPage from "./TextField";
 import TooltipPage from "./Tooltip";
 
-export { ButtonPage, SelectPage, TagGroupPage, TooltipPage };
+export { ButtonPage, SelectPage, TagGroupPage, TextFieldPage, TooltipPage };

From 7a76a2125578a3febd2561eb66d549fa28d5be7f Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Fri, 14 Jun 2024 15:34:07 -0700
Subject: [PATCH 04/33] refining styling of TextField input

---
 .../src/components/TextField/TextField.css    | 33 ++++++++++++-------
 .../src/components/TextField/TextField.tsx    | 16 +++++----
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
index b2e2921e..e6930931 100644
--- a/packages/react-components/src/components/TextField/TextField.css
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -1,32 +1,43 @@
 .bcds-react-aria-TextField {
-  display: flex;
-  align-items: center;
-  align-self: stretch;
+  display: inline-flex;
+  flex-direction: column;
   gap: var(--layout-margin-small);
-  background: var(--surface-color-forms-default);
-  height: var(--layout-margin-xxlarge);
-  padding: var(--layout-padding-small);
-  border-radius: var(--layout-borderRadius-default);
-  border: var(--layout-border-width-small) solid
-    var(--surface-color-border-default);
+  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */
+  max-width: -moz-available;
+  max-width: -webkit-fill-available;
 }
 
+/* Styles for the text label above the input field */
 .bcds-react-aria-TextField--Label {
   font: var(--typography-regular-small-body);
   color: var(--typography-color-secondary);
+  padding: var(--layout-margin-hair) 0px;
+}
+
+/* Styles for the text description below the input field */
+.bcds-react-aria-TextField--Description {
+  font: var(--typography-regular-small-body);
 }
 
+/* Styles for the input field */
 .bcds-react-aria-TextField--Input {
   font: var(--typography-regular-body);
   color: var(--typography-color-primary);
+  background: var(--surface-color-forms-default);
+  border: var(--layout-border-width-small) solid
+    var(--surface-color-border-default);
+  border-radius: var(--layout-border-radius-medium);
+  padding: var(--layout-padding-small) 12px;
 }
 
 /* Sizes */
-.bcds-react-aria-TextField.small {
+.bcds-react-aria-TextField--Input .small {
+  /* using margin token is kludgy, consider adding component-specific token for input sizing */
   min-height: var(--layout-margin-xlarge);
 }
 
-.bcds-react-aria-TextField.medium {
+.bcds-react-aria-TextField--Input .medium {
+  /* using margin token is kludgy, consider adding component-specific token for input sizing */
   min-height: var(--layout-margin-xxlarge);
 }
 
diff --git a/packages/react-components/src/components/TextField/TextField.tsx b/packages/react-components/src/components/TextField/TextField.tsx
index 3d2eac89..61491560 100644
--- a/packages/react-components/src/components/TextField/TextField.tsx
+++ b/packages/react-components/src/components/TextField/TextField.tsx
@@ -26,13 +26,17 @@ export default function TextField({
   ...props
 }: TextFieldProps) {
   return (
-    <ReactAriaTextField
-      className={`bcds-react-aria-TextField ${size}`}
-      {...props}
-    >
+    <ReactAriaTextField className="bcds-react-aria-TextField" {...props}>
       <Label className="bcds-react-aria-TextField--Label">{label}</Label>
-      <Input className="bcds-react-aria-TextField--Input" />
-      {description && <Text slot="description">{description}</Text>}
+      <Input className={`bcds-react-aria-TextField--Input ${size}`} />
+      {description && (
+        <Text
+          slot="description"
+          className={`bcds-react-aria-TextField--Description`}
+        >
+          {description}
+        </Text>
+      )}
       <FieldError>{errorMessage}</FieldError>
     </ReactAriaTextField>
   );

From 4d06a58617f5d5a137749edeb6449344a437b449 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 17 Jun 2024 08:54:43 -0700
Subject: [PATCH 05/33] styling

---
 .../react-components/src/components/TextField/TextField.css    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
index e6930931..2910f545 100644
--- a/packages/react-components/src/components/TextField/TextField.css
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -17,6 +17,7 @@
 /* Styles for the text description below the input field */
 .bcds-react-aria-TextField--Description {
   font: var(--typography-regular-small-body);
+  color: var(--typography-color-secondary);
 }
 
 /* Styles for the input field */
@@ -43,7 +44,7 @@
 
 /* Input states */
 .bcds-react-aria-TextField--Input[data-hovered] {
-  background: var(--surface-color-menus-hover);
+  border-color: var(--surface-color-border-dark);
 }
 
 .bcds-react-aria-TextField--Input[data-focused] {

From 14c12760474afd0a313e91a86ea2b111b8be56a6 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 17 Jun 2024 11:42:04 -0700
Subject: [PATCH 06/33] additional styling and basic storybook controls

---
 .../src/components/TextField/TextField.css    | 22 ++++++++----
 .../src/components/TextField/TextField.tsx    |  4 ++-
 .../src/stories/TextField.mdx                 |  1 +
 .../src/stories/TextField.stories.tsx         | 36 +++++++++++++++++++
 4 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 packages/react-components/src/stories/TextField.mdx
 create mode 100644 packages/react-components/src/stories/TextField.stories.tsx

diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
index 2910f545..85138fba 100644
--- a/packages/react-components/src/components/TextField/TextField.css
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -1,8 +1,8 @@
 .bcds-react-aria-TextField {
   display: inline-flex;
   flex-direction: column;
-  gap: var(--layout-margin-small);
   /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */
+  align-self: stretch;
   max-width: -moz-available;
   max-width: -webkit-fill-available;
 }
@@ -25,21 +25,31 @@
   font: var(--typography-regular-body);
   color: var(--typography-color-primary);
   background: var(--surface-color-forms-default);
+  box-sizing: border-box;
   border: var(--layout-border-width-small) solid
     var(--surface-color-border-default);
   border-radius: var(--layout-border-radius-medium);
   padding: var(--layout-padding-small) 12px;
+  margin: var(--layout-margin-small) var(--layout-margin-none)
+    var(--layout-margin-small) var(--layout-margin-none);
+  gap: var(--layout-margin-small);
+}
+
+/* Styles for the error message slot*/
+.bcds-react-aria-TextField--Error {
+  font: var(--typography-regular-body);
+  color: var(--typography-color-danger);
 }
 
 /* Sizes */
-.bcds-react-aria-TextField--Input .small {
+.bcds-react-aria-TextField--Input.small {
   /* using margin token is kludgy, consider adding component-specific token for input sizing */
-  min-height: var(--layout-margin-xlarge);
+  height: var(--layout-margin-xlarge);
 }
 
-.bcds-react-aria-TextField--Input .medium {
+.bcds-react-aria-TextField--Input.medium {
   /* using margin token is kludgy, consider adding component-specific token for input sizing */
-  min-height: var(--layout-margin-xxlarge);
+  height: var(--layout-margin-xxlarge);
 }
 
 /* Input states */
@@ -54,7 +64,7 @@
 }
 
 .bcds-react-aria-TextField--Input[data-invalid] {
-  border-radius: var(--layout-borderRadius-default);
+  border-radius: var(--layout-border-radius-medium);
   border: 1px solid var(--support-border-color-danger);
   background: var(--surface-color-forms-default);
 }
diff --git a/packages/react-components/src/components/TextField/TextField.tsx b/packages/react-components/src/components/TextField/TextField.tsx
index 61491560..c87feabe 100644
--- a/packages/react-components/src/components/TextField/TextField.tsx
+++ b/packages/react-components/src/components/TextField/TextField.tsx
@@ -37,7 +37,9 @@ export default function TextField({
           {description}
         </Text>
       )}
-      <FieldError>{errorMessage}</FieldError>
+      <FieldError className="bcds-react-aria-TextField--Error">
+        {errorMessage}
+      </FieldError>
     </ReactAriaTextField>
   );
 }
diff --git a/packages/react-components/src/stories/TextField.mdx b/packages/react-components/src/stories/TextField.mdx
new file mode 100644
index 00000000..c3fbec02
--- /dev/null
+++ b/packages/react-components/src/stories/TextField.mdx
@@ -0,0 +1 @@
+{/* TextField.mdx */}
diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
new file mode 100644
index 00000000..0e798e0b
--- /dev/null
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { TextField } from "../components";
+import { TextFieldProps } from "../components/TextField";
+
+const meta = {
+  title: "Components/TextField",
+  component: TextField,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    size: {
+      options: ["medium", "small"],
+      control: { type: "radio" },
+      description: "Defaults to 'medium', also supports 'small'",
+    },
+    label: {
+      control: { type: "text" },
+      description: "Text that appears above the input field",
+    },
+    isDisabled: {
+      control: "boolean",
+      description: "Is the input disabled?",
+    },
+    isInvalid: {
+      control: "boolean",
+      description: "Is the user's input valid?",
+    },
+  },
+} satisfies Meta<typeof TextField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const TextFieldTemplate: Story = {};

From a3925dfbd1d85c3963c6ccbc067452101de500de Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 17 Jun 2024 12:01:53 -0700
Subject: [PATCH 07/33] add additional args and error handling

---
 .../src/components/TextField/TextField.tsx           |  2 +-
 .../src/stories/TextField.stories.tsx                | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/components/TextField/TextField.tsx b/packages/react-components/src/components/TextField/TextField.tsx
index c87feabe..e836c892 100644
--- a/packages/react-components/src/components/TextField/TextField.tsx
+++ b/packages/react-components/src/components/TextField/TextField.tsx
@@ -22,7 +22,7 @@ export default function TextField({
   size = "medium",
   label = "Label",
   description = "Description or helper text",
-  errorMessage = "Error message",
+  errorMessage,
   ...props
 }: TextFieldProps) {
   return (
diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
index 0e798e0b..fcac9edf 100644
--- a/packages/react-components/src/stories/TextField.stories.tsx
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -15,6 +15,10 @@ const meta = {
       control: { type: "radio" },
       description: "Defaults to 'medium', also supports 'small'",
     },
+    type: {
+      options: ["text", "search", "email", "url", "tel", "password"],
+      control: { type: "radio" },
+    },
     label: {
       control: { type: "text" },
       description: "Text that appears above the input field",
@@ -27,6 +31,14 @@ const meta = {
       control: "boolean",
       description: "Is the user's input valid?",
     },
+    minLength: {
+      control: "number",
+      description: "Minimum length for this input",
+    },
+    maxLength: {
+      control: "number",
+      description: "Maximum length for this input",
+    },
   },
 } satisfies Meta<typeof TextField>;
 

From 92faf4dd7c21a11d95bd4a0a2161ebd45466c4b3 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 17 Jun 2024 12:03:36 -0700
Subject: [PATCH 08/33] remove unused import

---
 .../react-components/src/stories/TextField.mdx     | 14 ++++++++++++++
 .../src/stories/TextField.stories.tsx              |  1 -
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/stories/TextField.mdx b/packages/react-components/src/stories/TextField.mdx
index c3fbec02..e9b393f9 100644
--- a/packages/react-components/src/stories/TextField.mdx
+++ b/packages/react-components/src/stories/TextField.mdx
@@ -1 +1,15 @@
 {/* TextField.mdx */}
+
+import {
+  Canvas,
+  Controls,
+  Meta,
+  Primary,
+  Source,
+  Story,
+  Subtitle,
+} from "@storybook/blocks";
+
+import * as TextFieldStories from "./TextField.stories";
+
+<Meta of={TextFieldStories} />
diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
index fcac9edf..36460210 100644
--- a/packages/react-components/src/stories/TextField.stories.tsx
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { TextField } from "../components";
-import { TextFieldProps } from "../components/TextField";
 
 const meta = {
   title: "Components/TextField",

From 8cb5b62ffac6a87d46b543f863299c48508912a3 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 17 Jun 2024 12:09:20 -0700
Subject: [PATCH 09/33] docs page skeleton

---
 .../src/stories/TextField.mdx                 | 26 +++++++++++++++++++
 .../src/stories/TextField.stories.tsx         |  2 +-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/stories/TextField.mdx b/packages/react-components/src/stories/TextField.mdx
index e9b393f9..a71ebb03 100644
--- a/packages/react-components/src/stories/TextField.mdx
+++ b/packages/react-components/src/stories/TextField.mdx
@@ -13,3 +13,29 @@ import {
 import * as TextFieldStories from "./TextField.stories";
 
 <Meta of={TextFieldStories} />
+
+# Text Field
+
+<Subtitle>
+  The text field component enables a user to enter text into an interface or
+  form.
+</Subtitle>
+
+<Source
+  code={`import { TextField } from "@bcgov/design-system-react-components"; `}
+  language="typescript"
+/>
+
+## Usage and resources
+
+Learn more about working with the text field component:
+
+- [Usage and best practice guidance](https://www2.gov.bc.ca/gov/content/digital/design-system/components/text-field)
+- [View the select component in Figma](#)
+
+This component is based on [React Aria TextField](https://react-spectrum.adobe.com/react-aria/TextField.html). Consult the React Aria documentation for additional technical information.
+
+## Controls
+
+<Primary of={TextFieldStories} />
+<Controls of={TextFieldStories.TextFieldTemplate} />
diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
index 36460210..1f819230 100644
--- a/packages/react-components/src/stories/TextField.stories.tsx
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { TextField } from "../components";
 
 const meta = {
-  title: "Components/TextField",
+  title: "Components/TextField/TextField",
   component: TextField,
   parameters: {
     layout: "centered",

From bafec568f309001dadcff6367c42f065ed65944a Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 17 Jun 2024 13:19:21 -0700
Subject: [PATCH 10/33] remove placeholder description from default TextField

---
 .../react-components/src/components/TextField/TextField.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/components/TextField/TextField.tsx b/packages/react-components/src/components/TextField/TextField.tsx
index e836c892..aecd33f3 100644
--- a/packages/react-components/src/components/TextField/TextField.tsx
+++ b/packages/react-components/src/components/TextField/TextField.tsx
@@ -21,7 +21,7 @@ export interface TextFieldProps extends ReactAriaTextFieldProps {
 export default function TextField({
   size = "medium",
   label = "Label",
-  description = "Description or helper text",
+  description,
   errorMessage,
   ...props
 }: TextFieldProps) {

From 730e70a125f428ac4200fd49a8989ebdfda832ce Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 17 Jun 2024 15:21:27 -0700
Subject: [PATCH 11/33] Set text input field inside container div for styling
 (#387)

Co-authored-by: Tyler Krys <Tyler.Krys@gov.bc.ca>
---
 .../src/components/TextField/TextField.css    | 47 +++++++++++++------
 .../src/components/TextField/TextField.tsx    | 18 +++++--
 .../src/stories/TextField.stories.tsx         | 34 ++++++++++++++
 3 files changed, 81 insertions(+), 18 deletions(-)

diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
index 85138fba..652b0833 100644
--- a/packages/react-components/src/components/TextField/TextField.css
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -20,49 +20,60 @@
   color: var(--typography-color-secondary);
 }
 
-/* Styles for the input field */
-.bcds-react-aria-TextField--Input {
-  font: var(--typography-regular-body);
+/* Styles for the input field container */
+.bcds-react-aria-TextField--container {
   color: var(--typography-color-primary);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--layout-margin-small);
   background: var(--surface-color-forms-default);
   box-sizing: border-box;
   border: var(--layout-border-width-small) solid
     var(--surface-color-border-default);
   border-radius: var(--layout-border-radius-medium);
-  padding: var(--layout-padding-small) 12px;
   margin: var(--layout-margin-small) var(--layout-margin-none)
     var(--layout-margin-small) var(--layout-margin-none);
-  gap: var(--layout-margin-small);
-}
-
-/* Styles for the error message slot*/
-.bcds-react-aria-TextField--Error {
-  font: var(--typography-regular-body);
-  color: var(--typography-color-danger);
+  padding: var(--layout-padding-small) 12px;
 }
 
 /* Sizes */
-.bcds-react-aria-TextField--Input.small {
+.bcds-react-aria-TextField--container.small {
   /* using margin token is kludgy, consider adding component-specific token for input sizing */
   height: var(--layout-margin-xlarge);
 }
 
-.bcds-react-aria-TextField--Input.medium {
+.bcds-react-aria-TextField--container.medium {
   /* using margin token is kludgy, consider adding component-specific token for input sizing */
   height: var(--layout-margin-xxlarge);
 }
 
+/* Text input field */
+.bcds-react-aria-TextField--Input {
+  font: var(--typography-regular-body);
+  padding: var(--layout-padding-none);
+}
+
 /* Input states */
 .bcds-react-aria-TextField--Input[data-hovered] {
   border-color: var(--surface-color-border-dark);
 }
 
-.bcds-react-aria-TextField--Input[data-focused] {
+.bcds-react-aria-TextField--container:focus-within {
   border-radius: var(--layout-border-radius-large);
-  border: var(--layout-borderWidth-small) solid
+  border: var(--layout-border-width-small) solid
     var(--surface-color-border-active);
 }
 
+.bcds-react-aria-TextField--container
+  > .bcds-react-aria-TextField--Input[data-focused] {
+  outline: none;
+}
+
+.bcds-react-aria-TextField--Input {
+  border: none;
+}
+
 .bcds-react-aria-TextField--Input[data-invalid] {
   border-radius: var(--layout-border-radius-medium);
   border: 1px solid var(--support-border-color-danger);
@@ -73,3 +84,9 @@
   background: var(--surface-color-forms-disabled);
   cursor: not-allowed;
 }
+
+/* Styles for the error message slot*/
+.bcds-react-aria-TextField--Error {
+  font: var(--typography-regular-body);
+  color: var(--typography-color-danger);
+}
diff --git a/packages/react-components/src/components/TextField/TextField.tsx b/packages/react-components/src/components/TextField/TextField.tsx
index aecd33f3..5907e0b2 100644
--- a/packages/react-components/src/components/TextField/TextField.tsx
+++ b/packages/react-components/src/components/TextField/TextField.tsx
@@ -16,19 +16,31 @@ export interface TextFieldProps extends ReactAriaTextFieldProps {
   label?: string;
   description?: string;
   errorMessage?: string | ((validation: ValidationResult) => string);
+  /** Left icon slot in text input field */
+  iconLeft?: React.ReactElement;
+  /** Right icon slot in text input field */
+  iconRight?: React.ReactElement;
 }
 
 export default function TextField({
   size = "medium",
-  label = "Label",
+  label,
   description,
   errorMessage,
+  iconLeft,
+  iconRight,
   ...props
 }: TextFieldProps) {
   return (
     <ReactAriaTextField className="bcds-react-aria-TextField" {...props}>
-      <Label className="bcds-react-aria-TextField--Label">{label}</Label>
-      <Input className={`bcds-react-aria-TextField--Input ${size}`} />
+      {label && (
+        <Label className="bcds-react-aria-TextField--Label">{label}</Label>
+      )}
+      <div className={`bcds-react-aria-TextField--container ${size}`}>
+        {iconLeft}
+        <Input className="bcds-react-aria-TextField--Input" />
+        {iconRight}
+      </div>
       {description && (
         <Text
           slot="description"
diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
index 1f819230..6effea7a 100644
--- a/packages/react-components/src/stories/TextField.stories.tsx
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -45,3 +45,37 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const TextFieldTemplate: Story = {};
+
+const iconPlaceholder = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="20px/Icon placeholder" clip-path="url(#clip0_717_6325)">
+      <path
+        id="Icon"
+        d="M9.99996 18.3333C14.6023 18.3333 18.3333 14.6023 18.3333 9.99996C18.3333 5.39759 14.6023 1.66663 9.99996 1.66663C5.39759 1.66663 1.66663 5.39759 1.66663 9.99996C1.66663 14.6023 5.39759 18.3333 9.99996 18.3333Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_717_6325">
+        <rect width="20" height="20" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const TextFieldWithIcons: Story = {
+  args: {
+    ...TextFieldTemplate.args,
+    iconLeft: iconPlaceholder,
+    iconRight: iconPlaceholder,
+  },
+};

From f74916f33087f86d06ac2a0ba7c0ecd45313ec19 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 17 Jun 2024 15:44:45 -0700
Subject: [PATCH 12/33] documentation and storybook refinements

---
 .../src/components/TextField/TextField.css               | 5 ++---
 .../src/components/TextField/TextField.tsx               | 9 ++++++---
 .../react-components/src/stories/TextField.stories.tsx   | 8 +++++++-
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
index 652b0833..b599bba0 100644
--- a/packages/react-components/src/components/TextField/TextField.css
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -32,8 +32,7 @@
   border: var(--layout-border-width-small) solid
     var(--surface-color-border-default);
   border-radius: var(--layout-border-radius-medium);
-  margin: var(--layout-margin-small) var(--layout-margin-none)
-    var(--layout-margin-small) var(--layout-margin-none);
+  margin: var(--layout-margin-small) var(--layout-margin-none);
   padding: var(--layout-padding-small) 12px;
 }
 
@@ -85,7 +84,7 @@
   cursor: not-allowed;
 }
 
-/* Styles for the error message slot*/
+/* Styles for the error message slot */
 .bcds-react-aria-TextField--Error {
   font: var(--typography-regular-body);
   color: var(--typography-color-danger);
diff --git a/packages/react-components/src/components/TextField/TextField.tsx b/packages/react-components/src/components/TextField/TextField.tsx
index 5907e0b2..68010b75 100644
--- a/packages/react-components/src/components/TextField/TextField.tsx
+++ b/packages/react-components/src/components/TextField/TextField.tsx
@@ -11,14 +11,17 @@ import {
 import "./TextField.css";
 
 export interface TextFieldProps extends ReactAriaTextFieldProps {
-  /** Sets size of input field */
+  /* Sets size of text input field */
   size?: "medium" | "small";
+  /* Sets text label above text input field */
   label?: string;
+  /* Sets optional description text below text input field */
   description?: string;
+  /* Used for data validation and error handling */
   errorMessage?: string | ((validation: ValidationResult) => string);
-  /** Left icon slot in text input field */
+  /* Icon slot to left of text input field */
   iconLeft?: React.ReactElement;
-  /** Right icon slot in text input field */
+  /* Icon slot to right of text input field */
   iconRight?: React.ReactElement;
 }
 
diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
index 6effea7a..2ed8c807 100644
--- a/packages/react-components/src/stories/TextField.stories.tsx
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -44,7 +44,13 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const TextFieldTemplate: Story = {};
+export const TextFieldTemplate: Story = {
+  args: {
+    label: "Label",
+    size: "medium",
+    type: "text",
+  },
+};
 
 const iconPlaceholder = (
   <svg

From a1bfa4bc947d6b50748d5cdbe9f29b5e5f19bcd8 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 19 Jun 2024 09:25:55 -0700
Subject: [PATCH 13/33] refactor TextField styling to work properly with
 container flexbox

---
 .../src/components/TextField/TextField.css    | 37 ++++++++++++-------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
index b599bba0..a9c98bdc 100644
--- a/packages/react-components/src/components/TextField/TextField.css
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -36,6 +36,10 @@
   padding: var(--layout-padding-small) 12px;
 }
 
+.bcds-react-aria-TextField--Input {
+  border: none;
+}
+
 /* Sizes */
 .bcds-react-aria-TextField--container.small {
   /* using margin token is kludgy, consider adding component-specific token for input sizing */
@@ -53,9 +57,11 @@
   padding: var(--layout-padding-none);
 }
 
-/* Input states */
-.bcds-react-aria-TextField--Input[data-hovered] {
-  border-color: var(--surface-color-border-dark);
+/* Hover and focus states */
+
+.bcds-react-aria-TextField--container
+  > .bcds-react-aria-TextField--Input[data-focused] {
+  outline: none;
 }
 
 .bcds-react-aria-TextField--container:focus-within {
@@ -64,26 +70,29 @@
     var(--surface-color-border-active);
 }
 
-.bcds-react-aria-TextField--container
-  > .bcds-react-aria-TextField--Input[data-focused] {
-  outline: none;
+.bcds-react-aria-TextField--container:hover {
+  border-color: var(--surface-color-border-dark);
 }
 
-.bcds-react-aria-TextField--Input {
-  border: none;
-}
+/* Disabled and invalid states */
 
-.bcds-react-aria-TextField--Input[data-invalid] {
-  border-radius: var(--layout-border-radius-medium);
-  border: 1px solid var(--support-border-color-danger);
-  background: var(--surface-color-forms-default);
+.bcds-react-aria-TextField[data-disabled]
+  > .bcds-react-aria-TextField--container {
+  background: var(--surface-color-forms-disabled);
+  cursor: not-allowed;
 }
 
 .bcds-react-aria-TextField--Input[data-disabled] {
-  background: var(--surface-color-forms-disabled);
   cursor: not-allowed;
 }
 
+.bcds-react-aria-TextField[data-invalid]
+  > .bcds-react-aria-TextField--container {
+  border-radius: var(--layout-border-radius-medium);
+  border: 1px solid var(--support-border-color-danger);
+  background: var(--surface-color-forms-default);
+}
+
 /* Styles for the error message slot */
 .bcds-react-aria-TextField--Error {
   font: var(--typography-regular-body);

From 457a012eef3c62ae8be9e10943af886b3c7f0bc1 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 19 Jun 2024 09:50:15 -0700
Subject: [PATCH 14/33] add search field example

---
 .../src/stories/TextField.stories.tsx         | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
index 2ed8c807..44f9c881 100644
--- a/packages/react-components/src/stories/TextField.stories.tsx
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -78,6 +78,32 @@ const iconPlaceholder = (
   </svg>
 );
 
+const iconSearch = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="20px/Search" clip-path="url(#clip0_717_6325)">
+      <path
+        id="Search icon"
+        d="M20.7361 19.5586C21.088 19.9101 21.088 20.4375 20.7361 20.7539C20.5953 20.9297 20.3842 21 20.1731 21C19.9267 21 19.7155 20.9297 19.5396 20.7539L14.824 16.0429C13.5572 17.0625 11.9736 17.625 10.2845 17.625C6.27274 17.625 3 14.3555 3 10.3125C3 6.30468 6.23754 3 10.2845 3C14.2962 3 17.6041 6.30468 17.6041 10.3125C17.6041 12.0352 17.0411 13.6172 16.0205 14.8477L20.7361 19.5586ZM4.68916 10.3125C4.68916 13.4414 7.18769 15.9375 10.3197 15.9375C13.4164 15.9375 15.9501 13.4414 15.9501 10.3125C15.9501 7.21874 13.4164 4.6875 10.3197 4.6875C7.18769 4.6875 4.68916 7.21874 4.68916 10.3125Z"
+        stroke="currentColor"
+        stroke-width="1"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_717_6325">
+        <rect width="20" height="20" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
 export const TextFieldWithIcons: Story = {
   args: {
     ...TextFieldTemplate.args,
@@ -85,3 +111,12 @@ export const TextFieldWithIcons: Story = {
     iconRight: iconPlaceholder,
   },
 };
+
+export const TextFieldSearch: Story = {
+  args: {
+    label: "Search",
+    size: "medium",
+    type: "search",
+    iconLeft: iconSearch,
+  },
+};

From 4b0e26339b78278deca3d40b8c44116f4f1a9ce7 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 19 Jun 2024 10:19:25 -0700
Subject: [PATCH 15/33] tweak search icon

---
 .../src/stories/TextField.stories.tsx         | 27 ++++++-------------
 1 file changed, 8 insertions(+), 19 deletions(-)

diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
index 44f9c881..66b701d6 100644
--- a/packages/react-components/src/stories/TextField.stories.tsx
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -80,27 +80,16 @@ const iconPlaceholder = (
 
 const iconSearch = (
   <svg
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    width="15"
+    height="15"
+    viewBox="0 0 15 15"
+    fill="none"
   >
-    <g id="20px/Search" clip-path="url(#clip0_717_6325)">
-      <path
-        id="Search icon"
-        d="M20.7361 19.5586C21.088 19.9101 21.088 20.4375 20.7361 20.7539C20.5953 20.9297 20.3842 21 20.1731 21C19.9267 21 19.7155 20.9297 19.5396 20.7539L14.824 16.0429C13.5572 17.0625 11.9736 17.625 10.2845 17.625C6.27274 17.625 3 14.3555 3 10.3125C3 6.30468 6.23754 3 10.2845 3C14.2962 3 17.6041 6.30468 17.6041 10.3125C17.6041 12.0352 17.0411 13.6172 16.0205 14.8477L20.7361 19.5586ZM4.68916 10.3125C4.68916 13.4414 7.18769 15.9375 10.3197 15.9375C13.4164 15.9375 15.9501 13.4414 15.9501 10.3125C15.9501 7.21874 13.4164 4.6875 10.3197 4.6875C7.18769 4.6875 4.68916 7.21874 4.68916 10.3125Z"
-        stroke="currentColor"
-        stroke-width="1"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_717_6325">
-        <rect width="20" height="20" fill="white" />
-      </clipPath>
-    </defs>
+    <path
+      d="M14.4479 13.2956C14.7213 13.569 14.7213 13.9792 14.4479 14.2253C14.3385 14.362 14.1745 14.4167 14.0104 14.4167C13.819 14.4167 13.6549 14.362 13.5182 14.2253L9.85416 10.5612C8.86978 11.3542 7.63931 11.7917 6.32681 11.7917C3.20963 11.7917 0.666656 9.24869 0.666656 6.10416C0.666656 2.98697 3.18228 0.416656 6.32681 0.416656C9.444 0.416656 12.0143 2.98697 12.0143 6.10416C12.0143 7.444 11.5768 8.67447 10.7838 9.6315L14.4479 13.2956ZM1.97916 6.10416C1.97916 8.53775 3.92056 10.4792 6.35416 10.4792C8.76041 10.4792 10.7292 8.53775 10.7292 6.10416C10.7292 3.69791 8.76041 1.72916 6.35416 1.72916C3.92056 1.72916 1.97916 3.69791 1.97916 6.10416Z"
+      fill="#2D2D2D"
+    />
   </svg>
 );
 

From fd70c96a6bc5187b6afdc3c6b2389641f653c246 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 19 Jun 2024 10:30:32 -0700
Subject: [PATCH 16/33] add password field example

---
 .../react-components/src/stories/TextField.stories.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
index 66b701d6..5e535b24 100644
--- a/packages/react-components/src/stories/TextField.stories.tsx
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -101,7 +101,7 @@ export const TextFieldWithIcons: Story = {
   },
 };
 
-export const TextFieldSearch: Story = {
+export const SearchField: Story = {
   args: {
     label: "Search",
     size: "medium",
@@ -109,3 +109,11 @@ export const TextFieldSearch: Story = {
     iconLeft: iconSearch,
   },
 };
+
+export const PasswordField: Story = {
+  args: {
+    label: "Password",
+    size: "medium",
+    type: "password",
+  },
+};

From 6d5efe2fb3222ef19ea128c7c7852b603fdf3629 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 19 Jun 2024 10:55:22 -0700
Subject: [PATCH 17/33] add read-only example and styling

---
 .../src/components/TextField/TextField.css    | 11 +++++++++++
 .../src/stories/TextField.stories.tsx         | 19 +++++++++++++++++--
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
index a9c98bdc..7945f03b 100644
--- a/packages/react-components/src/components/TextField/TextField.css
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -93,6 +93,17 @@
   background: var(--surface-color-forms-default);
 }
 
+.bcds-react-aria-TextField[data-readonly]
+  > .bcds-react-aria-TextField--container {
+  background: var(--surface-color-forms-disabled);
+}
+
+.bcds-react-aria-TextField[data-readonly]
+  > .bcds-react-aria-TextField--container
+  > .bcds-react-aria-TextField--Input {
+  background: var(--surface-color-forms-disabled);
+}
+
 /* Styles for the error message slot */
 .bcds-react-aria-TextField--Error {
   font: var(--typography-regular-body);
diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
index 5e535b24..01278cd3 100644
--- a/packages/react-components/src/stories/TextField.stories.tsx
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -30,13 +30,17 @@ const meta = {
       control: "boolean",
       description: "Is the user's input valid?",
     },
+    isReadOnly: {
+      control: "boolean",
+      description: "Locks the field to its current value",
+    },
     minLength: {
       control: "number",
-      description: "Minimum length for this input",
+      description: "Minimum character length for this input",
     },
     maxLength: {
       control: "number",
-      description: "Maximum length for this input",
+      description: "Maximum character length for this input",
     },
   },
 } satisfies Meta<typeof TextField>;
@@ -117,3 +121,14 @@ export const PasswordField: Story = {
     type: "password",
   },
 };
+
+export const ReadOnlyTextField: Story = {
+  args: {
+    label: "Label",
+    size: "medium",
+    type: "text",
+    value: "This field is locked",
+    description: "It can be copied but not edited",
+    isReadOnly: true,
+  },
+};

From 56c1702b685d3480348efa42e227fcb20d1c2206 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 19 Jun 2024 12:55:25 -0700
Subject: [PATCH 18/33] storybook and docs edits

---
 packages/react-components/src/stories/TextField.mdx         | 2 +-
 packages/react-components/src/stories/TextField.stories.tsx | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/stories/TextField.mdx b/packages/react-components/src/stories/TextField.mdx
index a71ebb03..6e5778a4 100644
--- a/packages/react-components/src/stories/TextField.mdx
+++ b/packages/react-components/src/stories/TextField.mdx
@@ -31,7 +31,7 @@ import * as TextFieldStories from "./TextField.stories";
 Learn more about working with the text field component:
 
 - [Usage and best practice guidance](https://www2.gov.bc.ca/gov/content/digital/design-system/components/text-field)
-- [View the select component in Figma](#)
+- [View the text field component in Figma](#)
 
 This component is based on [React Aria TextField](https://react-spectrum.adobe.com/react-aria/TextField.html). Consult the React Aria documentation for additional technical information.
 
diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
index 01278cd3..9cc97ed4 100644
--- a/packages/react-components/src/stories/TextField.stories.tsx
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -18,6 +18,10 @@ const meta = {
       options: ["text", "search", "email", "url", "tel", "password"],
       control: { type: "radio" },
     },
+    value: {
+      control: { type: "text" },
+      description: "Input value",
+    },
     label: {
       control: { type: "text" },
       description: "Text that appears above the input field",

From 997bbef84a9399171903537fea81b3c1cd4f21fa Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 19 Jun 2024 13:44:51 -0700
Subject: [PATCH 19/33] fleshing out TextField stories

---
 .../src/stories/TextField.stories.tsx         | 36 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
index 9cc97ed4..eebd11ca 100644
--- a/packages/react-components/src/stories/TextField.stories.tsx
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -57,6 +57,15 @@ export const TextFieldTemplate: Story = {
     label: "Label",
     size: "medium",
     type: "text",
+    description: "Optional description or helper text",
+  },
+};
+
+export const SmallTextField: Story = {
+  args: {
+    ...TextFieldTemplate.args,
+    size: "small",
+    description: "This is a thinner variant of the input field",
   },
 };
 
@@ -106,6 +115,7 @@ export const TextFieldWithIcons: Story = {
     ...TextFieldTemplate.args,
     iconLeft: iconPlaceholder,
     iconRight: iconPlaceholder,
+    description: "You can use either, both or neither icon slot as needed",
   },
 };
 
@@ -115,6 +125,7 @@ export const SearchField: Story = {
     size: "medium",
     type: "search",
     iconLeft: iconSearch,
+    description: "Icon slots can be used to provide additional visual context",
   },
 };
 
@@ -123,6 +134,16 @@ export const PasswordField: Story = {
     label: "Password",
     size: "medium",
     type: "password",
+    value: "password",
+    description: "Input is automatically obscured",
+  },
+};
+
+export const DisabledTextField: Story = {
+  args: {
+    ...TextFieldTemplate.args,
+    description: "This field is disabled and cannot be interacted with",
+    isDisabled: true,
   },
 };
 
@@ -132,7 +153,20 @@ export const ReadOnlyTextField: Story = {
     size: "medium",
     type: "text",
     value: "This field is locked",
-    description: "It can be copied but not edited",
+    description: "Input can be selected and copied but not edited",
     isReadOnly: true,
   },
 };
+
+export const TextFieldError: Story = {
+  args: {
+    ...TextFieldTemplate.args,
+    label: "This is a URL field",
+    type: "url",
+    value: "This value is invalid",
+    description:
+      "This component supports custom, real-time and server-side data validation",
+    isInvalid: true,
+    errorMessage: "Error messages can be customised or passed programmatically",
+  },
+};

From 4e0c23cedb7bd450e156e9243026639f25256b29 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 19 Jun 2024 14:34:00 -0700
Subject: [PATCH 20/33] add handling for visible required/optional status label

---
 .../src/components/TextField/TextField.css           |  4 ++++
 .../src/components/TextField/TextField.tsx           | 12 +++++++++++-
 .../src/stories/TextField.stories.tsx                |  8 ++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
index 7945f03b..eaf2a471 100644
--- a/packages/react-components/src/components/TextField/TextField.css
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -14,6 +14,10 @@
   padding: var(--layout-margin-hair) 0px;
 }
 
+.bcds-react-aria-TextField--Label .required {
+  color: var(--typography-color-placeholder);
+}
+
 /* Styles for the text description below the input field */
 .bcds-react-aria-TextField--Description {
   font: var(--typography-regular-small-body);
diff --git a/packages/react-components/src/components/TextField/TextField.tsx b/packages/react-components/src/components/TextField/TextField.tsx
index 68010b75..f2502f31 100644
--- a/packages/react-components/src/components/TextField/TextField.tsx
+++ b/packages/react-components/src/components/TextField/TextField.tsx
@@ -23,6 +23,8 @@ export interface TextFieldProps extends ReactAriaTextFieldProps {
   iconLeft?: React.ReactElement;
   /* Icon slot to right of text input field */
   iconRight?: React.ReactElement;
+  /* Sets input as required or optional */
+  isRequired?: boolean;
 }
 
 export default function TextField({
@@ -32,12 +34,20 @@ export default function TextField({
   errorMessage,
   iconLeft,
   iconRight,
+  isRequired,
   ...props
 }: TextFieldProps) {
   return (
     <ReactAriaTextField className="bcds-react-aria-TextField" {...props}>
       {label && (
-        <Label className="bcds-react-aria-TextField--Label">{label}</Label>
+        <Label className="bcds-react-aria-TextField--Label">
+          {label}{" "}
+          {isRequired && (
+            <span className="bcds-react-aria-TextField--Label required">
+              (required)
+            </span>
+          )}
+        </Label>
       )}
       <div className={`bcds-react-aria-TextField--container ${size}`}>
         {iconLeft}
diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
index eebd11ca..b0c41768 100644
--- a/packages/react-components/src/stories/TextField.stories.tsx
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -57,6 +57,7 @@ export const TextFieldTemplate: Story = {
     label: "Label",
     size: "medium",
     type: "text",
+    value: "Input value",
     description: "Optional description or helper text",
   },
 };
@@ -69,6 +70,13 @@ export const SmallTextField: Story = {
   },
 };
 
+export const RequiredTextField: Story = {
+  args: {
+    ...TextFieldTemplate.args,
+    isRequired: true,
+  },
+};
+
 const iconPlaceholder = (
   <svg
     width="20"

From a65570d732e0f4a30e9233ebdf7c15e7aab2b2ba Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 19 Jun 2024 15:53:07 -0700
Subject: [PATCH 21/33] label styling and story cleanup

---
 .../react-components/src/components/TextField/TextField.css   | 4 ++--
 packages/react-components/src/stories/TextField.stories.tsx   | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
index eaf2a471..4aa10d6b 100644
--- a/packages/react-components/src/components/TextField/TextField.css
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -10,12 +10,12 @@
 /* Styles for the text label above the input field */
 .bcds-react-aria-TextField--Label {
   font: var(--typography-regular-small-body);
-  color: var(--typography-color-secondary);
+  color: var(--typography-color-primary);
   padding: var(--layout-margin-hair) 0px;
 }
 
 .bcds-react-aria-TextField--Label .required {
-  color: var(--typography-color-placeholder);
+  color: var(--typography-color-secondary);
 }
 
 /* Styles for the text description below the input field */
diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
index b0c41768..1aea51c8 100644
--- a/packages/react-components/src/stories/TextField.stories.tsx
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -57,7 +57,6 @@ export const TextFieldTemplate: Story = {
     label: "Label",
     size: "medium",
     type: "text",
-    value: "Input value",
     description: "Optional description or helper text",
   },
 };

From b8518431cf49049dc167b16818b3867d47d39bc3 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Thu, 20 Jun 2024 11:49:06 -0700
Subject: [PATCH 22/33] fix box-sizing issue and add visible error icon when
 isInvalid is true

---
 .../src/components/TextField/TextField.css    |  1 +
 .../src/components/TextField/TextField.tsx    | 72 ++++++++++++-------
 .../src/stories/TextField.stories.tsx         |  4 ++
 3 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
index 4aa10d6b..d04437bb 100644
--- a/packages/react-components/src/components/TextField/TextField.css
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -42,6 +42,7 @@
 
 .bcds-react-aria-TextField--Input {
   border: none;
+  flex-grow: 1;
 }
 
 /* Sizes */
diff --git a/packages/react-components/src/components/TextField/TextField.tsx b/packages/react-components/src/components/TextField/TextField.tsx
index f2502f31..f997f613 100644
--- a/packages/react-components/src/components/TextField/TextField.tsx
+++ b/packages/react-components/src/components/TextField/TextField.tsx
@@ -23,10 +23,25 @@ export interface TextFieldProps extends ReactAriaTextFieldProps {
   iconLeft?: React.ReactElement;
   /* Icon slot to right of text input field */
   iconRight?: React.ReactElement;
-  /* Sets input as required or optional */
-  isRequired?: boolean;
 }
 
+const iconError = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="20px/Icon error">
+      <path
+        id="Icon"
+        d="M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z"
+        fill="var(--icons-color-danger)"
+      />
+    </g>
+  </svg>
+);
+
 export default function TextField({
   size = "medium",
   label,
@@ -34,37 +49,40 @@ export default function TextField({
   errorMessage,
   iconLeft,
   iconRight,
-  isRequired,
   ...props
 }: TextFieldProps) {
   return (
     <ReactAriaTextField className="bcds-react-aria-TextField" {...props}>
-      {label && (
-        <Label className="bcds-react-aria-TextField--Label">
-          {label}{" "}
-          {isRequired && (
-            <span className="bcds-react-aria-TextField--Label required">
-              (required)
-            </span>
+      {({ isRequired, isInvalid }) => (
+        <>
+          {label && (
+            <Label className="bcds-react-aria-TextField--Label">
+              {label}{" "}
+              {isRequired && (
+                <span className="bcds-react-aria-TextField--Label required">
+                  (required)
+                </span>
+              )}
+            </Label>
           )}
-        </Label>
-      )}
-      <div className={`bcds-react-aria-TextField--container ${size}`}>
-        {iconLeft}
-        <Input className="bcds-react-aria-TextField--Input" />
-        {iconRight}
-      </div>
-      {description && (
-        <Text
-          slot="description"
-          className={`bcds-react-aria-TextField--Description`}
-        >
-          {description}
-        </Text>
+          <div className={`bcds-react-aria-TextField--container ${size}`}>
+            {iconLeft}
+            <Input className="bcds-react-aria-TextField--Input" />
+            {isInvalid ? iconError : iconRight}
+          </div>
+          {description && (
+            <Text
+              slot="description"
+              className={`bcds-react-aria-TextField--Description`}
+            >
+              {description}
+            </Text>
+          )}
+          <FieldError className="bcds-react-aria-TextField--Error">
+            {errorMessage}
+          </FieldError>
+        </>
       )}
-      <FieldError className="bcds-react-aria-TextField--Error">
-        {errorMessage}
-      </FieldError>
     </ReactAriaTextField>
   );
 }
diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
index 1aea51c8..2f027b6d 100644
--- a/packages/react-components/src/stories/TextField.stories.tsx
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -26,6 +26,10 @@ const meta = {
       control: { type: "text" },
       description: "Text that appears above the input field",
     },
+    isRequired: {
+      control: "boolean",
+      description: "Is this input required?",
+    },
     isDisabled: {
       control: "boolean",
       description: "Is the input disabled?",

From ccf78a0a0dd6745413cfc27cd12535d8bde3e6f6 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Thu, 20 Jun 2024 12:14:48 -0700
Subject: [PATCH 23/33] add new styling for focus state

---
 .../react-components/src/components/TextField/TextField.css    | 3 +++
 .../react-components/src/components/TextField/TextField.tsx    | 1 +
 2 files changed, 4 insertions(+)

diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
index d04437bb..16efbbfd 100644
--- a/packages/react-components/src/components/TextField/TextField.css
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -73,6 +73,9 @@
   border-radius: var(--layout-border-radius-large);
   border: var(--layout-border-width-small) solid
     var(--surface-color-border-active);
+  outline: solid var(--layout-border-width-medium)
+    var(--surface-color-border-active);
+  outline-offset: var(--layout-margin-hair);
 }
 
 .bcds-react-aria-TextField--container:hover {
diff --git a/packages/react-components/src/components/TextField/TextField.tsx b/packages/react-components/src/components/TextField/TextField.tsx
index f997f613..b67ca397 100644
--- a/packages/react-components/src/components/TextField/TextField.tsx
+++ b/packages/react-components/src/components/TextField/TextField.tsx
@@ -25,6 +25,7 @@ export interface TextFieldProps extends ReactAriaTextFieldProps {
   iconRight?: React.ReactElement;
 }
 
+/* Icon displayed when input is in invalid state */
 const iconError = (
   <svg
     width="20"

From 79ac9c574e1f72700638735469eb0b92cc0c806a Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Thu, 20 Jun 2024 12:22:00 -0700
Subject: [PATCH 24/33] move iconError into its own slot rather than overriding
 iconRight

---
 .../react-components/src/components/TextField/TextField.tsx  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/components/TextField/TextField.tsx b/packages/react-components/src/components/TextField/TextField.tsx
index b67ca397..5ca1c57f 100644
--- a/packages/react-components/src/components/TextField/TextField.tsx
+++ b/packages/react-components/src/components/TextField/TextField.tsx
@@ -33,7 +33,7 @@ const iconError = (
     viewBox="0 0 20 20"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g id="20px/Icon error">
+    <g id="20px/Error icon">
       <path
         id="Icon"
         d="M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z"
@@ -69,7 +69,8 @@ export default function TextField({
           <div className={`bcds-react-aria-TextField--container ${size}`}>
             {iconLeft}
             <Input className="bcds-react-aria-TextField--Input" />
-            {isInvalid ? iconError : iconRight}
+            {isInvalid && iconError}
+            {iconRight}
           </div>
           {description && (
             <Text

From 02278b4dca85de9141d9d44f2de730ace947af4f Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Thu, 20 Jun 2024 13:22:51 -0700
Subject: [PATCH 25/33] correct styling for error message slot

---
 .../react-components/src/components/TextField/TextField.css     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
index 16efbbfd..8b9dbab0 100644
--- a/packages/react-components/src/components/TextField/TextField.css
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -114,6 +114,6 @@
 
 /* Styles for the error message slot */
 .bcds-react-aria-TextField--Error {
-  font: var(--typography-regular-body);
+  font: var(--typography-regular-small-body);
   color: var(--typography-color-danger);
 }

From 52e7379b19be6493c6709b0ac2d724326fbc70f0 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 24 Jun 2024 09:47:18 -0700
Subject: [PATCH 26/33] fix spacing between label and 'required' tag

---
 .../react-components/src/components/TextField/TextField.css     | 1 +
 .../react-components/src/components/TextField/TextField.tsx     | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
index 8b9dbab0..4a2c455b 100644
--- a/packages/react-components/src/components/TextField/TextField.css
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -16,6 +16,7 @@
 
 .bcds-react-aria-TextField--Label .required {
   color: var(--typography-color-secondary);
+  padding: var(--layout-padding-none) var(--layout-padding-xsmall);
 }
 
 /* Styles for the text description below the input field */
diff --git a/packages/react-components/src/components/TextField/TextField.tsx b/packages/react-components/src/components/TextField/TextField.tsx
index 5ca1c57f..f10edf5a 100644
--- a/packages/react-components/src/components/TextField/TextField.tsx
+++ b/packages/react-components/src/components/TextField/TextField.tsx
@@ -58,7 +58,7 @@ export default function TextField({
         <>
           {label && (
             <Label className="bcds-react-aria-TextField--Label">
-              {label}{" "}
+              {label}
               {isRequired && (
                 <span className="bcds-react-aria-TextField--Label required">
                   (required)

From 99b0e5b538a97912d1e04a90c67bc598e7f5e6e7 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Tue, 25 Jun 2024 17:25:39 -0700
Subject: [PATCH 27/33] full docs for text field component

---
 .../src/stories/TextField.mdx                 | 55 ++++++++++++++++++-
 .../src/stories/TextField.stories.tsx         |  9 ++-
 2 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/stories/TextField.mdx b/packages/react-components/src/stories/TextField.mdx
index 6e5778a4..8cab1993 100644
--- a/packages/react-components/src/stories/TextField.mdx
+++ b/packages/react-components/src/stories/TextField.mdx
@@ -33,9 +33,62 @@ Learn more about working with the text field component:
 - [Usage and best practice guidance](https://www2.gov.bc.ca/gov/content/digital/design-system/components/text-field)
 - [View the text field component in Figma](#)
 
-This component is based on [React Aria TextField](https://react-spectrum.adobe.com/react-aria/TextField.html). Consult the React Aria documentation for additional technical information.
+This component is based on [React Aria TextField](https://react-spectrum.adobe.com/react-aria/TextField.html). Consult the React Aria documentation for additional technical information and a full list of supported props.
+
+### Validation
+
+Default and custom data validation support is built in, using the [React Aria FieldError subcomponent](https://react-spectrum.adobe.com/react-aria/forms.html#validation).
 
 ## Controls
 
 <Primary of={TextFieldStories} />
 <Controls of={TextFieldStories.TextFieldTemplate} />
+
+## Configuration
+
+### Size
+
+The `size` prop enables you to choose between medium (default) and small (reduced height) versions:
+
+<Canvas of={TextFieldStories.MediumTextField} />
+<Canvas of={TextFieldStories.SmallTextField} />
+
+### Required
+
+By default, input fields are marked as optional. Use the `isRequired` prop to mark an input as required, and display a text label:
+
+<Canvas of={TextFieldStories.RequiredTextField} />
+
+### Icons
+
+You can display icons in a text field by passing an image to either or both of the `iconLeft` and `iconRight` slots:
+
+<Canvas of={TextFieldStories.TextFieldWithIcons} />
+
+Icons can be used to provide an additional visual indicator of a text field's function, like a search field:
+
+<Canvas of={TextFieldStories.SearchField} />
+
+### Input types
+
+Use the `type` prop to define the type of input a text field expects. If no `type` prop is provided, the attribute defaults to `text`.
+
+For example, setting the type to `password` automatically obscures input:
+
+<Canvas of={TextFieldStories.PasswordField} />
+
+Types like `url`, `tel` or `email` are used for data validation. Consult the MDN documentation for [a full list of valid input type attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types).
+
+### States
+
+Use `isDisabled` to disable a text field. A disabled field cannot be focused or interacted with:
+
+<Canvas of={TextFieldStories.DisabledTextField} />
+
+Use `isReadOnly` to lock a field to its current value. A read-only input can be focused and copied, but cannot be edited:
+
+<Canvas of={TextFieldStories.ReadOnlyTextField} />
+
+The `isInvalid` prop should be set programmatically when an input is invalid. It renders an error icon in the input field, changes the border colour and displays an `errorMessage` (using the [FieldError subcomponent](https://react-spectrum.adobe.com/react-aria/TextField.html#validation)):
+
+<Canvas of={TextFieldStories.TextFieldError} />
diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
index 2f027b6d..fa9bb380 100644
--- a/packages/react-components/src/stories/TextField.stories.tsx
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -65,11 +65,18 @@ export const TextFieldTemplate: Story = {
   },
 };
 
+export const MediumTextField: Story = {
+  args: {
+    ...TextFieldTemplate.args,
+    description: "This is the default/medium size variant of the input field",
+  },
+};
+
 export const SmallTextField: Story = {
   args: {
     ...TextFieldTemplate.args,
     size: "small",
-    description: "This is a thinner variant of the input field",
+    description: "The small size variant has reduced height",
   },
 };
 

From c42f40d7fb7b9857f6e8715c4d4da75a162e279c Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 26 Jun 2024 10:55:23 -0700
Subject: [PATCH 28/33] add default behaviour for size prop. textfield will
 default to medium unless otherwise specified.

---
 .../react-components/src/components/TextField/TextField.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/components/TextField/TextField.tsx b/packages/react-components/src/components/TextField/TextField.tsx
index f10edf5a..c263301c 100644
--- a/packages/react-components/src/components/TextField/TextField.tsx
+++ b/packages/react-components/src/components/TextField/TextField.tsx
@@ -44,7 +44,7 @@ const iconError = (
 );
 
 export default function TextField({
-  size = "medium",
+  size,
   label,
   description,
   errorMessage,
@@ -66,7 +66,9 @@ export default function TextField({
               )}
             </Label>
           )}
-          <div className={`bcds-react-aria-TextField--container ${size}`}>
+          <div
+            className={`bcds-react-aria-TextField--container ${size === "small" ? "small" : "medium"}`}
+          >
             {iconLeft}
             <Input className="bcds-react-aria-TextField--Input" />
             {isInvalid && iconError}

From 08b73571a09e0c5a59dfc4de7c0ee202ce3cbc2e Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Tue, 2 Jul 2024 13:41:42 -0700
Subject: [PATCH 29/33] add min-height to input field as accessibility
 safeguard

---
 .../react-components/src/components/TextField/TextField.css     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
index 4a2c455b..73e09b3e 100644
--- a/packages/react-components/src/components/TextField/TextField.css
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -50,11 +50,13 @@
 .bcds-react-aria-TextField--container.small {
   /* using margin token is kludgy, consider adding component-specific token for input sizing */
   height: var(--layout-margin-xlarge);
+  min-height: var(--layout-margin-xlarge);
 }
 
 .bcds-react-aria-TextField--container.medium {
   /* using margin token is kludgy, consider adding component-specific token for input sizing */
   height: var(--layout-margin-xxlarge);
+  min-height: var(--layout-margin-xxlarge);
 }
 
 /* Text input field */

From 290b8412ac4f1d6a7ee10ff511a18c942108c59e Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 17 Jul 2024 10:47:10 -0700
Subject: [PATCH 30/33] cleanup and add missing text colour rules

---
 .../src/components/TextField/TextField.css           | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
index 73e09b3e..d5c67a17 100644
--- a/packages/react-components/src/components/TextField/TextField.css
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -41,11 +41,6 @@
   padding: var(--layout-padding-small) 12px;
 }
 
-.bcds-react-aria-TextField--Input {
-  border: none;
-  flex-grow: 1;
-}
-
 /* Sizes */
 .bcds-react-aria-TextField--container.small {
   /* using margin token is kludgy, consider adding component-specific token for input sizing */
@@ -63,6 +58,13 @@
 .bcds-react-aria-TextField--Input {
   font: var(--typography-regular-body);
   padding: var(--layout-padding-none);
+  color: var(--typography-color-primary);
+  border: none;
+  flex-grow: 1;
+}
+
+.bcds-react-aria-TextField--Input::placeholder {
+  color: var(--typography-color-placeholder);
 }
 
 /* Hover and focus states */

From 5d1f3fde7d252bca9a04be390ca0c23961c58d00 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 17 Jul 2024 10:50:57 -0700
Subject: [PATCH 31/33] add missing colour rule for disabled state

---
 packages/react-components/src/components/TextField/TextField.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css
index d5c67a17..405ea68b 100644
--- a/packages/react-components/src/components/TextField/TextField.css
+++ b/packages/react-components/src/components/TextField/TextField.css
@@ -96,6 +96,7 @@
 }
 
 .bcds-react-aria-TextField--Input[data-disabled] {
+  color: var(--typography-color-placeholder);
   cursor: not-allowed;
 }
 

From d9b8c91bd60df081654ca77af5ce92cdafafbfd5 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 17 Jul 2024 11:05:51 -0700
Subject: [PATCH 32/33] add note about placeholder text

---
 packages/react-components/src/stories/TextField.mdx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react-components/src/stories/TextField.mdx b/packages/react-components/src/stories/TextField.mdx
index 8cab1993..faa910e7 100644
--- a/packages/react-components/src/stories/TextField.mdx
+++ b/packages/react-components/src/stories/TextField.mdx
@@ -39,6 +39,10 @@ This component is based on [React Aria TextField](https://react-spectrum.adobe.c
 
 Default and custom data validation support is built in, using the [React Aria FieldError subcomponent](https://react-spectrum.adobe.com/react-aria/forms.html#validation).
 
+### Placeholder text
+
+As a general rule, the `placeholder` attribute should not be used on text fields. While `placeholder` is technically supported, the use of 'ghost text' has [serious accessibility and usability issues](https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder#accessibility_concerns).
+
 ## Controls
 
 <Primary of={TextFieldStories} />

From eec554a969145350edb86c5daac977826f14b021 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Wed, 17 Jul 2024 11:14:02 -0700
Subject: [PATCH 33/33] add randomly generated example password to login field
 example

---
 packages/react-components/src/stories/TextField.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/stories/TextField.stories.tsx b/packages/react-components/src/stories/TextField.stories.tsx
index fa9bb380..627c2fc2 100644
--- a/packages/react-components/src/stories/TextField.stories.tsx
+++ b/packages/react-components/src/stories/TextField.stories.tsx
@@ -152,7 +152,7 @@ export const PasswordField: Story = {
     label: "Password",
     size: "medium",
     type: "password",
-    value: "password",
+    value: "s&mU9ZHu5d5^uP",
     description: "Input is automatically obscured",
   },
 };