PasswordField - adding a new prop to render the "Show/Hide" button

[chloe0592]

We had an inquiry for adding a prop to PasswordField that determines whether to render the "Show/Hide" button for password.

213Aasdasd.mov

[changeset-bot]

🦋 Changeset detected

Latest commit: f6691c8

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

This PR includes changesets to release 95 packages

Name	Type
@commercetools-uikit/password-field	Patch
@commercetools-uikit/fields	Patch
@commercetools-frontend/ui-kit	Patch
@commercetools-uikit/design-system	Patch
@commercetools-uikit/calendar-time-utils	Patch
@commercetools-uikit/calendar-utils	Patch
@commercetools-uikit/hooks	Patch
@commercetools-uikit/i18n	Patch
@commercetools-uikit/localized-utils	Patch
@commercetools-uikit/utils	Patch
@commercetools-uikit/accessible-hidden	Patch
@commercetools-uikit/avatar	Patch
@commercetools-uikit/card	Patch
@commercetools-uikit/collapsible-motion	Patch
@commercetools-uikit/collapsible-panel	Patch
@commercetools-uikit/collapsible	Patch
@commercetools-uikit/constraints	Patch
@commercetools-uikit/data-table-manager	Patch
@commercetools-uikit/data-table	Patch
@commercetools-uikit/field-errors	Patch
@commercetools-uikit/field-label	Patch
@commercetools-uikit/field-warnings	Patch
@commercetools-uikit/grid	Patch
@commercetools-uikit/icons	Patch
@commercetools-uikit/label	Patch
@commercetools-uikit/link	Patch
@commercetools-uikit/loading-spinner	Patch
@commercetools-uikit/messages	Patch
@commercetools-uikit/notifications	Patch
@commercetools-uikit/pagination	Patch
@commercetools-uikit/primary-action-dropdown	Patch
@commercetools-uikit/progress-bar	Patch
@commercetools-uikit/stamp	Patch
@commercetools-uikit/tag	Patch
@commercetools-uikit/text	Patch
@commercetools-uikit/tooltip	Patch
@commercetools-uikit/view-switcher	Patch
@commercetools-uikit/accessible-button	Patch
@commercetools-uikit/flat-button	Patch
@commercetools-uikit/icon-button	Patch
@commercetools-uikit/link-button	Patch
@commercetools-uikit/primary-button	Patch
@commercetools-uikit/secondary-button	Patch
@commercetools-uikit/secondary-icon-button	Patch
@commercetools-uikit/async-creatable-select-field	Patch
@commercetools-uikit/async-select-field	Patch
@commercetools-uikit/creatable-select-field	Patch
@commercetools-uikit/date-field	Patch
@commercetools-uikit/date-range-field	Patch
@commercetools-uikit/date-time-field	Patch
@commercetools-uikit/localized-multiline-text-field	Patch
@commercetools-uikit/localized-text-field	Patch
@commercetools-uikit/money-field	Patch
@commercetools-uikit/multiline-text-field	Patch
@commercetools-uikit/number-field	Patch
@commercetools-uikit/radio-field	Patch
@commercetools-uikit/search-select-field	Patch
@commercetools-uikit/select-field	Patch
@commercetools-uikit/text-field	Patch
@commercetools-uikit/time-field	Patch
@commercetools-uikit/async-creatable-select-input	Patch
@commercetools-uikit/async-select-input	Patch
@commercetools-uikit/checkbox-input	Patch
@commercetools-uikit/creatable-select-input	Patch
@commercetools-uikit/date-input	Patch
@commercetools-uikit/date-range-input	Patch
@commercetools-uikit/date-time-input	Patch
@commercetools-uikit/input-utils	Patch
@commercetools-uikit/localized-money-input	Patch
@commercetools-uikit/localized-multiline-text-input	Patch
@commercetools-uikit/localized-rich-text-input	Patch
@commercetools-uikit/localized-text-input	Patch
@commercetools-uikit/money-input	Patch
@commercetools-uikit/multiline-text-input	Patch
@commercetools-uikit/number-input	Patch
@commercetools-uikit/password-input	Patch
@commercetools-uikit/radio-input	Patch
@commercetools-uikit/rich-text-input	Patch
@commercetools-uikit/rich-text-utils	Patch
@commercetools-uikit/search-select-input	Patch
@commercetools-uikit/search-text-input	Patch
@commercetools-uikit/select-input	Patch
@commercetools-uikit/select-utils	Patch
@commercetools-uikit/selectable-search-input	Patch
@commercetools-uikit/text-input	Patch
@commercetools-uikit/time-input	Patch
@commercetools-uikit/toggle-input	Patch
@commercetools-uikit/spacings-inline	Patch
@commercetools-uikit/spacings-inset-squish	Patch
@commercetools-uikit/spacings-inset	Patch
@commercetools-uikit/spacings-stack	Patch
@commercetools-uikit/buttons	Patch
@commercetools-uikit/inputs	Patch
@commercetools-uikit/spacings	Patch
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	Mar 26, 2024 2:33pm

[FilPob]

UI wise everything looks correct. One thing I found in Percy though: Even though the screenshot doesn't render the showhide button, that description in the purple box says renderShowHideButton: true that's the case in all screenshots where the button is not rendered

[chloe0592]

UI wise everything looks correct. One thing I found in Percy though: Even though the screenshot doesn't render the showhide button, that description in the purple box says renderShowHideButton: true that's the case in all screenshots where the button is not rendered

Thanks @FilPob for noticing! I do think that's expected, because if we don't specifically set the prop renderShowHideButton to false it's always set to true by default.
Furthermore, the button won't be rendered even if it's set to true in case if the field is "Read-only" or "Disabled".
Does it makes sense to you?

[FilPob]

yes, if it was expected, it's fine for me :)

[kark]

Thanks 🙌

[kark]

nit: we typically use JSDoc notation for comments here

[chloe0592]

Oh great catch! Thanks @kark - f6691c8.

[ddouglasz]

Thank you! 🙌🏾