[Release] Fixes for v4.0.0

[aweell]

Story description

Fixes in component documentation for release 4.0.0

Tasks

• Edit wrong naming references in input file component
• Add divider specs and update listItem :focus state
• Add color-grey-100 as background-color to all input :disabled states
• Review new released component tokens
• Update links and catalog.json

[GomezIvann]

Summary:

• labelOptiona token is really needed? In the other components with this label for optional fields we just have optionalLabelFontWeight.
• errorColor instead of errorMessageColor and errorIconColor as in other input components.
• Should we add disabledCollapseIndicatorColor token? Which is the collapse indicator color when it is disabled?
• listItemXXX tokens are called in the Autosuggest optionListXXX, should we unify them? For example:
  • optionListBackgroundColor here is itemListBackgroundColor.
  • optionListBorderColor here is itemListBorderColor.
  • etc.
• CamelCase errors in some tokens, for example, unselectedactivelistItemBackgroundColor.
• What are the styles for the Selection Indicator when the multi select is disabled? Also, the Selection Indicator examples are still with the old border-radius.
• Disabled select bakcground color is still as the previous version in the examples.
• Multiple Selection examples are wrong:

The correct example:

• labelFontXXX tokens are twice in the Typography section.
• We should add valueLineHeight to be consistent with the other typography tokens.
• In the other new inputs we are not giving tokens for the placeholder, should we follow that strategy also here? Or should it use the valueFontXXX tokens as in the other components?
• Should we remove errorMessageFontXXX tokens? I think we shoul allow users to change the way the error looks, that could we inconsistent with the other fields such us text-input, textarea, etc.
• The Size table is still using the old values.

[aweell]

Going point by point:

Select

Token naming fixes

labelOptiona token is really needed? In the other components with this label for optional fields we just have optionalLabelFontWeight.

• Removed labelOptiona. Added optionalLabelFontWeight

CamelCase errors in some tokens, for example, unselectedactivelistItemBackgroundColor.

• Fix camelCase token naming errors

labelFontXXX tokens are twice in the Typography section.

They meant to be the label optional tokens

• Add optional to duplicated label tokens

We should add valueLineHeight to be consistent with the other typography tokens.

• Add valueLineHeight token

In the other new inputs we are not giving tokens for the placeholder, should we follow that strategy also here? Or should it use the valueFontXXX tokens as in the other components?

• Remove placeholder font tokens

Should we remove errorMessageFontXXX tokens? I think we shoul allow users to change the way the error looks, that could we inconsistent with the other fields such us text-input, textarea, etc.

Agree, that could be an addition to other components' specs instead of removing them from the select.

• Remove errorMessageFontXyz in select documentation

The Size table is still using the old values.

• Update size table values

Selection indicator

Should we add disabledCollapseIndicatorColor token? Which is the collapse indicator color when it is disabled?

There is a token called disabledColor that affects all disabled elements. Maybe we need to divide it and go element by element

What are the styles for the Selection Indicator when the multi select is disabled? Also, the Selection Indicator examples are still with the old border-radius.

• Change border-radius to 0.125rem
• Add border-radius properties to the documentation
• Added selection indicator disabled state

List items

listItemXXX tokens are called in the Autosuggest optionListXXX, should we unify them? For example:
optionListBackgroundColor here is itemListBackgroundColor.
optionListBorderColor here is itemListBorderColor.
etc.

Agree, we need to unify them, here is what I think (open to suggestions):

• Dialog for the list: listDialogXyz
• Item of the list: listOptionXyz

Documentation images

Multiple Selection examples are wrong:

• Fix images

[aweell]

Removed

• optionalLabelfontWeight
• disabledSelectionIndicatorActionColor
• optionallabelFontSize
• optionallabelFontStyle
• optionallabelLineHeight

Added

• selectionIndicatorFontColor
• actionIconColor
• focusListOptionBorderColor
• systemMessageFontColor
• collapseIndicatorColor
• errorIconColor
• enabledSelectionIndicatorActionIconColor
• hoverSelectionIndicatorActionIconColor
• activeSelectionIndicatorActionIconColor

[aweell]

Autosuggest

• listOptionDividerColor instead of listOptionBorderColor 7acbc89
• System error example image 965ce53
• Add: errorListDialogBackgroundColor, errorListDialogBorderColor and errorListDialogFontColor 36daafd
• Add: focusListOptionBorderColor 36daafd

[aweell]

File input

• Change focusDropBackgroundColor to dragoverDropBackgroundColor 3fc3273

[GomezIvann]

SELECT

• listGroupItemFontWeight changed to listGroupLabelFontWeight.
• unselectedHoverlistOptionBackgroundColor camel case, replace by unselectedHoverListOptionBackgroundColor.
• unselectedActivelistOptionBackgroundColor camel case, replace by unselectedActiveListOptionBackgroundColor.
• disabledInputBackgroundColor has the value: #999999, which is a very strong grey, shouldn't it be #f2f2f2 linke in the textInput?
• collapseIndicatorColor is in both Color and Input sections.

Fixed in 121ddc0

[GomezIvann]

More Select things:

• Currently i can't implement the token focusActionIconColor because is not focusable right now.
• Is there any situation where the clear searchbox action and the searchbox itself can be shown as disabled? If not, are disabledActionXXX tokens really necessary?
• actionBackgroundColor is missing (value: transparent).
• valueLineHeight is only implemented for this component, should we remove it?
• inputBorderRadius and actionBorderRadius aren't as tokens in the other new field components, should we add them there or remove them here?

[aweell]

Currently i can't implement the token focusActionIconColor because is not focusable right now.

• Removed focusActionIconColor

Is there any situation where the clear searchbox action and the searchbox itself can be shown as disabled? If not, are disabledActionXXX tokens really necessary?

• Removed disabledActionBackgroundColor

actionBackgroundColor is missing (value: transparent).

• Added actionBackgroundColor

valueLineHeight is only implemented for this component, should we remove it?

• Removed valueLineHeight

inputBorderRadius and actionBorderRadius aren't as tokens in the other new field components, should we add them there or remove them here?

• Removed inputBorderRadius and actionBorderRadius

Fixed in b9abdbd