FEAT: Added field warning component to all fields

[obulaworld]

Summary

Update all Field component to handle warning texts.
It seeks to fully fix this UI-KIT issue

Description

This PR seeks to update all Field component to handle warning texts by:

• Adding the new FieldWarnings component to all Fields
• Updating all fields dependencies to include FieldWarnings package
• Updating all fields story, spec, visual route to reflect the new changes.

Screenshots

[changeset-bot]

🦋 Changeset detected

Latest commit: 11fb79e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 94 packages

Name	Type
@commercetools-uikit/localized-multiline-text-field	Minor
@commercetools-uikit/async-creatable-select-field	Minor
@commercetools-uikit/selectable-search-input	Minor
@commercetools-uikit/creatable-select-field	Minor
@commercetools-uikit/localized-text-field	Minor
@commercetools-uikit/multiline-text-field	Minor
@commercetools-uikit/search-select-field	Minor
@commercetools-uikit/async-select-field	Minor
@commercetools-uikit/date-range-field	Minor
@commercetools-uikit/date-time-field	Minor
@commercetools-uikit/password-field	Minor
@commercetools-uikit/number-field	Minor
@commercetools-uikit/select-field	Minor
@commercetools-uikit/money-field	Minor
@commercetools-uikit/radio-field	Minor
@commercetools-uikit/collapsible-panel	Minor
@commercetools-uikit/date-field	Minor
@commercetools-uikit/text-field	Minor
@commercetools-uikit/time-field	Minor
@commercetools-uikit/fields	Minor
@commercetools-uikit/inputs	Minor
@commercetools-frontend/ui-kit	Minor
@commercetools-uikit/design-system	Minor
@commercetools-uikit/calendar-time-utils	Minor
@commercetools-uikit/calendar-utils	Minor
@commercetools-uikit/hooks	Minor
@commercetools-uikit/i18n	Minor
@commercetools-uikit/localized-utils	Minor
@commercetools-uikit/utils	Minor
@commercetools-uikit/accessible-hidden	Minor
@commercetools-uikit/avatar	Minor
@commercetools-uikit/card	Minor
@commercetools-uikit/collapsible-motion	Minor
@commercetools-uikit/collapsible	Minor
@commercetools-uikit/constraints	Minor
@commercetools-uikit/data-table-manager	Minor
@commercetools-uikit/data-table	Minor
@commercetools-uikit/field-errors	Minor
@commercetools-uikit/field-label	Minor
@commercetools-uikit/field-warnings	Minor
@commercetools-uikit/grid	Minor
@commercetools-uikit/icons	Minor
@commercetools-uikit/label	Minor
@commercetools-uikit/link	Minor
@commercetools-uikit/loading-spinner	Minor
@commercetools-uikit/messages	Minor
@commercetools-uikit/notifications	Minor
@commercetools-uikit/pagination	Minor
@commercetools-uikit/primary-action-dropdown	Minor
@commercetools-uikit/stamp	Minor
@commercetools-uikit/tag	Minor
@commercetools-uikit/text	Minor
@commercetools-uikit/tooltip	Minor
@commercetools-uikit/view-switcher	Minor
@commercetools-uikit/accessible-button	Minor
@commercetools-uikit/flat-button	Minor
@commercetools-uikit/icon-button	Minor
@commercetools-uikit/link-button	Minor
@commercetools-uikit/primary-button	Minor
@commercetools-uikit/secondary-button	Minor
@commercetools-uikit/secondary-icon-button	Minor
@commercetools-uikit/async-creatable-select-input	Minor
@commercetools-uikit/async-select-input	Minor
@commercetools-uikit/checkbox-input	Minor
@commercetools-uikit/creatable-select-input	Minor
@commercetools-uikit/date-input	Minor
@commercetools-uikit/date-range-input	Minor
@commercetools-uikit/date-time-input	Minor
@commercetools-uikit/input-utils	Minor
@commercetools-uikit/localized-money-input	Minor
@commercetools-uikit/localized-multiline-text-input	Minor
@commercetools-uikit/localized-rich-text-input	Minor
@commercetools-uikit/localized-text-input	Minor
@commercetools-uikit/money-input	Minor
@commercetools-uikit/multiline-text-input	Minor
@commercetools-uikit/number-input	Minor
@commercetools-uikit/password-input	Minor
@commercetools-uikit/radio-input	Minor
@commercetools-uikit/rich-text-input	Minor
@commercetools-uikit/rich-text-utils	Minor
@commercetools-uikit/search-select-input	Minor
@commercetools-uikit/search-text-input	Minor
@commercetools-uikit/select-input	Minor
@commercetools-uikit/select-utils	Minor
@commercetools-uikit/text-input	Minor
@commercetools-uikit/time-input	Minor
@commercetools-uikit/toggle-input	Minor
@commercetools-uikit/spacings-inline	Minor
@commercetools-uikit/spacings-inset-squish	Minor
@commercetools-uikit/spacings-inset	Minor
@commercetools-uikit/spacings-stack	Minor
@commercetools-uikit/buttons	Minor
@commercetools-uikit/spacings	Minor
visual-testing-app	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui-kit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 29, 2024 4:05pm

