Skip to content

Commit

Permalink
Merge branch 'master' into master-mc-reboot
Browse files Browse the repository at this point in the history
  • Loading branch information
@XhmikosR
XhmikosR committed Apr 30, 2019
2 parents d6b5850 + f36890d commit 7f3e467
Show file tree
Hide file tree
Showing 20 changed files with 702 additions and 584 deletions.
5 changes: 2 additions & 3 deletions .travis.yml
View file
Expand Up @@ -6,6 +6,7 @@ git:
node_js:
- "8"
- "10"
- "12"
before_script:
- google-chrome-stable --product-version
script:
Expand All @@ -14,8 +15,6 @@ script:
- if [[ "$TRAVIS_NODE_VERSION" = "10" && "$TRAVIS_EVENT_TYPE" = "push" && ! `git log --format=%B --no-merges -n 1 | grep '\[skip browser\]'` ]]; then npm run js-test-cloud; fi
after_success:
- if [[ "$TRAVIS_NODE_VERSION" = "10" ]]; then npm run coveralls; fi
cache:
directories:
- "$HOME/.npm"
cache: npm
notifications:
email: false
4 changes: 2 additions & 2 deletions README.md
View file
Expand Up @@ -66,8 +66,8 @@ Read the [Getting started page](https://getbootstrap.com/docs/4.3/getting-starte
[![CSS gzip size](https://img.badgesize.io/twbs/bootstrap/master/dist/css/bootstrap.min.css?compression=gzip&label=CSS+gzip+size)](https://github.com/twbs/bootstrap/tree/master/dist/css/bootstrap.min.css)
[![JS gzip size](https://img.badgesize.io/twbs/bootstrap/master/dist/js/bootstrap.min.js?compression=gzip&label=JS+gzip+size)](https://github.com/twbs/bootstrap/tree/master/dist/js/bootstrap.min.js)
[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=SkxZcStBeExEdVJqQ2hWYnlWckpkNmNEY213SFp6WHFETWk2bGFuY3pCbz0tLXhqbHJsVlZhQnRBdEpod3NLSDMzaHc9PQ==--3d0b75245708616eb93113221beece33e680b229)](https://www.browserstack.com/automate/public-build/SkxZcStBeExEdVJqQ2hWYnlWckpkNmNEY213SFp6WHFETWk2bGFuY3pCbz0tLXhqbHJsVlZhQnRBdEpod3NLSDMzaHc9PQ==--3d0b75245708616eb93113221beece33e680b229)
[![Backers on Open Collective](https://img.shields.io/opencollective/backers/bootstrap.svg?style=flat)](#backers)
[![Sponsors on Open Collective](https://img.shields.io/opencollective/sponsors/bootstrap.svg?style=flat)](#sponsors)
[![Backers on Open Collective](https://img.shields.io/opencollective/backers/bootstrap.svg)](#backers)
[![Sponsors on Open Collective](https://img.shields.io/opencollective/sponsors/bootstrap.svg)](#sponsors)


## What's included
Expand Down
1,092 changes: 608 additions & 484 deletions package-lock.json
View file

Large diffs are not rendered by default.

32 changes: 16 additions & 16 deletions package.json
View file
Expand Up @@ -106,51 +106,51 @@
"popper.js": "^1.15.0"
},
"devDependencies": {
"@babel/cli": "^7.4.3",
"@babel/core": "^7.4.3",
"@babel/plugin-proposal-object-rest-spread": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.4",
"@babel/plugin-proposal-object-rest-spread": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"autoprefixer": "^9.5.1",
"babel-eslint": "^10.0.1",
"babel-plugin-istanbul": "^5.1.1",
"babel-plugin-istanbul": "^5.1.3",
"bundlesize": "0.15.3",
"clean-css-cli": "^4.3.0",
"coveralls": "^3.0.3",
"cross-env": "^5.2.0",
"eslint": "^5.16.0",
"eslint-config-xo": "^0.26.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-unicorn": "^8.0.2",
"find-unused-sass-variables": "^0.3.3",
"glob": "^7.1.3",
"hammer-simulator": "0.0.1",
"http-server": "^0.11.1",
"hugo-bin": "^0.43.1",
"hugo-bin": "^0.43.4",
"ip": "^1.1.5",
"jquery": "^3.3.1",
"karma": "^4.0.1",
"karma": "^4.1.0",
"karma-browserstack-launcher": "^1.5.1",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.5",
"karma-detect-browsers": "^2.3.3",
"karma-firefox-launcher": "^1.1.0",
"karma-qunit": "^3.1.1",
"karma-qunit": "^3.1.2",
"karma-sinon": "^1.0.5",
"linkinator": "^1.2.1",
"node-sass": "^4.11.0",
"linkinator": "^1.3.1",
"node-sass": "^4.12.0",
"nodemon": "^1.18.11",
"npm-run-all": "^4.1.5",
"popper.js": "^1.15.0",
"postcss-cli": "^6.1.2",
"qunit": "^2.9.2",
"rollup": "^1.9.3",
"rollup": "^1.10.1",
"rollup-plugin-babel": "^4.3.2",
"rollup-plugin-node-resolve": "^4.2.2",
"rollup-plugin-node-resolve": "^4.2.3",
"shelljs": "^0.8.3",
"shx": "^0.3.2",
"sinon": "^7.3.1",
"stylelint": "^9.10.1",
"stylelint-config-twbs-bootstrap": "^0.3.0",
"sinon": "^7.3.2",
"stylelint": "^10.0.1",
"stylelint-config-twbs-bootstrap": "^0.3.1",
"terser": "^3.17.0",
"vnu-jar": "18.11.5"
},
Expand Down
60 changes: 31 additions & 29 deletions scss/_custom-forms.scss
View file
Expand Up @@ -315,16 +315,6 @@
&[disabled] ~ .custom-file-label {
background-color: $custom-file-disabled-bg;
}

@each $lang, $value in $custom-file-text {
&:lang(#{$lang}) ~ .custom-file-label::after {
content: $value;
}
}

~ .custom-file-label[data-browse]::after {
content: attr(data-browse);
}
}

.custom-file-label {
Expand All @@ -333,33 +323,43 @@
right: 0;
left: 0;
z-index: 1;
display: flex;
height: $custom-file-height;
border-color: $custom-file-border-color;
@include border-radius($custom-file-border-radius);
@include box-shadow($custom-file-box-shadow);
}

.custom-file-text {
display: block;
flex-grow: 1;
padding: $custom-file-padding-y $custom-file-padding-x;
overflow: hidden;
font-family: $custom-file-font-family;
font-weight: $custom-file-font-weight;
line-height: $custom-file-line-height;
color: $custom-file-color;
text-overflow: ellipsis;
white-space: nowrap;
background-color: $custom-file-bg;
border: $custom-file-border-width solid $custom-file-border-color;
@include border-radius($custom-file-border-radius);
@include box-shadow($custom-file-box-shadow);
border-color: inherit;
border-style: solid;
border-width: $custom-file-border-width;
@include border-left-radius(inherit);
}

&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 3;
display: block;
height: $custom-file-height-inner;
padding: $custom-file-padding-y $custom-file-padding-x;
line-height: $custom-file-line-height;
color: $custom-file-button-color;
content: "Browse";
@include gradient-bg($custom-file-button-bg);
border-left: inherit;
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
}
.custom-file-button {
display: block;
flex-shrink: 0;
padding: $custom-file-padding-y $custom-file-padding-x;
margin-left: -$custom-file-border-width;
line-height: $custom-file-line-height;
color: $custom-file-button-color;
@include gradient-bg($custom-file-button-bg);
border-color: inherit;
border-style: solid;
border-width: $custom-file-border-width;
@include border-right-radius(inherit);
}

// Range
Expand Down Expand Up @@ -507,6 +507,8 @@

.custom-control-label::before,
.custom-file-label,
.custom-file-text,
.custom-file-button,
.custom-select {
@include transition($custom-forms-transition);
}
4 changes: 0 additions & 4 deletions scss/_variables.scss
View file
Expand Up @@ -623,7 +623,6 @@ $custom-range-thumb-active-bg: lighten($component-active-bg, 35%)
$custom-range-thumb-disabled-bg: $gray-500 !default;

$custom-file-height: $input-height !default;
$custom-file-height-inner: $input-height-inner !default;
$custom-file-focus-border-color: $input-focus-border-color !default;
$custom-file-focus-box-shadow: $input-focus-box-shadow !default;
$custom-file-disabled-bg: $input-disabled-bg !default;
Expand All @@ -641,9 +640,6 @@ $custom-file-border-radius: $input-border-radius !default;
$custom-file-box-shadow: $input-box-shadow !default;
$custom-file-button-color: $custom-file-color !default;
$custom-file-button-bg: $input-group-addon-bg !default;
$custom-file-text: (
en: "Browse"
) !default;


// Form validation
Expand Down
1 change: 0 additions & 1 deletion scss/bootstrap-grid.scss
View file
Expand Up @@ -7,7 +7,6 @@

html {
box-sizing: border-box;
-ms-overflow-style: scrollbar;
}

*,
Expand Down
44 changes: 15 additions & 29 deletions site/content/docs/4.3/components/forms.md
View file
Expand Up @@ -1011,7 +1011,10 @@ Validation styles are available for the following form controls and components:

<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedCustomFile" required>
<label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
<label class="custom-file-label" for="validatedCustomFile">
<span class="custom-file-text">Choose file...</span>
<span class="custom-file-button">Browse</span>
</label>
<div class="invalid-feedback">Example invalid custom file feedback</div>
</div>
</form>
Expand Down Expand Up @@ -1293,41 +1296,24 @@ The file input is the most gnarly of the bunch and requires additional JavaScrip
{{< example >}}
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
<label class="custom-file-label" for="customFile">
<span class="custom-file-text">Choose file...</span>
<span class="custom-file-button">Browse</span>
</label>
</div>
{{< /example >}}

We hide the default file `<input>` via `opacity` and instead style the `<label>`. The button is generated and positioned with `::after`. Lastly, we declare a `width` and `height` on the `<input>` for proper spacing for surrounding content.

#### Translating or customizing the strings with SCSS

The [`:lang()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:lang) is used to allow for translation of the "Browse" text into other languages. Override or add entries to the `$custom-file-text` Sass variable with the relevant [language tag](https://en.wikipedia.org/wiki/IETF_language_tag) and localized strings. The English strings can be customized the same way. For example, here's how one might add a Spanish translation (Spanish's language code is `es`):

{{< highlight scss >}}
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
{{< /highlight >}}

Here's `lang(es)` in action on the custom file input for a Spanish translation:
Longer placeholder text is truncated and an ellipsis is added when there's not enough space.

{{< example >}}
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLang" lang="es">
<label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
<input type="file" class="custom-file-input" id="customFileLong">
<label class="custom-file-label" for="customFileLong">
<span class="custom-file-text">Lorem ipsum posuere consectetur est at lobortis nulla vitae elit libero a pharetra augue fusce dapibus tellus ac cursus commodo tortor mauris condimentum nibh ut fermentum massa justo sit amet risus cras mattis consectetur purus sit amet fermentum</span>
<span class="custom-file-button">Browse</span>
</label>
</div>
{{< /example >}}

You'll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using [the `lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) on the `<html>` element or the [`Content-Language` HTTP header](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12), among other methods.

#### Translating or customizing the strings with HTML

Bootstrap also provides a way to translate the "Browse" text in HTML with the `data-browse` attribute which can be added to the custom input label (example in Dutch):

{{< example >}}
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLangHTML">
<label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>
{{< /example >}}
We hide the default file `<input>` via `opacity` and instead style the `<label>`. The button is generated and positioned with `::after`. Lastly, we declare a `width` and `height` on the `<input>` for proper spacing for surrounding content.
20 changes: 16 additions & 4 deletions site/content/docs/4.3/components/input-group.md
View file
Expand Up @@ -322,14 +322,20 @@ Input groups include support for custom selects and custom file inputs. Browser
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
<label class="custom-file-label" for="inputGroupFile01">
<span class="custom-file-text">Choose file...</span>
<span class="custom-file-button">Browse</span>
</label>
</div>
</div>

<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02">
<label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label>
<label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">
<span class="custom-file-text">Choose file...</span>
<span class="custom-file-button">Browse</span>
</label>
</div>
<div class="input-group-append">
<span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
Expand All @@ -342,14 +348,20 @@ Input groups include support for custom selects and custom file inputs. Browser
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
<label class="custom-file-label" for="inputGroupFile03">Choose file</label>
<label class="custom-file-label" for="inputGroupFile03">
<span class="custom-file-text">Choose file...</span>
<span class="custom-file-button">Browse</span>
</label>
</div>
</div>

<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
<label class="custom-file-label" for="inputGroupFile04">
<span class="custom-file-text">Choose file...</span>
<span class="custom-file-button">Browse</span>
</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
Expand Down
4 changes: 2 additions & 2 deletions site/layouts/partials/docs-navbar.html
View file
Expand Up @@ -26,12 +26,12 @@
</ul>
</div>

<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<ul class="navbar-nav ml-md-auto">
<li class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-expanded="false">
v{{ .Site.Params.docs_version }}
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
<a class="dropdown-item active" href="/docs/{{ .Site.Params.docs_version }}/">Latest (4.3.x)</a>
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
Expand Down

0 comments on commit 7f3e467

Please sign in to comment.