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

fix(file-upload): removed message container, added form to error example #2807

Merged
merged 2 commits into from Mar 16, 2020

Conversation

@mcoker
Copy link
Contributor

mcoker commented Mar 10, 2020

fixes #2797

@patternfly-build

This comment has been minimized.

Copy link

patternfly-build commented Mar 10, 2020

Preview: https://patternfly-next-pr-2807.surge.sh

A11y report: https://patternfly-next-pr-2807-coverage.surge.sh

CSS Size Report
NameCurrentPreviousDiff %
patternfly-ie11.css522.3 kB522.4 kB-0.02
patternfly.css674.8 kB675.5 kB-0.09
patternfly-no-reset.css673.0 kB673.6 kB-0.09
patternfly.min.css592.5 kB593.1 kB-0.10
components/FileUpload/file-upload.css4.6 kB5.2 kB-13.68
Copy link
Member

mcarrano left a comment

This looks fine to me, although I have to admit that I can't see what's different between this and what we released last week.

@mcoker

This comment has been minimized.

Copy link
Contributor Author

mcoker commented Mar 11, 2020

@mcarrano it just removes the file message/helper text at the bottom (instructions/error text) from the file upload component and relies on the file upload component being in a form for that helper text, so the helper text comes from the form component instead.

That also means:

  • Any updates we make to the form component's helper text (descriptive, error, success, etc) will be available when used with file upload since the file upload is no longer creating its own helper text.
  • The text doesn't get a blue overlay when you drag/hover the file upload component, since that text is no longer part of the file upload component.

old:
Screen Shot 2020-03-11 at 2 51 59 PM

new:
Screen Shot 2020-03-11 at 2 50 00 PM

@mcarrano

This comment has been minimized.

Copy link
Member

mcarrano commented Mar 11, 2020

Sounds good to me. Thanks for the explanation @mcoker !

Copy link

mturley left a comment

Looks great, thanks @mcoker !

Copy link
Member

christiemolloy left a comment

perfect

Copy link
Contributor

mattnolting left a comment

Nice work!

The new example is clearer than the other examples in that the file-upload is a member of a form, rather than a form itself. The other examples in their current implementation wouldn't allow error messaging, as they're not a descendant of .pf-c-form. Can you update the other examples until we have access to .pf-c-form__helper-text outside of a .pf-c-form?

@mturley

This comment has been minimized.

Copy link

mturley commented Mar 16, 2020

Ah, I'm glad you guys made that change, I forgot to mention I needed to make .pf-c-file-upload a div instead of a form in the React component so I could get my FormGroup example to work (React will refuse to let you nest a <form> in another <form>).

@mattnolting mattnolting self-requested a review Mar 16, 2020
Copy link
Contributor

mattnolting left a comment

LGTM! 🎉

@mattnolting mattnolting merged commit 438890b into patternfly:master Mar 16, 2020
3 checks passed
3 checks passed
ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: test_a11y Your tests passed on CircleCI!
Details
@redallen

This comment has been minimized.

Copy link
Contributor

redallen commented Mar 16, 2020

🎉 This PR is included in version 2.68.4 🎉

The release is available on:

Your semantic-release bot 📦🚀

@redallen redallen added the released label Mar 16, 2020
redallen pushed a commit that referenced this pull request Mar 17, 2020
…ple (#2807) (#2833)

* fix(file-upload): removed message container, added form to error example

* chore(fileupload): updated examples to be a div instead of form
redallen added a commit that referenced this pull request Mar 19, 2020
* fix(file-upload): removed message container, added form to error example (#2807)

* fix(file-upload): removed message container, added form to error example

* chore(fileupload): updated examples to be a div instead of form

* feat(docs): publish docs to NPM (#2839)

* fix(md): add example css to dist (#2840)

* chore(lint): dont lint example CSS (#2841)

Co-authored-by: zallen <47335686+redallen@users.noreply.github.com>
evwilkin pushed a commit that referenced this pull request Mar 30, 2020
* fix(file-upload): removed message container, added form to error example (#2807)

* fix(file-upload): removed message container, added form to error example

* chore(fileupload): updated examples to be a div instead of form

* feat(docs): publish docs to NPM (#2839)

* fix(md): add example css to dist (#2840)

* chore(lint): dont lint example CSS (#2841)

* feat(base): made shield styles optional by default (#2769)

* Revert "feat(base): made shield styles optional by default (#2769)" (#2867)

This reverts commit 0b32834.

* fix(table): updated text in column management demo modal (#2875)

* feat(infrastructure): parse hbs files (#2865)

* feat(infrastructure): parse hbs files

* fix(select): fixed attribute issue with select-menu-fieldset

* fix(select): update aria-label usage on select-menu-fieldset

* for non-group menus, use aria-label="Select input"
* for grouped menus, use aria-labelled by on fieldset, labeled by the group title
* updates match the react select component examples

Co-authored-by: Michael Coker <mcoker@redhat.com>

* chore(repo): replaced 288 occurences of patternfly-next with patternfly (#2880)

* fix(repo): update release notes (#2900)

Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>
Co-authored-by: Joachim <jschuler@redhat.com>
Co-authored-by: Michael Coker <mcoker@redhat.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

7 participants
You can’t perform that action at this time.