[obulaworld]

I had to replace all select fields' hasWarning prop to only be true if and only if the field is touched and the newly added warnings object prop has at least one warning. Please let me know if this will affect any team that might have been using the hasWarning prop as a simple truthy or falsy prop.

[CarlosCortizasCT]

It seems we're missing something in the DateRageField component as it's not rendering the orange border when it has a warning message.

[obulaworld]

It seems we're missing something in the DateRageField component as it's not rendering the orange border when it has a warning message.

@CarlosCortizasCT Fixed

[CarlosCortizasCT]

Many thanks for your work in this PR, Chisom 🙇

Please, wait for Filip and another Shield engineer approval 🙏

[kark]

Thank you, I'm leaving the comment to get a better understanding of the changes

[kark]

I'm a bit confused about one aspect in general. Based on my understanding, the original requirements were outlined here.

I read this comment but I'm not sure if this was addressed.

Previously, the hasWarning prop alone triggered the border display, but it's no longer considered. Is the hasWarning prop deprecated? Shouldn't this be mentioned in the changeset?

[CarlosCortizasCT]

That's a good catch, Kacper.

I think the hasWarning prop we currently have should be deprecated, but that means keeping it so consumers have time to transition from one prop (hasWarning) to the other (warnings).

We probably need the hasWarning constant calculation to be adjusted:

const hasWarning =
     this.props.hasWarnings ||
      (AsyncCreatableSelectInput.isTouched(this.props.touched) &&
      hasWarnings(this.props.warnings));

And also update the jsdoc of that property to mention about it.

@kark what do you think?

[kark]

Yes, that would be great!

[obulaworld]

Cool stuff. @CarlosCortizasCT So the jsdoc should mention that the field is already deprecated or is their a specific copy you would like to use?

[obulaworld]

Also does this mean we keep the hasWarning boolean prop in the story?

[CarlosCortizasCT]

Hi @obulaworld

@CarlosCortizasCT So the jsdoc should mention that the field is already deprecated or is their a specific copy you would like to use?

I mean both.
For example:

  /**
   * Indicates the input field has a warning.
   * @deprecated Please use the `warnings` prop instead so users know the reason why the field is in warning state.
   */
  hasWarning?: boolean;

Also does this mean we keep the hasWarning boolean prop in the story?

We should remove it as we don't want consumers to use it anymore.

[obulaworld]

Done

[CarlosCortizasCT]

Thanks.

[kark]

Thank you for the contribution 🎉 looks good to me

[FilPob]

Looking good from my side! I noticed only one point: In the Timefield the orange border takes precedence, even though both errors and warnings are shown. In all other fields when both errors and warnings are shown, the Red border takes precedence, which is correct

[obulaworld]

Looking good from my side! I noticed only one point: In the Timefield the orange border takes precedence, even though both errors and warnings are shown. In all other fields when both errors and warnings are shown, the Red border takes precedence, which is correct

This will be coming from the Input directly. So I guess I will update the Input in this PR.