Skip to content

feat: Support right icon in Input component and enhance filtering #142

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: release
Choose a base branch
from
Open

feat: Support right icon in Input component and enhance filtering #142

wants to merge 1 commit into from
+136 −53

Conversation

@RajuSudhar
Copy link

@RajuSudhar RajuSudhar commented Oct 28, 2025 •
edited
Loading

  • Add rightImageUrl property to InputProperties for displaying icon on right side
  • Add filterPattern property to allow custom character filtering beyond default numeric filtering
  • Enhance Input component structure with right content slot and image support
  • Add comprehensive CSS variables for right content and image styling including hover states
  • Update InputButton component styling to remove default input margins and shadows
  • Improve text processing logic with configurable filtering patterns

Dev Proof
Video 1
Video 2

@RajuSudhar RajuSudhar force-pushed the BZ-45242-support-right-icon-in-input-svelte-ui-component branch 4 times, most recently from 5fc2019 to 362112d Compare October 29, 2025 05:50
sandeepsj
sandeepsj reviewed Nov 4, 2025
View reviewed changes
src/lib/Input/Input.svelte
input {
box-sizing: var(--input-box-sizing, border-box);
height: var(--input-height, fit-content);
height: 100%;
Copy link

@sandeepsj sandeepsj Nov 4, 2025

Choose a reason for hiding this comment

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

the component will break for existing places. we can pass 100% from nimble itself. no need of this change

Copy link
Author

@RajuSudhar RajuSudhar Nov 4, 2025

Choose a reason for hiding this comment

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

Have already exposed the existing variable for the container that wraps input and right img.

src/lib/Input/Input.svelte
-webkit-appearance: none !important; /* For Safari MWeb */
box-shadow: var(--input-box-shadow, 0px 1px 8px #2f537733);
border: var(--input-border, none);
border: none;
Copy link

@sandeepsj sandeepsj Nov 4, 2025

Choose a reason for hiding this comment

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

Why removing these? the component will break for other already exiting usecases

Copy link
Author

@RajuSudhar RajuSudhar Nov 4, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Have add the existing exposed properties below in the class input that wraps both input and image.

In Updated Line Number : 264

src/lib/Toast/Toast.svelte Outdated
left: var(--toast-left, 0);
right: var(--toast-right, 0);
background-color: var(--default-background-color, #87ceeb);
background-color: var(--toast-default-background-color, #87ceeb);
Copy link

@sandeepsj sandeepsj Nov 4, 2025

Choose a reason for hiding this comment

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

background-color: var(--toast-default-background-color, var(--default-background-color, #87ceeb); );

For backward compatibility

Copy link
Author

@RajuSudhar RajuSudhar Nov 4, 2025

Choose a reason for hiding this comment

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

Checked in Nimble, Lighthouse and Harbour. Not in use anywhere.

src/lib/Toast/Toast.svelte Outdated
.info {
color: var(--toast-info-text, #fff);
background-color: var(--toast-background-color, #87ceeb);
background-color: var(--toast-info-background-color, var(--toast-background-color, #87ceeb));
Copy link

@sandeepsj sandeepsj Nov 4, 2025

Choose a reason for hiding this comment

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

backward compatibility if needed

Copy link
Author

@RajuSudhar RajuSudhar Nov 4, 2025

Choose a reason for hiding this comment

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

Already added

@RajuSudhar RajuSudhar force-pushed the BZ-45242-support-right-icon-in-input-svelte-ui-component branch from 362112d to 3373ce1 Compare November 4, 2025 21:22
@RajuSudhar
feat: add right image and right content in input component
fd4c8f7 
- added rightImageUrl property and rightContent slot
- updated css to wrap right content within the input box
- exposed css for right image and right content
@RajuSudhar RajuSudhar force-pushed the BZ-45242-support-right-icon-in-input-svelte-ui-component branch from 3373ce1 to fd4c8f7 Compare November 10, 2025 20:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

2 more reviewers

@sandeepsj sandeepsj sandeepsj left review comments

@prajwal-jp prajwal-jp prajwal-jp approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@RajuSudhar @sandeepsj @prajwal-jp