From f236667483c33c69a4c052b41e71ac86bfcc8e74 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Thu, 22 Oct 2020 15:20:53 +0200 Subject: [PATCH] Drop custom file upload plugin in favor of CSS --- scss/_forms.scss | 1 - scss/_variables.scss | 30 +----- scss/forms/_form-control.scss | 77 ++++++++++++++++ scss/forms/_form-file.scss | 91 ------------------- scss/forms/_input-group.scss | 21 +---- scss/mixins/_forms.scss | 16 ---- site/assets/js/application.js | 4 +- .../js/vendor/bs-custom-file-input.min.js | 7 -- site/content/docs/5.0/forms/file.md | 73 --------------- site/content/docs/5.0/forms/form-control.md | 25 +++++ site/content/docs/5.0/forms/input-group.md | 32 +------ site/content/docs/5.0/forms/overview.md | 2 - site/content/docs/5.0/forms/validation.md | 9 +- site/content/docs/5.0/migration.md | 3 +- site/data/sidebar.yml | 1 - 15 files changed, 115 insertions(+), 277 deletions(-) delete mode 100644 scss/forms/_form-file.scss delete mode 100644 site/assets/js/vendor/bs-custom-file-input.min.js delete mode 100644 site/content/docs/5.0/forms/file.md diff --git a/scss/_forms.scss b/scss/_forms.scss index d2a15a4f2e..7b17d849ac 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -3,7 +3,6 @@ @import "forms/form-control"; @import "forms/form-select"; @import "forms/form-check"; -@import "forms/form-file"; @import "forms/form-range"; @import "forms/floating-labels"; @import "forms/input-group"; diff --git a/scss/_variables.scss b/scss/_variables.scss index 1c0429f9a9..beb3e8c0ca 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -793,35 +793,9 @@ $form-range-thumb-active-bg: tint-color($component-active-bg, 70%) $form-range-thumb-disabled-bg: $gray-500 !default; $form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; -$form-file-height: $input-height !default; -$form-file-focus-border-color: $input-focus-border-color !default; -$form-file-focus-box-shadow: $input-focus-box-shadow !default; -$form-file-disabled-bg: $input-disabled-bg !default; -$form-file-disabled-border-color: $input-disabled-border-color !default; - -$form-file-padding-y: $input-padding-y !default; -$form-file-padding-x: $input-padding-x !default; -$form-file-line-height: $input-line-height !default; -$form-file-font-family: $input-font-family !default; -$form-file-font-weight: $input-font-weight !default; -$form-file-color: $input-color !default; -$form-file-bg: $input-bg !default; -$form-file-border-width: $input-border-width !default; -$form-file-border-color: $input-border-color !default; -$form-file-border-radius: $input-border-radius !default; -$form-file-box-shadow: $input-box-shadow !default; -$form-file-button-color: $form-file-color !default; +$form-file-button-color: $input-color !default; $form-file-button-bg: $input-group-addon-bg !default; - -$form-file-padding-y-sm: $input-padding-y-sm !default; -$form-file-padding-x-sm: $input-padding-x-sm !default; -$form-file-font-size-sm: $input-font-size-sm !default; -$form-file-height-sm: $input-height-sm !default; - -$form-file-padding-y-lg: $input-padding-y-lg !default; -$form-file-padding-x-lg: $input-padding-x-lg !default; -$form-file-font-size-lg: $input-font-size-lg !default; -$form-file-height-lg: $input-height-lg !default; +$form-file-button-hover-bg: shade-color($input-group-addon-bg, 5%) !default; $form-floating-height: add(3.5rem, $input-height-border) !default; $form-floating-padding-x: $input-padding-x !default; diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index 6686ecfb80..9fa9cbae45 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -23,6 +23,14 @@ @include box-shadow($input-box-shadow); @include transition($input-transition); + &[type="file"] { + overflow: hidden; // prevent pseudo element button overlap + + &:not(:disabled):not([readonly]) { + cursor: pointer; + } + } + // Customize the `:focus` state to imitate native WebKit styles. &:focus { color: $input-focus-color; @@ -56,6 +64,49 @@ // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. opacity: 1; } + + // File input buttons theming + // stylelint-disable-next-line selector-pseudo-element-no-unknown + &::file-selector-button { + padding: $input-padding-y $input-padding-x; + margin: (-$input-padding-y) (-$input-padding-x); + margin-inline-end: $input-padding-x; + line-height: inherit; + color: $form-file-button-color; + @include gradient-bg($form-file-button-bg); + pointer-events: none; + border-color: inherit; + border-style: solid; + border-width: 0; + border-inline-end-width: $input-border-width; + border-radius: 0; // stylelint-disable-line property-disallowed-list + @include transition($btn-transition); + } + + // stylelint-disable-next-line selector-pseudo-element-no-unknown + &:hover:not(:disabled):not([readonly])::file-selector-button { + background-color: $form-file-button-hover-bg; + } + + &::-webkit-file-upload-button { + padding: $input-padding-y $input-padding-x; + margin: (-$input-padding-y) (-$input-padding-x); + margin-inline-end: $input-padding-x; + line-height: inherit; + color: $form-file-button-color; + @include gradient-bg($form-file-button-bg); + pointer-events: none; + border-color: inherit; + border-style: solid; + border-width: 0; + border-inline-end-width: $input-border-width; + border-radius: 0; // stylelint-disable-line property-disallowed-list + @include transition($btn-transition); + } + + &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { + background-color: $form-file-button-hover-bg; + } } // Readonly controls as plain text @@ -93,6 +144,19 @@ padding: $input-padding-y-sm $input-padding-x-sm; @include font-size($input-font-size-sm); @include border-radius($input-border-radius-sm); + + // stylelint-disable-next-line selector-pseudo-element-no-unknown + &::file-selector-button { + padding: $input-padding-y-sm $input-padding-x-sm; + margin: (-$input-padding-y-sm) (-$input-padding-x-sm); + margin-inline-end: $input-padding-x-sm; + } + + &::-webkit-file-upload-button { + padding: $input-padding-y-sm $input-padding-x-sm; + margin: (-$input-padding-y-sm) (-$input-padding-x-sm); + margin-inline-end: $input-padding-x-sm; + } } .form-control-lg { @@ -100,6 +164,19 @@ padding: $input-padding-y-lg $input-padding-x-lg; @include font-size($input-font-size-lg); @include border-radius($input-border-radius-lg); + + // stylelint-disable-next-line selector-pseudo-element-no-unknown + &::file-selector-button { + padding: $input-padding-y-lg $input-padding-x-lg; + margin: (-$input-padding-y-lg) (-$input-padding-x-lg); + margin-inline-end: $input-padding-x-lg; + } + + &::-webkit-file-upload-button { + padding: $input-padding-y-lg $input-padding-x-lg; + margin: (-$input-padding-y-lg) (-$input-padding-x-lg); + margin-inline-end: $input-padding-x-lg; + } } .form-control-color { diff --git a/scss/forms/_form-file.scss b/scss/forms/_form-file.scss deleted file mode 100644 index 228d9adf39..0000000000 --- a/scss/forms/_form-file.scss +++ /dev/null @@ -1,91 +0,0 @@ -.form-file { - --#{$variable-prefix}form-file-height: #{$form-file-height}; - position: relative; -} - -.form-file-input { - position: relative; - z-index: 2; - width: 100%; - height: var(--#{$variable-prefix}form-file-height); - margin: 0; - opacity: 0; - - &:focus-within ~ .form-file-label { - border-color: $form-file-focus-border-color; - box-shadow: $form-file-focus-box-shadow; - } - - // Use disabled attribute in addition of :disabled pseudo-class - // See: https://github.com/twbs/bootstrap/issues/28247 - &[disabled] ~ .form-file-label .form-file-text, - &:disabled ~ .form-file-label .form-file-text { - background-color: $form-file-disabled-bg; - border-color: $form-file-disabled-border-color; - } -} - -.form-file-label { - position: absolute; - top: 0; - right: 0; - left: 0; - z-index: 1; - display: flex; - height: var(--#{$variable-prefix}form-file-height); - border-color: $form-file-border-color; - @include border-radius($form-file-border-radius); - @include box-shadow($form-file-box-shadow); -} - -.form-file-text { - display: block; - flex-grow: 1; - padding: $form-file-padding-y $form-file-padding-x; - overflow: hidden; - font-family: $form-file-font-family; - font-weight: $form-file-font-weight; - line-height: $form-file-line-height; - color: $form-file-color; - text-overflow: ellipsis; - white-space: nowrap; - background-color: $form-file-bg; - border-color: inherit; - border-style: solid; - border-width: $form-file-border-width; - @include border-left-radius(inherit); -} - -.form-file-button { - display: block; - flex-shrink: 0; - padding: $form-file-padding-y $form-file-padding-x; - margin-left: -$form-file-border-width; - line-height: $form-file-line-height; - color: $form-file-button-color; - @include gradient-bg($form-file-button-bg); - border-color: inherit; - border-style: solid; - border-width: $form-file-border-width; - @include border-right-radius(inherit); -} - -.form-file-sm { - --#{$variable-prefix}form-file-height: #{$form-file-height-sm}; - @include font-size($form-file-font-size-sm); - - .form-file-text, - .form-file-button { - padding: $form-file-padding-y-sm $form-file-padding-x-sm; - } -} - -.form-file-lg { - --#{$variable-prefix}form-file-height: #{$form-file-height-lg}; - @include font-size($form-file-font-size-lg); - - .form-file-text, - .form-file-button { - padding: $form-file-padding-y-lg $form-file-padding-x-lg; - } -} diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss index 5611f85c5b..938a4185b3 100644 --- a/scss/forms/_input-group.scss +++ b/scss/forms/_input-group.scss @@ -10,8 +10,7 @@ width: 100%; > .form-control, - > .form-select, - > .form-file { + > .form-select { position: relative; // For focus state's z-index flex: 1 1 auto; width: 1%; @@ -20,26 +19,10 @@ // Bring the "active" form control to the top of surrounding elements > .form-control:focus, - > .form-select:focus, - > .form-file .form-file-input:focus ~ .form-file-label { + > .form-select:focus { z-index: 3; } - // Bring the custom file input above the label - > .form-file { - > .form-file-input:focus { - z-index: 4; - } - - &:not(:last-child) > .form-file-label { - @include border-right-radius(0); - } - - &:not(:first-child) > .form-file-label { - @include border-left-radius(0); - } - } - // Ensure buttons are always above inputs for more visually pleasing borders. // This isn't needed for `.input-group-text` since it shares the same border-color // as our inputs. diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 99ca559846..9adc0debee 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -114,20 +114,4 @@ margin-left: .5em; } } - - // custom file - .form-file-input { - @include form-validation-state-selector($state) { - ~ .form-file-label { - border-color: $color; - } - - &:focus { - ~ .form-file-label { - border-color: $color; - box-shadow: 0 0 0 $input-focus-width rgba($color, .25); - } - } - } - } } diff --git a/site/assets/js/application.js b/site/assets/js/application.js index 51dc20d42d..52822dc0ce 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -10,7 +10,7 @@ * For details, see https://creativecommons.org/licenses/by/3.0/. */ -/* global ClipboardJS: false, anchors: false, bootstrap: false, bsCustomFileInput: false */ +/* global ClipboardJS: false, anchors: false, bootstrap: false */ (function () { 'use strict' @@ -141,6 +141,4 @@ icon: '#' } anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5') - - bsCustomFileInput.init() })() diff --git a/site/assets/js/vendor/bs-custom-file-input.min.js b/site/assets/js/vendor/bs-custom-file-input.min.js deleted file mode 100644 index 0815f3768d..0000000000 --- a/site/assets/js/vendor/bs-custom-file-input.min.js +++ /dev/null @@ -1,7 +0,0 @@ -/*! - * bsCustomFileInput v1.3.4 (https://github.com/Johann-S/bs-custom-file-input) - * Copyright 2018 - 2020 Johann-S - * Licensed under MIT (https://github.com/Johann-S/bs-custom-file-input/blob/master/LICENSE) - */ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).bsCustomFileInput=t()}(this,function(){"use strict";var s={CUSTOMFILE:'.custom-file input[type="file"]',CUSTOMFILELABEL:".custom-file-label",FORM:"form",INPUT:"input"},l=function(e){if(0}} -The recommended plugin to animate custom file inputs is [bs-custom-file-input](https://www.npmjs.com/package/bs-custom-file-input); it's what we use here in our docs. -{{< /callout >}} - -## Default - -The file input is the most gnarly of the bunch and requires additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text. - -{{< example >}} -
- - -
-{{< /example >}} - -Add the `disabled` attribute to the `` and the custom markup will be updated to appear disabled. - -{{< example >}} -
- - -
-{{< /example >}} - -Longer placeholder text is truncated and an ellipsis is added when there's not enough space. - -{{< example >}} -
- - -
-{{< /example >}} - -We hide the default file `` via `opacity` and instead style the `