Skip to content

Conversation

@omarelkashef
Copy link

@omarelkashef omarelkashef commented Jan 16, 2026

-----WIP------

Done

  • Added prefixedInput and prefixedIpInput components

QA

Pinging @canonical/react-library-maintainers for a review.

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

  • In Storybook, check prefixedInput and prefixedIpInput components.

Percy steps

UI should look like in LXD UI, see screenshots below
image
image

@webteam-app
Copy link

@omarelkashef omarelkashef changed the title feat(prefixedIpInput) add prefixedInput, prefixedIpInput WD-32589 feat(prefixedIpInput): add prefixedInput, prefixedIpInput WD-32589 Jan 16, 2026
@omarelkashef omarelkashef force-pushed the WD-32589-add-prefixedInput-component branch from 6bd7bcf to 4110fd7 Compare January 16, 2026 14:47
@omarelkashef omarelkashef marked this pull request as draft January 16, 2026 14:50
@omarelkashef omarelkashef force-pushed the WD-32589-add-prefixedInput-component branch 2 times, most recently from a879118 to ad0d431 Compare January 19, 2026 09:36
@omarelkashef omarelkashef marked this pull request as ready for review January 19, 2026 09:39
Copy link
Contributor

@edlerd edlerd left a comment

Choose a reason for hiding this comment

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

Thanks for adding the new components. Some observations from QA below.

@@ -0,0 +1,18 @@
@import "vanilla-framework";

.prefixed-input {
Copy link
Contributor

Choose a reason for hiding this comment

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

In Percy, there is too much spacing between the prefix and the editable part for the ip input. Though I can't reproduce it locally with Firefox and the dev server running.

image

@omarelkashef omarelkashef force-pushed the WD-32589-add-prefixedInput-component branch from ad0d431 to 926afae Compare January 20, 2026 12:00
Signed-off-by: Omar Elkashef <omarelkashef01@gmail.com>
@omarelkashef omarelkashef force-pushed the WD-32589-add-prefixedInput-component branch from 926afae to c16c2ab Compare January 20, 2026 12:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants