Skip to content
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.

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

feat: Redesign all Input components #2030

Merged
merged 58 commits into from
Mar 28, 2024

Conversation

chaitanyadeorukhkar
Copy link
Collaborator

@chaitanyadeorukhkar chaitanyadeorukhkar commented Feb 21, 2024

Description

Redesign of Input family components.

This PR currently contains changes to BaseInput only. We will eventually merge all Input related PRs to this branch before it goes to master.

BaseInput

  • Add trailingIcon prop
  • Add trailingLinkButton prop
  • Add size prop

TextInput

  • Add leadingIcon prop
  • ⚠️ Deprecate icon prop in favour of leadingIcon
  • Add trailingIcon prop
  • Add trailingLinkButton prop
  • Add size prop

TextArea

  • Add size prop

PasswordInput

  • Adds size prop

OTPInput

  • Redesigned UI
  • Add size prop

SelectInput

  • Redesigned UI
  • Add size prop

Autocomplete

  • Redesigned UI
  • Add size prop

Radio

  • Add size prop

Checkbox

  • Add size prop

Changes

Additional Information

Component Checklist

  • Update Component Status Page
  • Perform Manual Testing in Other Browsers
  • Add KitchenSink Story
  • Add Interaction Tests (if applicable)
  • Add changeset

Copy link

changeset-bot bot commented Feb 21, 2024

🦋 Changeset detected

Latest commit: f2e58b8

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

This PR includes changesets to release 1 package
Name Type
@razorpay/blade Minor

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

Copy link
Contributor

github-actions bot commented Feb 21, 2024

✅ PR title follows Conventional Commits specification.

Copy link

codesandbox-ci bot commented Feb 21, 2024

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit f2e58b8:

Sandbox Source
razorpay/blade: basic Configuration

anuraghazra
anuraghazra previously approved these changes Feb 29, 2024
Copy link
Member

@saurabhdaware saurabhdaware left a comment

Choose a reason for hiding this comment

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

Nice work 🥇 Looks pretty complex 🖖🏼

packages/blade/src/components/Form/FormLabel.tsx Outdated Show resolved Hide resolved
* trailingActionButton={<Link onClick={handleClick}>Apply</Link>}
* ```
*/
trailingActionButton?: React.ReactElement<LinkProps>;
Copy link
Member

Choose a reason for hiding this comment

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

What if we just do trailingButton or trailingAction? Button implies Action no?

Copy link
Member

Choose a reason for hiding this comment

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

Nice 🔥

saurabhdaware
saurabhdaware previously approved these changes Mar 4, 2024
@chaitanyadeorukhkar chaitanyadeorukhkar marked this pull request as ready for review March 26, 2024 11:29
@chaitanyadeorukhkar chaitanyadeorukhkar changed the title feat: Input components Redesign feat: Redesign all Input components Mar 26, 2024
@chaitanyadeorukhkar chaitanyadeorukhkar merged commit 015e682 into master Mar 28, 2024
17 checks passed
@chaitanyadeorukhkar chaitanyadeorukhkar deleted the feat/base-input-ui-changes branch March 28, 2024 05:41
anuraghazra pushed a commit that referenced this pull request Apr 9, 2024
## Changes
### TextInput
- Redesigned UI
- Add `leadingIcon` prop
- ⚠️ Deprecate `icon` prop in favour of `leadingIcon` which will be removed in the next major version
- Add `trailingIcon` prop
- Add `trailingLinkButton` prop
- Add `size` prop

### TextArea
- Redesigned UI
- Add `size` prop

### PasswordInput
- Redesigned UI
- Adds `size` prop

### OTPInput
- Redesigned UI
- Add `size` prop

### SelectInput
- Redesigned UI
- Add `size` prop

### Autocomplete
- Redesigned UI
- Add `size` prop

### Radio
- Add `size` prop

### Checkbox
- Add `size` prop
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Review - L2 Second level of review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants