[Select] bugs with react and web components

[laurenmrice]

Acceptance criteria

While reviewing the React | WC parity PR for the Select component, there were a few existing bugs in React that need to be addressed, which was also causing problems in WC, so thought it would be best to open a separate issue to tackle these things.

---

React

Default story

• Invalid and warning state: are currently not showing an error or warning message below the input field. It needs to show the error or warning message. Say something like "Error message" or "Warning message".
• Inline prop set to true (hover state): There should be a hover color change on the field when you hover over it. It should be color token $field-hover.
• Inline prop set to true: Is there a reason why this input width is much larger than the default style input width? Could we keep it the same for the story purposes at 400px width?

• When the select input has the inline prop set to true, the helper text should be aligned with the label and field text.

• Inline prop set to true (invalid/warning states): There are some icon padding inconsistencies between the warning/invalid icon and the chevron. The helper text should also be replaced by the warning/invalid message.

• Inline prop set to true (disabled state): There is an input background showing up and it should actually just be transparent.
• Inline prop set to true (switching sizes with warning/invalid states): When the inline prop is set to true, and when using an invalid or warning state the label and helper text jumps around but it should be staying in the same place. This also happens when changing sizes.

Inline story

• Invalid state: When the invalid state is set to true, the label text gets shifted down a couple pixels. It should remain in the same place. Also ensure the helper text is not shifting down as well, it is hard to tell. The error message needs to also replace the helper text.
• Disabled state: There is an input background showing up and it should be transparent.
• Warning state: When the warning state is set to true, the label text and helper text gets shifted down a couple pixels. It should remain in the same place. The warning message needs to also replace the helper text. The warning icon is overlapping the input field text and should look like the spec below.

• Switching sizes with invalid state: When using an invalid state the label and helper text jumps around but it should be staying in the same place. This also happens when changing sizes.

With AI Label story

• Invalid/Warning states: There needs to be an invalid and warning messages under the field when they are true.

---

WC

Default story

• Inline prop set to true: Let's do the same that we are going to do for React, by keeping the input width size at 400px when the inline prop in true. The helper text should be aligned with the label and field text as mentioned above, its the same problem in React.
• Inline prop set to true (warning/invalid): The warning and invalid messages should replace the optional helper text.
• Switching sizes with invalid and warning states: When using an invalid or warning state the label and helper text jumps around but it should be staying in the same place. This also happens when changing sizes.
• The warning state icon overlaps with the field text if its long. There should be 8px padding between the end of the field text and the warning icon.

Inline story

• Invalid state: When the invalid state is set to true, the label text gets shifted down a couple pixels. It should remain in the same place. Also ensure the helper text is not shifting down as well, it is hard to tell. The error message needs to also replace the helper text.
• Disabled state: There is an input background showing up and it should be transparent.
• Warning state: When the warning state is set to true, the label text and helper text gets shifted down a couple pixels. It should remain in the same place. The warning message needs to also replace the helper text. The warning icon is overlapping the input field text and should look like the spec below.

• Switching sizes with invalid state: When using an invalid state the label and helper text jumps around but it should be staying in the same place. This also happens when changing sizes.
• The warning and invalid state icon overlaps with the field text if its long. There should be 8px padding between the end of the field text and the warning or invalid icon.