@sproutsocial/seeds-react-form-field 1.1.20 → 1.1.21

package/CHANGELOG.md

@@ -1,288 +0,0 @@
-# @sproutsocial/seeds-react-form-field
-
-## 1.1.20
-
-### Patch Changes
-
-- Updated dependencies [6611f6a]
-  - @sproutsocial/seeds-react-system-props@3.1.2
-  - @sproutsocial/seeds-react-box@1.1.24
-  - @sproutsocial/seeds-react-label@1.0.26
-  - @sproutsocial/seeds-react-text@1.5.1
-  - @sproutsocial/seeds-react-visually-hidden@1.0.25
-
-## 1.1.19
-
-### Patch Changes
-
-- Updated dependencies [85f9728]
-- Updated dependencies [fa7d859]
-  - @sproutsocial/seeds-react-theme@4.2.0
-  - @sproutsocial/seeds-react-box@1.1.23
-  - @sproutsocial/seeds-react-label@1.0.25
-  - @sproutsocial/seeds-react-visually-hidden@1.0.24
-
-## 1.1.18
-
-### Patch Changes
-
-- Updated dependencies [65b5879]
-  - @sproutsocial/seeds-react-text@1.5.0
-  - @sproutsocial/seeds-react-label@1.0.24
-
-## 1.1.17
-
-### Patch Changes
-
-- Updated dependencies [a13a571]
-  - @sproutsocial/seeds-react-theme@4.1.1
-  - @sproutsocial/seeds-react-box@1.1.22
-  - @sproutsocial/seeds-react-label@1.0.23
-  - @sproutsocial/seeds-react-visually-hidden@1.0.23
-
-## 1.1.16
-
-### Patch Changes
-
-- Updated dependencies [edc1819]
-  - @sproutsocial/seeds-react-text@1.4.3
-  - @sproutsocial/seeds-react-label@1.0.22
-
-## 1.1.15
-
-### Patch Changes
-
-- Updated dependencies [5892f44]
-  - @sproutsocial/seeds-react-system-props@3.1.1
-  - @sproutsocial/seeds-react-box@1.1.21
-  - @sproutsocial/seeds-react-label@1.0.21
-  - @sproutsocial/seeds-react-text@1.4.2
-  - @sproutsocial/seeds-react-visually-hidden@1.0.22
-
-## 1.1.14
-
-### Patch Changes
-
-- Updated dependencies [5114a32]
-  - @sproutsocial/seeds-react-theme@4.1.0
-  - @sproutsocial/seeds-react-box@1.1.20
-  - @sproutsocial/seeds-react-label@1.0.20
-  - @sproutsocial/seeds-react-visually-hidden@1.0.21
-
-## 1.1.13
-
-### Patch Changes
-
-- Updated dependencies [132ef9d]
-- Updated dependencies [132ef9d]
-  - @sproutsocial/seeds-react-theme@4.0.0
-  - @sproutsocial/seeds-react-system-props@3.1.0
-  - @sproutsocial/seeds-react-box@1.1.19
-  - @sproutsocial/seeds-react-label@1.0.19
-  - @sproutsocial/seeds-react-visually-hidden@1.0.20
-  - @sproutsocial/seeds-react-text@1.4.1
-
-## 1.1.12
-
-### Patch Changes
-
-- Updated dependencies [47c62b3]
-  - @sproutsocial/seeds-react-theme@3.7.1
-  - @sproutsocial/seeds-react-box@1.1.18
-  - @sproutsocial/seeds-react-label@1.0.18
-  - @sproutsocial/seeds-react-visually-hidden@1.0.19
-
-## 1.1.11
-
-### Patch Changes
-
-- Updated dependencies [06da9c2]
-  - @sproutsocial/seeds-react-theme@3.7.0
-  - @sproutsocial/seeds-react-box@1.1.17
-  - @sproutsocial/seeds-react-label@1.0.17
-  - @sproutsocial/seeds-react-visually-hidden@1.0.18
-
-## 1.1.10
-
-### Patch Changes
-
-- Updated dependencies [4ba8720]
-  - @sproutsocial/seeds-react-theme@3.6.2
-  - @sproutsocial/seeds-react-box@1.1.16
-  - @sproutsocial/seeds-react-label@1.0.16
-  - @sproutsocial/seeds-react-visually-hidden@1.0.17
-
-## 1.1.9
-
-### Patch Changes
-
-- Updated dependencies [1f9a473]
-  - @sproutsocial/seeds-react-theme@3.6.1
-  - @sproutsocial/seeds-react-box@1.1.15
-  - @sproutsocial/seeds-react-label@1.0.15
-  - @sproutsocial/seeds-react-visually-hidden@1.0.16
-
-## 1.1.8
-
-### Patch Changes
-
-- Updated dependencies [17d4f12]
-  - @sproutsocial/seeds-react-theme@3.6.0
-  - @sproutsocial/seeds-react-box@1.1.14
-  - @sproutsocial/seeds-react-label@1.0.14
-  - @sproutsocial/seeds-react-visually-hidden@1.0.15
-
-## 1.1.7
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-visually-hidden@1.0.14
-
-## 1.1.6
-
-### Patch Changes
-
-- Updated dependencies [118e300]
-  - @sproutsocial/seeds-react-theme@3.5.1
-  - @sproutsocial/seeds-react-box@1.1.13
-  - @sproutsocial/seeds-react-label@1.0.13
-  - @sproutsocial/seeds-react-visually-hidden@1.0.13
-
-## 1.1.5
-
-### Patch Changes
-
-- Updated dependencies [db6ce39]
-- Updated dependencies [20bb01b]
-  - @sproutsocial/seeds-react-theme@3.5.0
-  - @sproutsocial/seeds-react-box@1.1.12
-  - @sproutsocial/seeds-react-label@1.0.12
-  - @sproutsocial/seeds-react-visually-hidden@1.0.12
-
-## 1.1.4
-
-### Patch Changes
-
-- Updated dependencies [29ced53]
-  - @sproutsocial/seeds-react-text@1.4.0
-  - @sproutsocial/seeds-react-label@1.0.11
-
-## 1.1.3
-
-### Patch Changes
-
-- Updated dependencies [7716e16]
-  - @sproutsocial/seeds-react-theme@3.4.0
-  - @sproutsocial/seeds-react-box@1.1.11
-  - @sproutsocial/seeds-react-label@1.0.10
-  - @sproutsocial/seeds-react-visually-hidden@1.0.11
-
-## 1.1.2
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-theme@3.3.2
-- @sproutsocial/seeds-react-box@1.1.10
-- @sproutsocial/seeds-react-label@1.0.9
-- @sproutsocial/seeds-react-visually-hidden@1.0.10
-
-## 1.1.1
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-theme@3.3.1
-- @sproutsocial/seeds-react-box@1.1.9
-- @sproutsocial/seeds-react-label@1.0.8
-- @sproutsocial/seeds-react-visually-hidden@1.0.9
-
-## 1.1.0
-
-### Minor Changes
-
-- 81584cb: Add helper text to input element's `aria-describedby`
-  Bug fix: only add `aria-describedby` if error or helper text exists
-
-## 1.0.7
-
-### Patch Changes
-
-- Updated dependencies [750d1ea]
-  - @sproutsocial/seeds-react-theme@3.3.0
-  - @sproutsocial/seeds-react-visually-hidden@1.0.8
-  - @sproutsocial/seeds-react-box@1.1.8
-  - @sproutsocial/seeds-react-label@1.0.7
-
-## 1.0.6
-
-### Patch Changes
-
-- Updated dependencies [fa7579a]
-  - @sproutsocial/seeds-react-theme@3.2.1
-  - @sproutsocial/seeds-react-box@1.1.7
-  - @sproutsocial/seeds-react-label@1.0.6
-  - @sproutsocial/seeds-react-visually-hidden@1.0.7
-
-## 1.0.5
-
-### Patch Changes
-
-- Updated dependencies [8f6ba8d]
-  - @sproutsocial/seeds-react-theme@3.2.0
-  - @sproutsocial/seeds-react-box@1.1.6
-  - @sproutsocial/seeds-react-label@1.0.5
-  - @sproutsocial/seeds-react-visually-hidden@1.0.6
-
-## 1.0.4
-
-### Patch Changes
-
-- Updated dependencies [b1c3b44]
-  - @sproutsocial/seeds-react-theme@3.1.1
-  - @sproutsocial/seeds-react-box@1.1.5
-  - @sproutsocial/seeds-react-label@1.0.4
-  - @sproutsocial/seeds-react-visually-hidden@1.0.5
-
-## 1.0.3
-
-### Patch Changes
-
-- Updated dependencies [47580c4]
-  - @sproutsocial/seeds-react-theme@3.1.0
-  - @sproutsocial/seeds-react-box@1.1.4
-  - @sproutsocial/seeds-react-label@1.0.3
-  - @sproutsocial/seeds-react-visually-hidden@1.0.4
-
-## 1.0.2
-
-### Patch Changes
-
-- Updated dependencies [22e1111]
-  - @sproutsocial/seeds-react-text@1.3.2
-  - @sproutsocial/seeds-react-theme@3.0.1
-  - @sproutsocial/seeds-react-box@1.1.3
-  - @sproutsocial/seeds-react-label@1.0.2
-  - @sproutsocial/seeds-react-visually-hidden@1.0.3
-
-## 1.0.1
-
-### Patch Changes
-
-- 9fd8bac: Update dependencies to use semantic package version instead of wildcards
-- Updated dependencies [9fd8bac]
-  - @sproutsocial/seeds-react-visually-hidden@1.0.2
-  - @sproutsocial/seeds-react-system-props@3.0.2
-  - @sproutsocial/seeds-react-label@1.0.1
-  - @sproutsocial/seeds-react-theme@2.2.1
-  - @sproutsocial/seeds-react-text@1.3.1
-  - @sproutsocial/seeds-react-box@1.1.2
-
-## 1.0.0
-
-### Major Changes
-
-- 8ca97dd: Migrated FormField, Fieldset, and Label to their own seeds-react component
-
-### Patch Changes
-
-- Updated dependencies [8ca97dd]
-  - @sproutsocial/seeds-react-label@1.0.0

