fix(styles): fixed for Input Group, Select and Step Input after design review

[InnaAtanasova]

Related Issue

Closes none

Description

Updated components:

• Select
• Input Group
• Step Input

Visual Changes

SELECT
Before:
The arrow is blue, should be black

All states (hover, active, focus, expanded) for the semantic Selects have been updated

Mobile mode. The Dialog header was built with Bar component and the text was not centered vertically.

After:
updated colors for the arrow, placeholder text is italic and gray

Updates states:

Mobile mode. Dialog header uses Toolbar per specs. This is a BREAKING CHANGE.

STEP INPUT:

• updated the width of the buttons
• Read-only on focus should preserve the background. The input paddings should be bigger
  Before:

After:

INPUT GROUP:
Similar to Select all states have been updated

BREAKING CHANGE:
The Dialog header used in Mobile Select now uses Toolbar, not Bar component

Before:

...
<div class="fd-dialog__content fd-dialog__content--mobile">
        <header class="fd-dialog__header fd-bar fd-bar--header-with-subheader">
            <div class="fd-bar__left">
                <div class="fd-bar__element">
                    <h3 id="mobileHeader" class="fd-dialog__title">
                        <span class="fd-select__text-content">Select Ingredient</span>
                    </h3>
                </div>
            </div>
            <div class="fd-bar__right">
                <div class="fd-bar__element">
                    <button tabindex="-1" class="fd-button fd-button--transparent" aria-label="close">
                        <i class="sap-icon--decline"></i>
                    </button>
                </div>
            </div>
        </header>
</div>
....

After:

...
<div class="fd-dialog__content fd-dialog__content--mobile">
        <header class="fd-dialog__header fd-toolbar fd-toolbar--clear">
            <span class="fd-select__text-content">Select Ingredient</span>
            <span class="fd-toolbar__spacer"></span>
            <button tabindex="-1" class="fd-button fd-button--transparent" aria-label="close">
                <i class="sap-icon--decline"></i>
            </button>
        </header>
</div>
....

[netlify]

✅ Deploy Preview for fundamental-styles ready!

Name	Link
🔨 Latest commit	41c8c5a
🔍 Latest deploy log	https://app.netlify.com/sites/fundamental-styles/deploys/649c9ef56360030008d60503
😎 Deploy Preview	https://deploy-preview-4646--fundamental-styles.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.