feat(input): new Input component with 'input' slot

[bmdalex]

[RFC] Input

New input component according following the strategy in #314 (closes #314)
This PR contains:

• new implementation of input (using input and wrapper slots);
• Slot factory v1;
• fix for input height in the chat prototype;
• fix for tab keyboard navigation for radio group with inline input;
• fixes for generic unit tests for shorthands;
• lots of unit tests to cover Slot factory, input and wrapper slots for Input component, controlled/uncontrolled mode for Input, etc

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

Proposed solution

• create an Input component consisting of an <input /> element wrapped with a <div />;
• use partitionHTMLProps to decide what props (<Input {...props} />) go to the <input /> element or wrapping <div />;
• use input slot to target the <input /> element and wrapper slot to target wrapping <div /> when partitionHTMLProps does not work as expected:

<Input {...partitionedProps} input={inputProps} wrapper={wrapperProps} />

e.g.:

<Input
  placeholder='Search...'
  dir='ltr'
  tabIndex={2}
  disabled={false}
  role='presentation'
  input={{ dir: 'rtl', tabIndex: 0 }}
  wrapper={{ disabled: true, role: 'checkbox' }}
/>

Input component has the following structure:

Props:

export interface IInputProps {
  as?: any
  className?: string
  clearable?: boolean
  defaultValue?: React.ReactText
  fluid?: boolean
  icon?: ShorthandValue
  inline?: boolean
  input?: ShorthandValue
  onChange?: ComponentEventHandler<IInputProps>
  renderIcon?: ShorthandRenderFunction
  renderInput?: ShorthandRenderFunction
  renderWrapper?: ShorthandRenderFunction
  styles?: ComponentPartStyle<IInputProps, any>
  type?: string
  value?: React.ReactText
  variables?: ComponentVariablesInput
  wrapper?: ShorthandValue
}

API

<Input {...inputProps} wrapper={wrapperProps} />

e.g.:

<Input
  placeholder="Search..."
  icon="search"
  clearable
  wrapper={{ role: "presentation" }}
/>

Component structure

<ElementType ...> // <div />
  <InputBase ... />  // <input />
  <Icon ...>  // <span />
</ElementType>

DOM structure

<div class="ui-input" role="presentation">
  <input type="text" placeholder="Search..." value="" />
  <span class="ui-icon" aria-hidden="true"></span>
</div>

This will solve all the scenarios mentioned above in the following fashion:

1. Styling the <input />

<Input
  placeholder="Search..."
  input={{ styles: { backgroundColor: 'red' height: '80px' } }}
/>

2. Setting HTML attributes for the <input />

<Input placeholder="Search..." input={{ tabIndex='-1' }} />

3. Setting HTML attributes for the wrapping <div />

<Input placeholder="Search..." wrapper={{ role: "presentation" }} />

Rendered component:

[bmdalex]

@levithomason @kuzhelov @miroslavstastny @mnajdova review needed

[codecov]

Codecov Report

Merging #326 into master will increase coverage by 0.6%.
The diff coverage is 100%.

@@            Coverage Diff            @@
##           master     #326     +/-   ##
=========================================
+ Coverage   89.33%   89.94%   +0.6%     
=========================================
  Files          64       64             
  Lines        1257     1253      -4     
  Branches      186      162     -24     
=========================================
+ Hits         1123     1127      +4     
+ Misses        131      123      -8     
  Partials        3        3

Impacted Files	Coverage Δ
src/components/Input/Input.tsx	100% <100%> (+15.38%)	⬆️
src/components/Slot/Slot.tsx	100% <100%> (ø)	⬆️
src/index.ts	100% <100%> (ø)	⬆️

---

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 be50fab...93156c3. Read the comment docs.

[kuzhelov]

here we are checking the implementation details - we should rather check method's result instead

[bmdalex]

agreed with @kuzhelov to add the tests in the dedicated PR for Slot factory that's about to come

[kuzhelov]

this test is very brittle - if the next day we will check the arguments that createShorthand accepts, this will fail this test - while this failure won't surely guarantee that the logic of createSlotFactory has become to be incorrect

[bmdalex]

agreed with @kuzhelov to add the tests in the dedicated PR for Slot factory that's about to come

[bmdalex]

addressed @kuzhelov 's comments

Note: Please provide all the initial feedback on the first review so I can address it from beginning. It'd be better not to start new conversations in the phase of addressing review comment (after initial code review from specific dev) unless there are code changes in that area, of course

[bmdalex]

ok, done, thx