package/jest.config.js

@@ -1,9 +0,0 @@
-const baseConfig = require("@sproutsocial/seeds-testing");
-
-/** * @type {import('jest').Config} */
-const config = {
-  ...baseConfig,
-  displayName: "seeds-react-form-field",
-};
-
-module.exports = config;

package/src/FormField.stories.tsx

@@ -1,126 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { Box } from "@sproutsocial/seeds-react-box";
-import { Input } from "@sproutsocial/seeds-react-input";
-// import { Select } from "@sproutsocial/seeds-react-select";
-// import { Textarea } from "@sproutsocial/seeds-react-textarea";
-import FormField from "./FormField";
-
-interface FormFieldStoryArgs extends React.ComponentProps<typeof FormField> {
-  value: string;
-}
-
-type Story = StoryObj<FormFieldStoryArgs>;
-
-const meta: Meta<FormFieldStoryArgs> = {
-  title: "Components/Form Elements/FormField",
-  component: FormField,
-  args: {
-    value: "",
-    mb: 100,
-    isInvalid: false,
-    required: false,
-    helperText: "This is a line of helper text",
-    error: "",
-  },
-  argTypes: {
-    helperText: {
-      control: "text",
-      description: "Text acting as a description blurb below the main label",
-    },
-    error: {
-      control: "text",
-      description: "Text describing any error with the field's content",
-    },
-    isInvalid: {
-      control: "boolean",
-      description: "Whether the current contents of the field are invalid",
-    },
-    value: {
-      control: "text",
-      description: "Input value",
-    },
-  },
-};
-export default meta;
-
-export const Default: Story = {
-  render: (args) => (
-    <Box width="443px" margin="0 auto">
-      <FormField
-        label="Form label"
-        helperText={args.helperText}
-        required={args.required}
-        error={args.error}
-        isInvalid={args.isInvalid}
-      >
-        {(props) => <Input {...props} name="title" value={args.value} />}
-      </FormField>
-      {/* TODO: COME BACK AND UNCOMMENT WHEN SELECT AND TEXTAREA ARE MIGRATED OVER */}
-      {/* <FormField
-        id="descriptionIdThatIWantedToPassIn"
-        label="Description"
-        mb={args.mb}
-        required={args.required}
-      >
-        {(props) => (
-          <Textarea {...props} name="description" value={args.value} />
-        )}
-      </FormField> */}
-      {/* <FormField label="Reason" required={args.required}>
-        {(props) => (
-          <Select {...props} name="reason">
-            <option value="">Select a reason</option>
-            <option value="something">Something goes here</option>
-          </Select>
-        )}
-      </FormField> */}
-    </Box>
-  ),
-};
-
-export const Error: Story = {
-  args: {
-    isInvalid: true,
-    error: "There is an error associated with this input",
-  },
-  render: (args) => (
-    <Box width="443px" margin="0 auto">
-      <FormField
-        label="Title"
-        helperText="This is a line of helper text"
-        error={args.error}
-        isInvalid={args.isInvalid}
-        required={args.required}
-      >
-        {(props) => <Input {...props} name="title" value={args.value} />}
-      </FormField>
-      {/* TODO: COME BACK AND UNCOMMENT WHEN SELECT AND TEXTAREA ARE MIGRATED OVER */}
-      {/* <FormField
-        id="descriptionIdThatIWantedToPassIn"
-        label="Description"
-        isInvalid={args.isInvalid}
-        error="There is an error associated with this textarea"
-        mb={args.mb}
-        required={args.required}
-      >
-        {(props) => (
-          <Textarea {...props} name="description" value={args.value} />
-        )}
-      </FormField> */}
-      {/* <FormField
-        label="Reason"
-        error="There is an error associated with this select"
-        isInvalid={args.isInvalid}
-        required={args.required}
-      >
-        {(props) => (
-          <Select {...props} name="reason">
-            <option value="">Select a reason</option>
-            <option value="something">Something goes here</option>
-          </Select>
-        )}
-      </FormField> */}
-    </Box>
-  ),
-};

