Feature Description

The keyword bubble items on step 5 of the user input flow currently use the character x in the close/delete button. This would be better to use a real icon. It's important that the colors are preserved though.

Hover	Focus

Looking at the icons available via @wordpress/icons, cancelCircleFilled or closeSmall should be used

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The colors for the search term bubble text and close icon should be reverted to be what they were before, see screenshots above.

Implementation Brief

• Using assets/sass/config/_variables.scss,
  • Add a new variable $c-user-input-color which should be set to $c-denim.
• Using assets/sass/components/user-input/googlesitekit-user-input-controls.scss,
  • Set the min-width for .googlesitekit-user-input__text-option button to 35px so that the is enough room for the icon dimensions to match the designs.
  • Set the SVG within .googlesitekit-user-input__text-option button to have a height and width of 11px respectively. Update the fill value for the path to use $c-user-input-color
  • Add the following selector .mdc-text-field .mdc-text-field__input within .googlesitekit-user-input__text-option where the color is set to $c-user-input-color and the font-weight is set to 500.

Test Coverage

• N/A

Visual Regression Changes

• N/A

QA Brief

• navigate to user input question 5/5 and enter a couple of terms
• check that the close icon button has a min-width of 35px
• check that the close icon svg has a height of 11px and a width of 11px
• check that the close icon svg fill has the color #1967d2
• check that the text field input has the color #1967d2 and font-weight of 500

Changelog entry

• Fix low-contrast color for keyword bubbles in the user input flow.