Rebuilding input container

[gretanausedaite]

Changes

React:

InputFlexContainer:

• Add ‘size’ prop

InputContainer:

• Using InputGrid css
• Using new StatusMessage component
• Removed ‘isIconInline’ prop;

Icon:

• Added ‘padded’ prop (false by default)

TransferList:

• Remove 'iui-transfer-list-listbox-label' class
• Using simple Label

Textarea:

• Added ‘status’ prop

DatePickerInput:

• Using InputGrid, Label, InputWithDecorations

StatusMessage:

• Added wrapper class ‘iui-status-message’
• Added ‘iconProps’ and ‘contentProps’

Select:

• Added ‘status’ prop
• Removed click ripple effect animation from caret down.

LabeledTextarea:

• Added ‘wrapperProps’, ‘labelProps’’, ‘messageContentProps’, ‘iconProps’;
• Using InputGrid and InputWithDecorations;
• Removed ‘textareaClassName’ and ‘textareaStyle’ props, Users can pass custom styling to textarea using classname and style props

LabeledSelect:

• Added ‘wrapperProps’, ‘labelProps’’, ‘messageContentProps’, ‘messageIconProps’;
• Using InputGrid;
• Removed ‘selectClassName’, ‘selectStyle’ props. Users can pass custom styling to select using classname and style props;

LabeledInput:

• Added ‘messageContentProps’, iconProps, labelProps, inputWrapperPRops;
• Removed ‘inputClassName’ and ‘inputStyle’ props;
• Using InputGrid and InputWithDecorations;

Label:

• Added disabled prop;

InputWithDecorations:

• New component
• Subcomponents: Input and Button.

InputGroup:

• Added labelProps, messageProps and innerProps;
• Using InputGrid

InputGrid:

• New component

Input:

• Add status prop;

ComboBox:

• Removed functionality to close menu on caret down click;

ColorInputPanel:

• Simplified DOM structure;

CSS:

Icon:

• Added padded Icon styling using data-iui-padded attribute

TransferList:

• Removed iui-transfer-list-listbox-label

ColumnFIlter:

• Updated to use input-grid

StatusMessage:

• Added wrapper class iui-status-message

Select:

• Added status colouring

NonIdealState:

• Updated to use input-grid

InputContainer:

• Removed mixins;
• Removed iui-input-container class;
• Added iui-input-grid, iui-input-label, iui-input-group-wrapper, ‘iui-input-group’ classes;
• Updated input-flex-container to include textarea;

Input:

• Added status styling
• Removed input-with-icon and iui-end-icon mixing;

Informationpanel:

• Updated to not use input-label-inline mixin;

ButtonGroup:

• Updated selectors to not use input-container and use input-grid;

Testing

• Visual CSS - InputGrid html added; InputWithDecorations is tested in SearchBox tests.
• Visual React - InputGrid and InputWithDecorations stories added
• Unit

Docs

• JSDocs
• Website (Will add after this PR is merged to not expand changed file count)
• Migration guide (Will write after this PR is merged): https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v3-migration-guide#labeledinput

[mayank99]

LGTM. Make sure visual tests pass before merging. The react ones might need to be approved a few times (and you can temporarily disable retries to make it faster)