Skip to content

feat(password-input): new xs size#22112

Merged
riddhybansal merged 7 commits into
carbon-design-system:mainfrom
maradwan26:xs-password-input
Apr 30, 2026
Merged

feat(password-input): new xs size#22112
riddhybansal merged 7 commits into
carbon-design-system:mainfrom
maradwan26:xs-password-input

Conversation

@maradwan26

@maradwan26 maradwan26 commented Apr 23, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Closes #21786
Partially addresses #21969

Adds xs size to PasswordInput in React and Web Components.

Changelog

New

  • Added xs size and updated storybook controls and tests accordingly

Changed

  • Moved cds--layout--size-${size} class from the input field to the field wrapper so that both the input and toggle visibility button can use the tokens
  • Fixed an issue with the <input> field not having enough padding in some sizes, causing text to overflow into the toggle password visibiity button
  • Changed the toggle password visibility button to have an equal height & width in all sizes
    • Currently, the size prop only vertically stretches/compresses the button but the width is always 40px (example). So xs = 40x24 sm = 40x32, ... . The issue description says to just follow the same approach used currently in code since the design spec is TBD, but I applied an equal height & width for all sizes anyway in the meantime until the spec is finalized, as it seems this was the intended behaviour here, the selectors just didn't work.

Removed

  • Removed size classes (e.g. text-input--sm) and size related style blocks in favour of using contextual layout tokens
    • This should not cause any breaking visual changes to PasswordInput/TextInput, nor any other components
  • Web Components:
    • Scoped cds--btn--icon-only class to the fluid variant, and cds--btn to default variant
    • Removed cds--toggle-password-tooltip since it's not needed on the button
  • Removed xl size option from Storybook since it is not supported
  • Removed a bunch of style blocks that didn't work since the selector doesn't capture anything (e.g .cds--text-input--invalid + .cds--text-input--password__visibility__toggle, these aren't adjacent siblings)

Testing / Reviewing

  • Check PasswordInput stories in React and WC
  • xs, sm, md, and lg should render as expected
  • There should be no regressions to PasswordInput or any other related components

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

  • Reviewed every line of the diff
  • Updated documentation and storybook examples
  • Wrote passing tests that cover this change
  • Addressed any impact on accessibility (a11y)
  • Tested for cross-browser consistency
  • Validated that this code is ready for review and status checks should pass

@netlify

netlify Bot commented Apr 23, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-web-components ready!

Name Link
🔨 Latest commit cfffea8
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/69efa6589244fe00089a3047
😎 Deploy Preview https://deploy-preview-22112--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Apr 23, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit cfffea8
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/69efa658ebd3f000084c3264
😎 Deploy Preview https://deploy-preview-22112--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@codecov

codecov Bot commented Apr 23, 2026 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.05%. Comparing base (34a9b3e) to head (cfffea8).
⚠️ Report is 36 commits behind head on main.

Additional details and impacted files 
@@            Coverage Diff             @@
##             main   #22112      +/-   ##
==========================================
- Coverage   95.05%   95.05%   -0.01%     
==========================================
  Files         538      539       +1     
  Lines       45031    45155     +124     
  Branches     6473     6553      +80     
==========================================
+ Hits        42805    42922     +117     
- Misses       2097     2104       +7     
  Partials      129      129
Flag Coverage Δ
main-packages 89.11% <ø> (+0.04%) ⬆️
web-components 97.87% <100.00%> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@maradwan26 maradwan26 marked this pull request as ready for review April 23, 2026 19:02
@maradwan26 maradwan26 requested review from a team as code owners April 23, 2026 19:02
@maradwan26 maradwan26 requested review from a team and Rory-McDonald and removed request for a team April 23, 2026 19:05
@maradwan26 maradwan26 changed the title feat(password-input): new xs size feat(password-input): new xs size Apr 23, 2026
@Rory-McDonald

Rory-McDonald commented Apr 24, 2026

Copy link
Copy Markdown

Hi Maradwan, looking good!

Not sure if this a separate issue, but when testing I noticed that there is a duplication of the show text icon button when inputting text for the first time. Screenshots attached below:

Screenshot 2026-04-24 at 14 58 27 Screenshot 2026-04-24 at 14 59 15

@maradwan26

maradwan26 commented Apr 24, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

@Rory-McDonald
I'm not able to replicate this for some reason. What browser are you using? I think this might be coming in from the browser's password manager

adamalston
adamalston reviewed Apr 26, 2026
View reviewed changes
Comment thread packages/web-components/src/components/password-input/password-input.ts
@maradwan26 maradwan26 requested a review from adamalston April 27, 2026 17:57
@Rory-McDonald

Rory-McDonald commented Apr 28, 2026

Copy link
Copy Markdown

@Rory-McDonald I'm not able to replicate this for some reason. What browser are you using? I think this might be coming in from the browser's password manager

Oh yeah I think you are right, it's coming from the password manager on Microsoft edge.. My bad!

alina-jacob
alina-jacob reviewed Apr 28, 2026
View reviewed changes

@alina-jacob alina-jacob left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @maradwan26, thanks for working on this!
I think the password toggle's button width is intentionally set at 40px to give the consistent padding from right side. The current implementation seems a bit tight..
Image

Image

Maybe we will eventually re-visit the adoption of a fluid ghost icon only button for Password input, similar to Number input. But till then, i think the 8px padding shown in the spec will be needed!
Let me confirm and get back!

Image

@maradwan26

maradwan26 commented Apr 29, 2026

Copy link
Copy Markdown
Contributor Author

@alina-jacob

As discussed in Tuesday's intake call, we've decided to stick to what the original code intended to do, until a design spec for password-input is finalized.

@maradwan26 maradwan26 requested a review from alina-jacob April 29, 2026 19:52
heloiselui
heloiselui approved these changes Apr 30, 2026
View reviewed changes

@heloiselui heloiselui left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@alina-jacob alina-jacob requested review from alina-jacob and removed request for alina-jacob April 30, 2026 11:10
riddhybansal
riddhybansal approved these changes Apr 30, 2026
View reviewed changes

@riddhybansal riddhybansal left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 💯

@riddhybansal riddhybansal added this pull request to the merge queue Apr 30, 2026
Merged via the queue into carbon-design-system:main with commit dbb3bfa Apr 30, 2026
39 checks passed
@maradwan26 maradwan26 deleted the xs-password-input branch April 30, 2026 13:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@riddhybansal riddhybansal riddhybansal approved these changes

@heloiselui heloiselui heloiselui approved these changes

@Rory-McDonald Rory-McDonald Rory-McDonald approved these changes

@tay1orjones tay1orjones Awaiting requested review from tay1orjones tay1orjones is a code owner automatically assigned from carbon-design-system/developers-system-admins

@sangeethababu9223 sangeethababu9223 Awaiting requested review from sangeethababu9223 sangeethababu9223 is a code owner automatically assigned from carbon-design-system/monorepo-reviewers

@adamalston adamalston Awaiting requested review from adamalston

@alina-jacob alina-jacob Awaiting requested review from alina-jacob

Assignees

No one assigned

Labels

status: one more review 👀

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Condensed components] Password input: Implementation

6 participants

@maradwan26 @Rory-McDonald @adamalston @riddhybansal @heloiselui @alina-jacob