Add Error Messages to the CMS design system.

[davidmpickett]

Description

• As a designer, I want Error Messages to be baked in to CMS Design System components in Figma as an optional field (similar to Label and Caption fields) so that I can easily make designs that match the Drupal CMS and document desired language for Error states.
• As a developer, I want to know how error messages should be styled in the CMS and understand what aspects can be controlled locally, vs which would require an upstream change to implement.
• As a CMS Editor, I want to know when I've made an error ASAP so I can resolve it and get accurate information to Veterans as quickly as possible.

Atomic Level

These levels match the levels in VA.gov Design System Documentation

• [ ] Foundation - The Foundation section provides information about the visual language and styles used in the CMS.
• [X] Component - Components are interactive and non-interactive UI elements that can be grouped together or presented individually. They are independent, reusable chunks of a user interface.
• [ ] Pattern - Patterns are solutions and researched best practices for solving user-focused tasks and recurring user interface design problems.
• [ ] Template - Templates, or page layouts, compose components within a single page. A layout can contain multiple variations of a component depending on the context.

Acceptance Criteria

Update Figma

• [ ] [Replace me outlining specific things that need to be done for this design ticket.]
• [ ] Ensure that the CMS Design System in Figma is updated to reflect the changes listed above.

Collab with Dev

• [ ] Set up a meeting to collaborate with the developer who will be implementing the design.
• [ ] Agree on a naming convention to use in Figma and in Storybook.

Create Follow Up Tickets

• [ ] Create a github ticket using this template to update the CMS Design System Documentation in Figma and link to it as a comment in this ticket.
• [ ] Create a github ticket using this template for a developer to update the CMS Storybook and link to it as a comment in this ticket.

[davidmpickett]

Not sure where exactly to document this, but putting it here for long-term findability. Currently in the Drupal CMS there seem to be two different classes for error message styling:

• form-item__error-message
• form-item--error-message

Example where they appear in a row on a single input field and have different styling:

Doesn't seem intentional. Probably should be standardized so that these classes are the same. But might make sense to have the correct styling codified in the design system before fixing the code.