DS-680 Select icon placement bug

[MarcinMr]

Jira

https://pegadigitalit.atlassian.net/browse/DS-680

Summary

The chevrons in the select filters within the Best of Content pages were fixed.

Details

On Best of Content pages, select chevron icons were overlaping the text :

• BoC - PegaWorld Replays
• BoC - Customers

Additionally, on the Calculator - Results I found accidentally a bug related to color theming on those two colorful rectangles. I made a quick fix.

How to test

Pull the branch. Check if the select fields on the BoC pages display correctly, without overlapping the text. Confirm there're no more broken selects with chevron icons overlapping the text.

[MarcinMr]

@colbytcook went over it again today to fix the issue mentioned in ticket DS-680

[mikemai2awesome]

This is a component bug, we shouldn't just add utility classes to the mockups but fix the component instead.

[MarcinMr]

This is a component bug, we shouldn't just add utility classes to the mockups but fix the component instead.

@mikemai2awesome if we cannot use utility classes like for example u-bolt-visuallyhidden and others, I added new display type for a label which uses visually hidden mixin and updated the padding in a form.scss to prevent overlapping text over the chevron

[mikemai2awesome]

@MarcinMr We can't just target all inputs, this is specific to select, so you'd need to scope it:

.c-bolt-block-label,
.c-bolt-hidden-label {
  .c-bolt-input.is-filled,
  .c-bolt-input:focus {
    padding: calc(var(--bolt-spacing-y-medium) / 2 - 1px)
      var(--bolt-spacing-x-small); // [Mai] medium/2 matches button vertical spacing.

    @include bolt-mq($until: small) {
      padding-top: calc(var(--bolt-spacing-y-medium) / 2 - 0.1875rem);
      padding-bottom: calc(var(--bolt-spacing-y-medium) / 2 - 0.25rem);
    }
  }

  .c-bolt-input--select.is-filled,
  .c-bolt-input--select.focus {
     padding-right: calc(var(--bolt-spacing-x-small) + 1.5rem);
  }
}

Also update instances of 24px to 1.5rem, there is a comment in there reminding us to update: 24px is icon size, if icon component changes, this needs to update as well..

[MarcinMr]

@mikemai2awesome updated 24px to 1.5rem and used fixing styles only for the select element.

[mikemai2awesome]

@MarcinMr Looks good.