package/src/FormField.tsx

@@ -1,94 +0,0 @@
-import React, { useMemo, useState } from "react";
-import { useTextContent } from "@sproutsocial/seeds-react-hooks";
-import Box from "@sproutsocial/seeds-react-box";
-import Label from "@sproutsocial/seeds-react-label";
-import Text from "@sproutsocial/seeds-react-text";
-import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
-import type { TypeFormFieldProps } from "./FormFieldTypes";
-
-let idCounter = 0;
-
-const FormField = ({
-  children,
-  error,
-  helperText,
-  id: identifier,
-  isInvalid = false,
-  label,
-  mb = 400,
-  qa,
-  isLabelHidden = false,
-  required,
-  ...rest
-}: TypeFormFieldProps) => {
-  const [id] = useState(identifier || `FormField-${idCounter++}`);
-  const errorId = `Error-${id}`;
-  const helperTextId = `HelperText-${id}`;
-  const containerText = useTextContent("");
-  const errorContainerText = useTextContent("");
-
-  const ariaDescribedby = useMemo(() => {
-    const ids = [
-      helperText && helperTextId,
-      isInvalid && error && errorId,
-    ].filter(Boolean);
-    return ids.length > 0 ? ids.join(" ") : undefined;
-  }, [helperText, helperTextId, isInvalid, error, errorId]);
-
-  return (
-    <Box
-      {...rest}
-      {...qa}
-      mb={mb}
-      data-qa-formfield={
-        (qa && qa["data-qa-formfield"]) || id || containerText.current
-      }
-      data-qa-formfield-isinvalid={isInvalid === true}
-    >
-      {isLabelHidden ? (
-        <VisuallyHidden data-testid="visually-hidden">
-          <Label htmlFor={id} required={required}>
-            {label}
-          </Label>
-        </VisuallyHidden>
-      ) : (
-        <Label mb={helperText ? 100 : 300} htmlFor={id} required={required}>
-          {label}
-        </Label>
-      )}
-      {helperText && (
-        <Text
-          as="p"
-          fontSize={200}
-          mb={300}
-          color="text.subtext"
-          id={helperTextId}
-        >
-          {helperText}
-        </Text>
-      )}
-      {children({
-        id,
-        isInvalid,
-        ariaDescribedby,
-        ...(required !== undefined && { required }),
-      })}
-      {isInvalid && error && (
-        <Text
-          as="div"
-          fontSize={200}
-          color="text.error"
-          mt={300}
-          id={errorId}
-          data-qa-formfield-error={
-            (qa && qa["data-qa-formfield-error"]) || errorContainerText.current
-          }
-        >
-          {error}
-        </Text>
-      )}
-    </Box>
-  );
-};
-
-export default FormField;

