feat(Input): add new component

[alinais]

Input

A standard input field.

TODO

• Conformance test
• Minimal doc site example
• Stardust base theme
• Teams Light theme
• Teams Dark theme
• Teams Contrast theme
• W3 accessibility check
• Stardust accessibility check
• Update glossary props table

API Proposal

Default input component

(contains only the placeholder)

The placeholder is a property that can be added to an input.

<Input placeholder="Search ..." />

will output

<div placeholder="Search..." as="div" type="text" class="ui-input">
  <input type="text" placeholder="Search..." />
</div>

Input with an icon

An input in a search component can have a search icon.

<Input icon="search" placeholder="Search..." />

will output

<div icon="search" placeholder="Search..." as="div" type="text" class="ui-input">
  <input type="text" placeholder="Search..." />
  <i class="ui-icon"></i>
</div>

[codecov]

Codecov Report

Merging #64 into master will increase coverage by 0.67%.
The diff coverage is 86.95%.

@@            Coverage Diff             @@
##           master      #64      +/-   ##
==========================================
+ Coverage   69.72%   70.39%   +0.67%     
==========================================
  Files          70       73       +3     
  Lines        1133     1179      +46     
  Branches      215      222       +7     
==========================================
+ Hits          790      830      +40     
- Misses        338      344       +6     
  Partials        5        5

Impacted Files	Coverage Δ
src/components/Icon/fontAwesomeIconRules.ts	20% <ø> (ø)	⬆️
src/components/Input/inputRules.ts	100% <100%> (ø)
src/components/Input/inputVariables.ts	100% <100%> (ø)
src/components/Input/Input.tsx	81.81% <81.81%> (ø)

---

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 655be85...7467269. Read the comment docs.

[levithomason]

This would be a great place to dog food our own new Input component!

I think Stardust's first Input iteration will support everything that is needed here, except icon. The styling won't look quite as nice until we introduce inverted and fluid, but that is ok. It will serve as a reminder to us.

[alinais]

will add in a different PR

[levithomason]

I know this is still being worked on. Just a reminder to trim it down to the minimal implementation for the first PR.

[notandrew]

Not sure if you're looking for css feedback here (or if this is just a first-pass for controls), but can we change this to use flexbox? I think we could replace most of the styles with something like this:
display: inline-flex;
align-items: center;
justify-content: flex-end;

[alinais]

@notandrew this is a first implementation for this component. But I am updating the rules to a more simple approach. Thanks for your advice. Please check the updates.

[mnajdova]

I would introduce the padding value as a variable as well, so that the users of the component can override it if they want.

[bmdalex]

can you expand on that @mnajdova ? why isn't it possible using the regular style object? what would be the expected API for a user that wants to set his own padding? some examples would be great

[mnajdova]

So, if I am user of the Input component, if the padding is provided as variable, I could use:

<Input variables={{padding: '0px'}} />

and this would override the default defined padding. There is example of this in the Avatar component, regarding using the Label component.

[bmdalex]

@mnajdova

I was hitting this today, I didn't understand why my styles were overwritten, it's kind of strange that we have to do it like this; if I'm not wrong, we have 2 or 3 ways of passing styling to components:

• using className prop, which is the most obvious one and I think should be used; however it's not reliable because if a certain CSS property is defined in the rules of a component it cannot be overwritten by classes passed using className;
• using variables prop in order to override variables that we pass to the rules;
• using styles native prop?

What's the benefit of introducing this behavior (using variables) to using styles native prop?