Change custom file markup #28696
Change custom file markup #28696
Conversation
|
Maybe we should also include an example wit a longer placeholder to demonstrate the truncation? |
|
I checked the SCSS again and confirmed that there are no problem, I updated the PR comment and remove the WIP. @MartijnCuppens Could you add the example? if you are okay with that 🙏 |
MartijnCuppens
force-pushed
the
custom-file-markup
branch
from
a2d3a7b to
eb32e69
Compare
MartijnCuppens
force-pushed
the
custom-file-markup
branch
from
eb32e69 to
43a1db3
Compare
|
Wouldn't make more sense to use the grid in this and the previous example? That way we won't have those long forms. |
|
I think I’m good with this, but does it come at the cost of a screen reader announcing the button text since it’s in the label? |
|
@mdo had a super-cursory check with NVDA and Jaws on Win (Chrome/Firefox/IE), and it seems to behave no different from the current implementation, unless i'm missing something? |
|
Hadn’t compared to current behavior, so just wanted to ask the question to see if this a regression or area for improvement for us. If you’re good with it @patrickhlauke, I’m good here. |
|
it seems appropriate to me (not extensively tested/compared to native clean unaltered file input, but these are notoriously icky - particularly in Firefox/NVDA - and just checking the above seemed good for me) |
|
Thanks. I suggest small improvements. Set line-height/font-weight on the |
Might indeed be a nice improvement.
I don't mind using the universal selector in case we gain a lot of improvement by it. Since we know what the classes of the children will be ( |
* Initial spike of consolidated form checks * Stub out forms rearrangement - Prepping to drop non-custom file and range inputs - Prepping to merge custom and native checks and radios (with switches) - Prepping to merge custom select with form select - Moving docs arround so forms has it's own area given volume of CSS * Move input group Sass file to forms subdir * Start to split and move the docs around * Simpler imports * Copyediting * delete overview file * Remove commented out code * remove the custom-forms import * rewrite flex-check as form-check, replace all custom properties * Remove old forms doc * stub out new subpage link section * update migration guide * Update nav, forms overview in page nav, and descriptions * fix check bg position * fix margin-top calculation * rename .custom-select to .form-select * Update validation styles for new checks * add some vertical margin, fix inline checks * fix docs examples * better way to do this contents stuff, redo the toc while i'm at it * page restyle for docs while here * un-callout that, edit text * redo padding on toc * fix toc * start to cleanup checks docs * Rewrite Markdown tables into HTML * Redesign tables, redo their docs * Replace Open Iconic icons with custom Bootstrap icons * Redesign the docs navbar, add a subheader, redo the sidebar * Redesign docs homepage a bit * Simplify table style overrides for docs tables * Simplify docs typography for page titles and reading line length * Stub out icons page * Part of sidebar update, remove migration from nav.yml * Move toc CSS to separate partial * Change appearance of overview page * fix sidebar arrow direction * Add footer to docs layout * Update descriptions * Drop the .form-group class for margin utilities * Remove lingering form-group-margin-bottom var * improve footer spacing * add headings to range page * uncomment form range css * Rename .custom-range to .form-range * Drop unused docs var * Uncomment the comment * Remove unused variable * Fix radio image sizing * Reboot update: reset horizontal ul and ol padding * de-dupe IDs * tweak toc styles * nvm, fix dropdown versions stuff * remove sidebar nav toggle for now * broken html * fix more broken html, move css * scss linting * comment out broken helper docs * scope styles * scope styles * Fixes #25540 and fixes #26407 for v5 only * Update sidebar once more * Match new sidenav order * fix syntax error * Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696 * rename back * fix size and alignment * rename that back too
* Initial spike of consolidated form checks * Stub out forms rearrangement - Prepping to drop non-custom file and range inputs - Prepping to merge custom and native checks and radios (with switches) - Prepping to merge custom select with form select - Moving docs arround so forms has it's own area given volume of CSS * Move input group Sass file to forms subdir * Start to split and move the docs around * Simpler imports * Copyediting * delete overview file * Remove commented out code * remove the custom-forms import * rewrite flex-check as form-check, replace all custom properties * Remove old forms doc * stub out new subpage link section * update migration guide * Update nav, forms overview in page nav, and descriptions * fix check bg position * fix margin-top calculation * rename .custom-select to .form-select * Update validation styles for new checks * add some vertical margin, fix inline checks * fix docs examples * better way to do this contents stuff, redo the toc while i'm at it * page restyle for docs while here * un-callout that, edit text * redo padding on toc * fix toc * start to cleanup checks docs * Rewrite Markdown tables into HTML * Redesign tables, redo their docs * Replace Open Iconic icons with custom Bootstrap icons * Redesign the docs navbar, add a subheader, redo the sidebar * Redesign docs homepage a bit * Simplify table style overrides for docs tables * Simplify docs typography for page titles and reading line length * Stub out icons page * Part of sidebar update, remove migration from nav.yml * Move toc CSS to separate partial * Change appearance of overview page * fix sidebar arrow direction * Add footer to docs layout * Update descriptions * Drop the .form-group class for margin utilities * Remove lingering form-group-margin-bottom var * improve footer spacing * add headings to range page * uncomment form range css * Rename .custom-range to .form-range * Drop unused docs var * Uncomment the comment * Remove unused variable * Fix radio image sizing * Reboot update: reset horizontal ul and ol padding * de-dupe IDs * tweak toc styles * nvm, fix dropdown versions stuff * remove sidebar nav toggle for now * broken html * fix more broken html, move css * scss linting * comment out broken helper docs * scope styles * scope styles * Fixes #25540 and fixes #26407 for v5 only * Update sidebar once more * Match new sidenav order * fix syntax error * Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696 * rename back * fix size and alignment * rename that back too
6 participants
Please see #28511 (comment).
By changing the markup of custom file, remove the way of translating button labels by CSS, and support a long file name. Now, you can change the button label by HTML.
And for fix #28389, move the border to the each children of the
.custom-file-label. Another way byoverflow: hiddenis suddested (#28388 (comment)), but it does not round the inside of the corner.I also added the
transitionto.custom-file-textand.custom-file-buttonfor focused border color animation.Closes #25497
Closes #26933
Closes #28388
Closes #28389
Preview: https://deploy-preview-28696--twbs-bootstrap.netlify.com/docs/4.3/components/forms/#file-browser