ISW-5483: alignment of label element

CHANGELOG.md

@@ -10,6 +10,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ### Updates
 
+- Updated the styles on the `Label` component to improve text alignemnt. This update also updates the styles for the label element in the `FeedbackBox`, `NewsletterSignup`, `Select`, `Slider`, and `TextInput` components.
 - Updates the `ComponentWrapper` component so it always renders the `HelperErrorText` component. This resolves aria-live announcement issues when there is invalid text but no helper text.
 
 ## 4.1.5 (March 5, 2026)

package.json

@@ -50,6 +50,7 @@
     "trailingComma": "es5"
   },
   "overrides": {
+    "@microsoft/api-extractor": "7.34.4",
     "types-ramda": "0.29.4"
   },
   "dependencies": {

src/components/FeedbackBox/FeedbackBox.mdx

@@ -18,7 +18,7 @@ import { changelogData } from "./feedbackBoxChangelogData";
   componentName="FeedbackBox"
   summary="Used to render and control the full NYPL website feeback experience"
   versionAdded="1.3.0"
-  versionLatest="4.0.0"
+  versionLatest="Prerelease"
 />
 
 <Canvas of={FeedbackBoxStories.WithControls} />

src/components/FeedbackBox/feedbackBoxChangelogData.ts

@@ -9,6 +9,15 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: [
+      "Updates the styles for the labels on the input fields to improve text alignment.",
+    ],
+  },
   {
     date: "2025-08-11",
     version: "4.0.0",

src/components/Form/Form.stories.tsx

@@ -6,48 +6,51 @@ import Button from "../Button/Button";
 import ButtonGroup from "../ButtonGroup/ButtonGroup";
 import Checkbox from "../Checkbox/Checkbox";
 import CheckboxGroup from "../CheckboxGroup/CheckboxGroup";
-import DatePicker from "../DatePicker/DatePicker";
 import Form, { FormRow, FormField } from "./Form";
 import { gridGapsArray } from "../Grid/SimpleGrid";
 import Heading from "../Heading/Heading";
 import HorizontalRule from "../HorizontalRule/HorizontalRule";
+import MultiSelect from "../MultiSelect/MultiSelect";
+import MultiSelectGroup from "../MultiSelectGroup/MultiSelectGroup";
 import Radio from "../Radio/Radio";
 import RadioGroup from "../RadioGroup/RadioGroup";
 import Select from "../Select/Select";
 import Text from "../Text/Text";
 import TextInput from "../TextInput/TextInput";
+import useMultiSelect from "../../hooks/useMultiSelect";
 
-const meta: Meta<typeof Form> = {
-  title: "Components/Form Elements/Form",
-  component: Form,
-  argTypes: {
-    gap: {
-      control: { type: "select" },
-      table: { defaultValue: { summary: "grid.l" } },
-      options: gridGapsArray,
+const FormExampleStory = (args) => {
+  const { onChange, onMixedStateChange, onClear, selectedItems } =
+    useMultiSelect();
+  const multiSelectItems = [
+    {
+      id: "colors",
+      name: "Colors",
+      items: [
+        { id: "red", name: "Red" },
+        { id: "blue", name: "Blue" },
+        { id: "yellow", name: "Yellow" },
+      ],
     },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Form>;
-
-/**
- * Main Story for the Form component. This must contains the `args`
- * and `parameters` properties in this object.
- */
-export const WithControls: Story = {
-  args: {
-    gap: "grid.l",
-  },
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?type=design&node-id=10734-2768",
+    {
+      id: "pets",
+      name: "Pets",
+      items: [
+        { id: "cat", name: "Cat" },
+        {
+          id: "dog",
+          name: "Dog",
+          children: [
+            { id: "corgy", name: "Corgy" },
+            { id: "german-sheperd", name: "German Sheperd" },
+            { id: "afghan-hound", name: "Afghan Hound" },
+          ],
+        },
+        { id: "rat", name: "Rat" },
+      ],
     },
-    jest: "Form.test.tsx",
-  },
-  render: (args) => (
+  ];
+  return (
     <Form id="form-id" action="/end/point" method="get" {...args}>
       <FormRow>
         <FormField>
@@ -66,23 +69,6 @@ export const WithControls: Story = {
             labelText="Last Name"
           />
         </FormField>
-        <FormField>
-          <DatePicker
-            dateType="full"
-            dateFormat="yyyy-MM-dd"
-            helperTextFrom="From this date."
-            helperTextTo="To this date."
-            helperText="Select a valid date range."
-            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
@@ -180,6 +166,13 @@ export const WithControls: Story = {
             />
           </CheckboxGroup>
         </FormField>
+        <FormField>
+          <TextInput
+            helperText="This is an optional field."
+            id="text-input-example"
+            labelText="Text input"
+          />
+        </FormField>
         <FormField>
           <RadioGroup id="radio-group" labelText="Radio Group" name="rg1">
             <Radio id="radio1" labelText="Radio 1" value="radio1" />
@@ -204,6 +197,51 @@ export const WithControls: Story = {
           </Select>
         </FormField>
       </FormRow>
+      <FormRow>
+        <FormField>
+          <TextInput
+            helperText="This is an optional field."
+            id="text-input-alignment-example"
+            labelText="Text input"
+          />
+        </FormField>
+        <FormField>
+          <MultiSelectGroup
+            showLabel={true}
+            id="row-full"
+            layout="row"
+            labelText="MultiSelect example"
+            multiSelectWidth="full"
+            renderMultiSelect={({ isBlockElement, multiSelectWidth }) => {
+              return multiSelectItems.map((multiSelect) => (
+                <MultiSelect
+                  buttonText="MultiSelect"
+                  defaultItemsVisible={5}
+                  id={`${multiSelect.id}-3`}
+                  isBlockElement={isBlockElement}
+                  items={multiSelect.items}
+                  key={`${multiSelect.id}-3`}
+                  onChange={(e) => {
+                    onChange(e.target.id, `${multiSelect.id}-3`);
+                  }}
+                  onMixedStateChange={(e) => {
+                    return onMixedStateChange({
+                      parentId: e.target.id,
+                      multiSelectId: `${multiSelect.id}-3`,
+                      items: multiSelect.items,
+                    });
+                  }}
+                  onClear={() => {
+                    onClear(`${multiSelect.id}-3`);
+                  }}
+                  selectedItems={selectedItems}
+                  width={multiSelectWidth}
+                />
+              ));
+            }}
+          />
+        </FormField>
+      </FormRow>
       <FormRow>
         <FormField>
           <ButtonGroup>
@@ -212,7 +250,40 @@ export const WithControls: Story = {
         </FormField>
       </FormRow>
     </Form>
-  ),
+  );
+};
+
+const meta: Meta<typeof Form> = {
+  title: "Components/Form Elements/Form",
+  component: Form,
+  argTypes: {
+    gap: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "grid.l" } },
+      options: gridGapsArray,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Form>;
+
+/**
+ * Main Story for the Form component. This must contains the `args`
+ * and `parameters` properties in this object.
+ */
+export const WithControls: Story = {
+  args: {
+    gap: "grid.l",
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?type=design&node-id=10734-2768",
+    },
+    jest: "Form.test.tsx",
+  },
+  render: (args) => <FormExampleStory {...args} />,
 };
 
 // The following functions are used in the remaining Form example stories
@@ -315,23 +386,6 @@ function FormInvalidTextExample() {
               invalidText="Oops, something is wrong."
             />
           </FormField>
-          <FormField>
-            <DatePicker
-              dateType="full"
-              dateFormat="yyyy-MM-dd"
-              helperTextFrom="From this date."
-              helperTextTo="To this date."
-              id="date-range"
-              invalidText="Invalid 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}
-              isInvalid={isInvalid}
-            />
-          </FormField>
         </FormRow>
         <FormField>
           <TextInput

src/components/Label/Label.mdx

@@ -17,7 +17,7 @@ import { changelogData } from "./labelChangelogData";
   componentName="Label"
   summary="Native label element used for form elements"
   versionAdded="0.0.10"
-  versionLatest="4.0.0"
+  versionLatest="Prerelease"
 />
 
 <Canvas of={LabelStories.WithControls} />

src/components/Label/labelChangelogData.ts

@@ -9,6 +9,13 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: ["Updates the `display` style attribute to improve text alignment."],
+  },
   {
     date: "2025-08-11",
     version: "4.0.0",

src/components/MultiSelectGroup/MultiSelectGroup.stories.tsx

@@ -366,6 +366,11 @@ export const WithControls: Story = {
   },
 };
 
+// The following are additional MultiSelectGroup example Stories.
+export const LayoutPatterns: Story = {
+  render: (_args) => <MultiSelectGroupLayoutStory />,
+};
+
 export const closeOnBlurState: Story = {
   render: () => (
     <MultiSelectGroupWithCloseOnBlurStory
@@ -374,8 +379,3 @@ export const closeOnBlurState: Story = {
     />
   ),
 };
-
-// The following are additional MultiSelectGroup example Stories.
-export const LayoutPatterns: Story = {
-  render: (_args) => <MultiSelectGroupLayoutStory />,
-};

src/components/NewsletterSignup/NewsletterSignup.mdx

@@ -20,7 +20,7 @@ import { changelogData } from "./newsletterSignupChangelogData";
   componentName="NewsletterSignup"
   summary="Used to render and control the full NYPL newsletter signup experience"
   versionAdded="2.1.0"
-  versionLatest="4.0.0"
+  versionLatest="Prerelease"
 />
 
 <Canvas of={NewsletterSignupStories.WithControls} />

src/components/NewsletterSignup/newsletterSignupChangelogData.ts

@@ -9,6 +9,15 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: [
+      "Updates the styles for the label on the input field to improve text alignment.",
+    ],
+  },
   {
     date: "2025-08-11",
     version: "4.0.0",

src/components/Select/Select.mdx

@@ -20,7 +20,7 @@ import { changelogData } from "./selectChangelogData";
   componentName="Select"
   summary="Input element that allows a user to pick a single value from a list of related options"
   versionAdded="0.7.0"
-  versionLatest="4.1.5"
+  versionLatest="Prerelease"
 />
 
 <Canvas of={SelectStories.WithControls} />

src/components/Select/selectChangelogData.ts

@@ -16,6 +16,7 @@ export const changelogData: ChangelogData[] = [
     affects: ["Styles"],
     notes: [
       "Updated to always render the helper text div for accessible aria-live announcements.",
+      "Updates the styles on the input label to improve text alignment.",
     ],
   },
   {

src/components/Slider/Slider.mdx

@@ -20,7 +20,7 @@ import { changelogData } from "./sliderChangelogData";
   componentName="Slider"
   summary="Input element that allows a user to select a value or range of values from a predefined range"
   versionAdded="0.25.4"
-  versionLatest="4.0.0"
+  versionLatest="Prerelease"
 />
 
 <Canvas of={SliderStories.WithControls} />

src/components/Slider/sliderChangelogData.ts

@@ -16,6 +16,7 @@ export const changelogData: ChangelogData[] = [
     affects: ["Styles"],
     notes: [
       "Updated to always render the helper text div for accessible aria-live announcements.",
+      "Updates the styles on the input label to improve text alignment.",
     ],
   },
   {

src/components/TextInput/TextInput.mdx

@@ -15,7 +15,7 @@ import { changelogData } from "./textInputChangelogData";
   componentName="TextInput"
   summary="Input element that allows a user to enter free-form text data"
   versionAdded="0.22.0"
-  versionLatest="4.0.2"
+  versionLatest="Prerelease"
 />
 
 <Canvas of={TextInputStories.WithControls} />

src/components/TextInput/textInputChangelogData.ts

@@ -16,6 +16,7 @@ export const changelogData: ChangelogData[] = [
     affects: ["Styles"],
     notes: [
       "Updated to always render the helper text div for accessible aria-live announcements.",
+      "Updates the styles on the input label to improve text alignment.",
     ],
   },
   {