fix(Input): changing the default styles for Input component

[alinais]

Input

Updating the default classes for the input to match the light view of the Teams UI.

TODO

• Conformance test
• Minimal doc site example
• Stardust base theme
• Teams Light theme
• Teams Dark theme
• Teams Contrast theme
• Confirm RTL usage
• W3 accessibility check
• Stardust accessibility check
• Update glossary props table
• Update the CHANGELOG.md

UI Update

Simple input

Simple input focused

Input variation with icon

[codecov]

Codecov Report

Merging #25 into master will decrease coverage by 0.24%.
The diff coverage is 74.07%.

@@            Coverage Diff             @@
##           master      #25      +/-   ##
==========================================
- Coverage   87.37%   87.12%   -0.25%     
==========================================
  Files          74       74              
  Lines        1125     1142      +17     
  Branches      200      202       +2     
==========================================
+ Hits          983      995      +12     
- Misses        138      143       +5     
  Partials        4        4

Impacted Files	Coverage Δ
src/components/Input/inputRules.ts	100% <100%> (ø)	⬆️
src/themes/teams/siteVariables.ts	100% <100%> (ø)	⬆️
src/components/Input/inputVariables.ts	100% <100%> (ø)	⬆️
src/components/Input/Input.tsx	78% <46.15%> (-7.72%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7b43139...598c63e. Read the comment docs.

[codepretty]

Looks like the bottom focus border angle is inverted.

It should be angled up at the corners, like this...

[codepretty]

:focus-within isn't supported in IE/Edge

[alinais]

@codepretty, thanks for the help. I changed the approach to move input at the full size of the parent div and basically the focus will stay attached to the input, in a classic way that works in Edge

[codepretty]

When I click on the search icon, the input doesn't get focused.

[mnajdova]

No need for using cx here, as the classes are already calculated and we are not combining multiple object to classes.

[alinais]

fixed

[mnajdova]

We can extract the creation of the input in a separate variable and reuse it in the both return statements. I would actually refactor this with the following:

return (<ElementType {...rest} className={classes.root} {...htmlInputProps}>
          {createHTMLInput(input || type, {
            defaultProps: htmlInputProps,
            overrideProps: {
              className: inputClasses,
              ref: this.handleInputRef,
            },
          })}
          {this.computeIcon() && Icon.create(this.computeIcon(), {
            defaultProps: { className: iconClasses },
            overrideProps: predefinedProps => this.handleIconOverrides,
          })}
        </ElementType>)

[alinais]

Thanks. Fixed.

[mnajdova]

I left couple of comments, other than that it looks good to be merged here.

[codepretty]

If you have time, we should update the doc to just be "an icon" instead of "a search icon" since it really could be anything there.

[alinais]

@codepretty , thanks. Fixed.