Refactor inputs to match designs and use the new CSS variables.
Introduced a new blue dot 🔵 next to field labels to signify they are required fields.
This refactors some the common form fields that have had design tweaks and seeks to replace legacy theming with the new CSS variables.
1. Input Refactors and Prop Improvements
This is similar to previous refactors. It updates sizes and colors, introducing the usage of new CSS variables and removing the old theme integrations.
Input, InputField, TextArea, TextAreaField and PasswordField have a new showFeedback?: boolean prop which if not set will default to false. This is because the feedback messages are no often used in designs however this feature is planned to be iterated, in which case the new feature will use the same props. Even in this instance we want to retain more control over when these are shown.
This also allows us to properly utilise these input states without having the feedback area appear incorrectly.
Action when updating to this version of the UI Kit: If your project uses any of the mentioned components and those instances have feedbackMessage in use you need to add the showFeedback={true} as a prop to once more recreate the previous behaviour.
2. Required - Blue Dot 🔵
This pattern has been used on some more recent designs and will begin to appear with more regularity moving forward. It looks like this...
Label has a blue dot that will show if passed a required prop. The various xxField components and stories have been updated with this. If any of these appear to be missing, please report it as a bug.
If a project does not use the blue dot for required fields but required is used as a prop, you can override the CSS variable --input-required-dot-display to be none instead. This can be done globally or on a component level. See examples for CSS overrides.
Please note: This required field is different to the required value in the componets fieldState prop. This new required prop signifies that the field is required where as the fieldState='required' is used when the form has been submitted but the field was left empty.
Additional Change Notes
Stories that had backgrounds added and awkward borders as a result have been removed. All stories already used the correct background.
Updates
This PR contains two main changes:
This refactors some the common form fields that have had design tweaks and seeks to replace legacy theming with the new CSS variables.
1. Input Refactors and Prop Improvements
This is similar to previous refactors. It updates sizes and colors, introducing the usage of new CSS variables and removing the old theme integrations.
Input,InputField,TextArea,TextAreaFieldandPasswordFieldhave a newshowFeedback?: booleanprop which if not set will default tofalse. This is because the feedback messages are no often used in designs however this feature is planned to be iterated, in which case the new feature will use the same props. Even in this instance we want to retain more control over when these are shown.This also allows us to properly utilise these input states without having the feedback area appear incorrectly.
Action when updating to this version of the UI Kit: If your project uses any of the mentioned components and those instances have
feedbackMessagein use you need to add theshowFeedback={true}as a prop to once more recreate the previous behaviour.2. Required - Blue Dot 🔵
This pattern has been used on some more recent designs and will begin to appear with more regularity moving forward. It looks like this...
requiredprop. The variousxxFieldcomponents and stories have been updated with this. If any of these appear to be missing, please report it as a bug.--input-required-dot-displayto benoneinstead. This can be done globally or on a component level. See examples for CSS overrides.requiredfield is different to therequiredvalue in the componetsfieldStateprop. This newrequiredprop signifies that the field is required where as thefieldState='required'is used when the form has been submitted but the field was left empty.Additional Change Notes