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

Conjoin search input and button #96

Merged
merged 2 commits into from
May 2, 2023
Merged

Conjoin search input and button #96

merged 2 commits into from
May 2, 2023

Conversation

reefdog
Copy link
Contributor

@reefdog reefdog commented May 2, 2023

This PR adds a FormElementGroup component that we can use to conjoin form elements (buttons, inputs) into horizontal or vertical groups. It also applies that component to the search atop the proposal list table, so the search input and its submit button are visually bound.

Before:
before

After:
after

Testing:

  • npm start
  • Open the app in browser and confirm the search form looks like "After" above
  • npm run storybook
  • Open the Storybook in browser and look at the FormElementGroup docs and confirm they are 👍

Sometimes we want form elements (buttons, inputs) to appear collected
together in a group, such as a text input with a conjoined submit
button.

This commit adds a `FormElementGroup` component that allows for this,
with both horizontal (default) and vertical variants.
The proposal list search input and button should be joined into a group.
@reefdog reefdog requested a review from jasonaowen May 2, 2023 02:54
@reefdog reefdog self-assigned this May 2, 2023
@netlify
Copy link

netlify bot commented May 2, 2023

Deploy Preview for philanthropy-data-commons-viewer ready!

Name Link
🔨 Latest commit 424f12b
🔍 Latest deploy log https://app.netlify.com/sites/philanthropy-data-commons-viewer/deploys/64507b58ceb26c0008552a99
😎 Deploy Preview https://deploy-preview-96--philanthropy-data-commons-viewer.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 site settings.

@slifty slifty self-requested a review May 2, 2023 15:31
Copy link
Contributor

@bickelj bickelj left a comment

Choose a reason for hiding this comment

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

I was able to see the change locally:

Before:
image

After:
image

I see no errors in the console log. As for the code, I only skimmed it but nothing pops out as objectionable.

@reefdog reefdog merged commit 2cd0f6c into main May 2, 2023
@reefdog reefdog deleted the use-button-group-search branch May 2, 2023 15:49
Copy link
Contributor

@jasonaowen jasonaowen left a comment

Choose a reason for hiding this comment

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

Very fancy!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants