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(TMR-1134): refactor form input logic #895

Merged
merged 7 commits into from
Jun 9, 2023
Merged

Conversation

tbradbury
Copy link
Contributor

Empty textfields have validation in forms even when they are optional:

image

This ticket updates the logic so when the text field input is not required and empty no validation visuals are visible.

Before:
Screenshot 2023-06-02 at 3 07 52 pm

After:
Screenshot 2023-06-02 at 3 08 08 pm

What

  1. Background - why this is needed
  2. What did you do
  3. What does the reviewers should expect

I have done:

  • Written unit tests against changes
  • Written functional tests against the component and/or NewsKit site
  • Updated relevant documentation

I have tested manually:

  • The feature's functionality is working as expected on Chrome, Firefox, Safari and Edge
  • The screen reader reads and flows through the elements as expected.
  • There are no new errors in the browser console coming from this PR.
  • When visual test is not added, it renders correctly on different browsers and mobile viewports (Safari, Firefox, small mobile viewport, tablet)
  • The Playground feature is working as expected

Before:

After:

Who should review this PR:

How to test:

When input is optional and also empty don’t show valid styles. Instead leave neutral.
@github-actions github-actions bot added the feature This change contains a new feature label Jun 5, 2023
@pp-serviceaccount
Copy link
Collaborator

baburay23
baburay23 previously approved these changes Jun 5, 2023
mutebg
mutebg previously approved these changes Jun 6, 2023
@tbradbury tbradbury dismissed stale reviews from mutebg and baburay23 via a42d3d5 June 6, 2023 16:15
baburay23
baburay23 previously approved these changes Jun 8, 2023
Xin00163
Xin00163 previously approved these changes Jun 8, 2023
isRequired: boolean | undefined,
hasContent: boolean,
) => {
if (!isRequired && !hasContent && state === 'valid') return undefined;
Copy link
Contributor

Choose a reason for hiding this comment

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

can we make this line a bit more descriptive? maybe assigning a new variable for the expression ?

@@ -478,6 +478,75 @@ describe('Form', () => {
});
expect(fragment).toMatchSnapshot();
});

test('render optional textfield correctly', async () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

can we rename the test to something more descriptive like 'render optional textfield without vlidation icons' or something like this

@tbradbury tbradbury dismissed stale reviews from Xin00163 and baburay23 via 25b60c8 June 8, 2023 15:24
@tbradbury tbradbury merged commit ac78be2 into main Jun 9, 2023
@tbradbury tbradbury deleted the feat/TMR-1134-form branch June 9, 2023 08:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature This change contains a new feature
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

6 participants