changelog update and example

Author: EdwinGuzman

src/components/AlphabetFilter/alphabetFilterChangelogData.ts

@@ -9,6 +9,15 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: [
+      "Updated to always render the helper text div for accessible aria-live announcements.",
+    ],
+  },
   {
     date: "2025-08-11",
     version: "4.0.0",

src/components/AudioPlayer/audioPlayerChangelogData.ts

@@ -9,6 +9,15 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: [
+      "Updated to always render the helper text div for accessible aria-live announcements.",
+    ],
+  },
   {
     date: "2025-07-17",
     version: "3.6.4",

src/components/Checkbox/checkboxChangelogData.ts

@@ -9,6 +9,15 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: [
+      "Updated to always render the helper text div for accessible aria-live announcements.",
+    ],
+  },
   {
     date: "2025-08-11",
     version: "4.0.0",

src/components/FilterBarInline/filterBarInlineChangelogData.ts

@@ -9,6 +9,15 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: [
+      "Updated to always render the helper text div for accessible aria-live announcements.",
+    ],
+  },
   {
     date: "2025-08-11",
     version: "4.0.0",

src/components/Form/Form.mdx

@@ -171,6 +171,10 @@ the `Form` component: `"grid.xxs"`, `"grid.xs"`, `"grid.s"`, `"grid.m"`,
   language="tsx"
 />
 
+## Example without helper text
+
+<Canvas of={FormStories.FormWithoutHelperText} />
+
 ## Changelog
 
 <ComponentChangelogTable changelogData={changelogData} />

src/components/Form/Form.stories.tsx

@@ -282,3 +282,77 @@ const getForms = (list) => <ul style={{ listStyle: "none" }}>{list}</ul>;
 export const FormSpacing: Story = {
   render: () => getForms(sizes),
 };
+
+export const FormWithoutHelperText: Story = {
+  render: () => (
+    <Form id="form-id" action="/end/point" method="get">
+      <FormRow>
+        <FormField>
+          <TextInput
+            id="first-name"
+            isRequired
+            labelText="First Name"
+          />
+        </FormField>
+        <FormField>
+          <TextInput
+            id="last-name"
+            isRequired
+            labelText="Last Name"
+          />
+        </FormField>
+        <FormField>
+          <DatePicker
+            dateType="full"
+            dateFormat="yyyy-MM-dd"
+            id="date-range"
+            invalidText="Please select a valid date range."
+            isDateRange
+            labelText="Select the date range you want to visit NYPL"
+            minDate="1/1/2021"
+            maxDate="1/1/2022"
+            nameFrom="visit-dates"
+            showLabel={false}
+          />
+        </FormField>
+      </FormRow>
+      <FormField>
+        <TextInput
+          id="username"
+          isRequired
+          labelText="Username"
+        />
+      </FormField>
+      <FormField>
+        <TextInput
+          id="password"
+          isRequired
+          labelText="Password"
+        />
+      </FormField>
+      <FormRow>
+        <FormField>
+          <TextInput
+            id="phone"
+            labelText="Phone Field"
+            type="tel"
+          />
+        </FormField>
+        <FormField>
+          <TextInput
+            id="url"
+            labelText="URL Field"
+            type="url"
+          />
+        </FormField>
+        <FormField>
+          <TextInput
+            id="age"
+            labelText="Age"
+            type="number"
+          />
+        </FormField>
+      </FormRow>
+      </Form>
+  ),
+};

src/components/Radio/radioChangelogData.ts

@@ -9,6 +9,15 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: [
+      "Updated to always render the helper text div for accessible aria-live announcements.",
+    ],
+  },
   {
     date: "2025-08-11",
     version: "4.0.0",

src/components/SearchBar/searchBarChangelogData.ts

@@ -9,6 +9,15 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: [
+      "Updated to always render the helper text div for accessible aria-live announcements.",
+    ],
+  },
   {
     date: "2025-08-11",
     version: "4.0.0",

src/components/Select/selectChangelogData.ts

@@ -9,6 +9,15 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: [
+      "Updated to always render the helper text div for accessible aria-live announcements.",
+    ],
+  },
   {
     date: "2026-03-05",
     version: "4.1.5",

src/components/Slider/sliderChangelogData.ts

@@ -9,6 +9,15 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: [
+      "Updated to always render the helper text div for accessible aria-live announcements.",
+    ],
+  },
   {
     date: "2025-08-11",
     version: "4.0.0",