package/src/FormFieldTypes.ts

@@ -1,34 +0,0 @@
-import * as React from "react";
-import type { TypeBoxProps } from "@sproutsocial/seeds-react-box";
-
-export interface TypeFormFieldProps extends Omit<TypeBoxProps, "children"> {
-  /** A function that receives props that need to be spread onto the child element */
-  children: (options: {
-    id: string;
-    isInvalid: boolean;
-    ariaDescribedby?: string;
-    required?: boolean;
-  }) => React.ReactNode;
-
-  /** Text describing any error with the field's content */
-  error?: React.ReactNode;
-
-  /** Text acting as a description blurb below the main label **/
-  helperText?: React.ReactNode;
-
-  /** ID of the form element (will be auto-generated if not provided) */
-  id?: string;
-
-  /** Whether the current contents of the field are invalid */
-  isInvalid?: boolean;
-
-  /** Label text to display above the form field */
-  label: React.ReactNode;
-  qa?: Record<string, any>;
-
-  /** Whether the label text should be visually hidden */
-  isLabelHidden?: boolean;
-
-  /** Whether the form element is required */
-  required?: boolean;
-}

package/src/__tests__/FormField.test.tsx

@@ -1,115 +0,0 @@
-import React from "react";
-import { render, screen } from "@sproutsocial/seeds-react-testing-library";
-import { Input } from "@sproutsocial/seeds-react-input";
-import FormField from "../FormField";
-
-describe("FormField", () => {
-  const label = "Label";
-  const inputVal = "value";
-  it("passes the autogenerated id down", () => {
-    const errorText = "There is an error associated with this input";
-    render(
-      <FormField label={label} error={errorText} isInvalid={true}>
-        {(props) => (
-          <Input
-            {...props}
-            placeholder="Enter a title"
-            name="title"
-            value={inputVal}
-          />
-        )}
-      </FormField>
-    );
-    const input = screen.getByLabelText(label);
-    expect(input).toHaveValue(inputVal);
-    // Verify aria-describedby is set to error ID
-    const describedBy = input.getAttribute("aria-describedby");
-    expect(describedBy).toContain("Error-");
-    expect(screen.getByText(errorText)).toHaveAttribute("id", describedBy);
-  });
-  it("passes the id passed in down to the input field", () => {
-    const manualId = "manualId";
-    render(
-      <FormField
-        id={manualId}
-        label={label}
-        error="There is an error associated with this input"
-        isInvalid={true}
-      >
-        {(props) => (
-          <Input {...props} placeholder="Enter a title" name="title" value="" />
-        )}
-      </FormField>
-    );
-    expect(screen.getByLabelText(label)).toHaveAttribute("id", manualId);
-  });
-  it("is accessible", async () => {
-    const { runA11yCheck } = render(
-      <FormField
-        label="Title"
-        error="There is an error associated with this input"
-        isInvalid={true}
-      >
-        {(props) => (
-          <Input {...props} placeholder="Enter a title" name="title" value="" />
-        )}
-      </FormField>
-    );
-    await runA11yCheck();
-  });
-  it("should visually hide label", () => {
-    const manualId = "manualId";
-    render(
-      <FormField id={manualId} label={label} isLabelHidden={true}>
-        {(props) => (
-          <Input {...props} placeholder="Enter a title" name="title" value="" />
-        )}
-      </FormField>
-    );
-    expect(screen.getByTestId("visually-hidden")).toBeInTheDocument();
-    // Verify aria-describedby is not set when no helper text or error
-    expect(screen.getByLabelText(label)).not.toHaveAttribute(
-      "aria-describedby"
-    );
-  });
-  it("should be required when required is true", () => {
-    render(
-      <FormField label={label} required>
-        {(props) => <Input {...props} name="title" />}
-      </FormField>
-    );
-    expect(screen.getByLabelText(`${label}*`)).toBeRequired();
-  });
-  it("should set aria-describedby to helper text ID when helper text is provided", () => {
-    const helperText = "This is helper text";
-    render(
-      <FormField label={label} helperText={helperText}>
-        {(props) => <Input {...props} name="title" />}
-      </FormField>
-    );
-    const input = screen.getByLabelText(label);
-    const describedBy = input.getAttribute("aria-describedby");
-    expect(describedBy).toContain("HelperText-");
-    expect(screen.getByText(helperText)).toHaveAttribute("id", describedBy);
-  });
-  it("should set aria-describedby to both helper text and error IDs when both are provided", () => {
-    const helperText = "This is helper text";
-    const errorText = "This is an error";
-    render(
-      <FormField
-        label={label}
-        helperText={helperText}
-        error={errorText}
-        isInvalid={true}
-      >
-        {(props) => <Input {...props} name="title" />}
-      </FormField>
-    );
-    const input = screen.getByLabelText(label);
-    const describedBy = input.getAttribute("aria-describedby");
-    const ids = describedBy!.split(" ");
-    expect(ids).toHaveLength(2);
-    expect(ids[0]).toContain("HelperText-");
-    expect(ids[1]).toContain("Error-");
-  });
-});