From a51aaeec6c9eb2bc51a4c6b62f964d11694cbdcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 3 Apr 2025 07:36:04 +0200 Subject: [PATCH 01/17] Docs: improve progress bar labels markup and explanations for accessibility (#39364) * Docs: improve progress bar labels markup and explanations for accessibility * Update site/content/docs/5.3/components/progress.md --------- Co-authored-by: Mark Otto --- site/content/docs/5.3/components/progress.md | 34 ++++++++------------ 1 file changed, 14 insertions(+), 20 deletions(-) diff --git a/site/content/docs/5.3/components/progress.md b/site/content/docs/5.3/components/progress.md index 73f1315897..caa5d09fdd 100644 --- a/site/content/docs/5.3/components/progress.md +++ b/site/content/docs/5.3/components/progress.md @@ -75,13 +75,15 @@ Add labels to your progress bars by placing text within the `.progress-bar`. {{< /example >}} -Note that by default, the content inside the `.progress-bar` is controlled with `overflow: hidden`, so it doesn't bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use `.overflow-visible` from the [overflow utilities]({{< docsref "/utilities/overflow" >}}), but make sure to also define an explicit [text color]({{< docsref "/utilities/colors#colors" >}}) so the text remains readable. Be aware though that currently this approach does not take into account [color modes]({{< docsref "/customize/color-modes" >}}). +### Long labels -{{< example >}} -
-
Long label text for the progress bar, set to a dark color
-
-{{< /example >}} +Note that by default, the content inside the `.progress-bar` is controlled with `overflow: hidden`, so it doesn't bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use `.overflow-visible` from the [overflow utilities]({{< docsref "/utilities/overflow" >}}). + +{{< callout warning >}} +Labels longer than the progress bar within may not be fully accessible using this method because it relies on the text color having the correct contrast ratio with both the `.progress` and `.progress-bar` background colors. Use caution when implementing this example. + +If the text can overlap the progress bar, we often recommend displaying the label outside of the progress bar for better accessibility. +{{< /callout >}} ## Backgrounds @@ -106,29 +108,21 @@ Use background utility classes to change the appearance of individual progress b {{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} -If you're adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]({{< docsref "/utilities/colors#colors" >}}), so the labels remain readable and have sufficient contrast. +If you're adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]({{< docsref "/utilities/colors#colors" >}}), so the labels remain readable and have sufficient contrast. We recommend using the [color and background]({{< docsref "/helpers/color-background" >}}) helper classes. {{< example >}}
-
25%
+
25%
-
50%
+
50%
-
-
75%
-
-
-
100%
-
-{{< /example >}} - -Alternatively, you can use the new combined [color and background]({{< docsref "/helpers/color-background" >}}) helper classes. - -{{< example >}}
75%
+
+
100%
+
{{< /example >}} ## Multiple bars From 5f6085a3a08f8d36cca20f9be0c825d7a53352ec Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 2 Apr 2025 22:32:44 -0700 Subject: [PATCH 02/17] Split CSS properties here to avoid a bug where 0-ing the padding values causes invalid calc() functions Fixes #39798, fixes #39370, closes #39873, undoes changes in #39373 --- scss/_modal.scss | 6 +++++- scss/_offcanvas.scss | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/scss/_modal.scss b/scss/_modal.scss index ee58032ee8..a3492c1723 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -132,7 +132,11 @@ .btn-close { padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5); - margin: calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto; + // Split properties to avoid invalid calc() function if value is 0 + margin-top: calc(-.5 * var(--#{$prefix}modal-header-padding-y)); + margin-right: calc(-.5 * var(--#{$prefix}modal-header-padding-x)); + margin-bottom: calc(-.5 * var(--#{$prefix}modal-header-padding-y)); + margin-left: auto; } } diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss index eb2c97ab77..b40b2cd9b7 100644 --- a/scss/_offcanvas.scss +++ b/scss/_offcanvas.scss @@ -127,7 +127,11 @@ .btn-close { padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5); - margin: calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) calc(-.5 * var(--#{$prefix}offcanvas-padding-x)) calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) auto; + // Split properties to avoid invalid calc() function if value is 0 + margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y)); + margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x)); + margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y)); + margin-left: auto; } } From 77699f30db3864eb1977e8a6c3dde46521e865e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 19 Mar 2024 07:02:02 +0100 Subject: [PATCH 03/17] Docs: fix StackBlitz icon link examples --- site/content/docs/5.3/helpers/icon-link.md | 25 ++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/site/content/docs/5.3/helpers/icon-link.md b/site/content/docs/5.3/helpers/icon-link.md index 1e5cc8b127..1ee2aa6722 100644 --- a/site/content/docs/5.3/helpers/icon-link.md +++ b/site/content/docs/5.3/helpers/icon-link.md @@ -22,7 +22,9 @@ Take a regular `` element, add `.icon-link`, and insert an icon on either the {{< example >}} - + Icon link {{< /example >}} @@ -30,7 +32,9 @@ Take a regular `` element, add `.icon-link`, and insert an icon on either the {{< example >}} Icon link - + {{< /example >}} @@ -41,7 +45,9 @@ Add `.icon-link-hover` to move the icon to the right on hover. {{< example >}} Icon link - + {{< /example >}} @@ -57,7 +63,10 @@ Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS {{< example >}} - + Icon link {{< /example >}} @@ -67,7 +76,9 @@ Customize the color by overriding the `--bs-link-*` CSS variable: {{< example >}} Icon link - + {{< /example >}} @@ -84,6 +95,8 @@ Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/ {{< example >}} Icon link - + {{< /example >}} From 49a5ccfd4f4b27496e953d3e8e52a7d994197b59 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Thu, 3 Apr 2025 07:47:45 +0200 Subject: [PATCH 04/17] Docs: From Twitter to X (#40706) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * From Twitter to X * . * Use Bootstrap Icons * Set X card to use `twitter` again * Update `tests/unit/popover.spec.js` --------- Co-authored-by: Julien Déramond --- README.md | 6 ++-- hugo.yml | 2 +- js/tests/unit/popover.spec.js | 32 +++++++++---------- js/tests/visual/tooltip.html | 2 +- site/content/docs/5.3/about/overview.md | 4 +-- site/content/docs/5.3/content/tables.md | 20 ++++++------ .../docs/5.3/examples/album/index.html | 2 +- .../docs/5.3/examples/blog-rtl/index.html | 4 +-- .../content/docs/5.3/examples/blog/index.html | 4 +-- .../5.3/examples/cheatsheet-rtl/index.html | 6 ++-- .../docs/5.3/examples/cheatsheet/index.html | 6 ++-- .../docs/5.3/examples/cover/index.html | 2 +- .../docs/5.3/examples/footers/index.html | 8 ++--- .../docs/5.3/examples/modals/index.html | 8 ++--- .../docs/5.3/getting-started/introduction.md | 2 +- site/layouts/partials/docs-navbar.html | 6 ++-- site/layouts/partials/icons/twitter.svg | 1 - site/layouts/partials/icons/x.svg | 1 + site/layouts/partials/social.html | 4 +-- site/layouts/partials/table-content.html | 2 +- 20 files changed, 61 insertions(+), 61 deletions(-) delete mode 100644 site/layouts/partials/icons/twitter.svg create mode 100644 site/layouts/partials/icons/x.svg diff --git a/README.md b/README.md index 4873770b21..f957b1809b 100644 --- a/README.md +++ b/README.md @@ -174,7 +174,7 @@ Editor preferences are available in the [editor config](https://github.com/twbs/ Get updates on Bootstrap's development and chat with the project maintainers and community members. -- Follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap). +- Follow [@getbootstrap on X](https://x.com/getbootstrap). - Read and subscribe to [The Official Bootstrap Blog](https://blog.getbootstrap.com/). - Ask questions and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions). - Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://www.reddit.com/r/bootstrap/). @@ -194,12 +194,12 @@ See [the Releases section of our GitHub project](https://github.com/twbs/bootstr **Mark Otto** -- +- - **Jacob Thornton** -- +- - diff --git a/hugo.yml b/hugo.yml index 1ff261b042..9db4141834 100644 --- a/hugo.yml +++ b/hugo.yml @@ -63,7 +63,7 @@ params: rfs_version: "v10.0.0" github_org: "https://github.com/twbs" repo: "https://github.com/twbs/bootstrap" - twitter: "getbootstrap" + x: "getbootstrap" opencollective: "https://opencollective.com/bootstrap" blog: "https://blog.getbootstrap.com/" themes: "https://themes.getbootstrap.com/" diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js index 1c81ba7927..da5821e760 100644 --- a/js/tests/unit/popover.spec.js +++ b/js/tests/unit/popover.spec.js @@ -58,7 +58,7 @@ describe('Popover', () => { describe('show', () => { it('should toggle a popover after show', () => { return new Promise(resolve => { - fixtureEl.innerHTML = 'BS twitter' + fixtureEl.innerHTML = 'BS X' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl) @@ -78,7 +78,7 @@ describe('Popover', () => { it('should show a popover', () => { return new Promise(resolve => { - fixtureEl.innerHTML = 'BS twitter' + fixtureEl.innerHTML = 'BS X' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl) @@ -94,7 +94,7 @@ describe('Popover', () => { it('should set title and content from functions', () => { return new Promise(resolve => { - fixtureEl.innerHTML = 'BS twitter' + fixtureEl.innerHTML = 'BS X' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl, { @@ -117,7 +117,7 @@ describe('Popover', () => { it('should call content and title functions with trigger element', () => { return new Promise(resolve => { - fixtureEl.innerHTML = 'BS twitter' + fixtureEl.innerHTML = 'BS X' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl, { @@ -144,7 +144,7 @@ describe('Popover', () => { it('should call content and title functions with correct this value', () => { return new Promise(resolve => { - fixtureEl.innerHTML = 'BS twitter' + fixtureEl.innerHTML = 'BS X' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl, { @@ -247,7 +247,7 @@ describe('Popover', () => { }) it('"setContent" should keep the initial template', () => { - fixtureEl.innerHTML = 'BS twitter' + fixtureEl.innerHTML = 'BS X' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl) @@ -264,7 +264,7 @@ describe('Popover', () => { it('should call setContent once', () => { return new Promise(resolve => { - fixtureEl.innerHTML = 'BS twitter' + fixtureEl.innerHTML = 'BS X' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl, { @@ -298,7 +298,7 @@ describe('Popover', () => { it('should show a popover with provided custom class', () => { return new Promise(resolve => { - fixtureEl.innerHTML = 'BS twitter' + fixtureEl.innerHTML = 'BS X' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl) @@ -318,7 +318,7 @@ describe('Popover', () => { describe('hide', () => { it('should hide a popover', () => { return new Promise(resolve => { - fixtureEl.innerHTML = 'BS twitter' + fixtureEl.innerHTML = 'BS X' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl) @@ -339,7 +339,7 @@ describe('Popover', () => { describe('jQueryInterface', () => { it('should create a popover', () => { - fixtureEl.innerHTML = 'BS twitter' + fixtureEl.innerHTML = 'BS X' const popoverEl = fixtureEl.querySelector('a') @@ -352,7 +352,7 @@ describe('Popover', () => { }) it('should create a popover with a config object', () => { - fixtureEl.innerHTML = 'BS twitter' + fixtureEl.innerHTML = 'BS X' const popoverEl = fixtureEl.querySelector('a') @@ -367,7 +367,7 @@ describe('Popover', () => { }) it('should not re create a popover', () => { - fixtureEl.innerHTML = 'BS twitter' + fixtureEl.innerHTML = 'BS X' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl) @@ -381,7 +381,7 @@ describe('Popover', () => { }) it('should throw error on undefined method', () => { - fixtureEl.innerHTML = 'BS twitter' + fixtureEl.innerHTML = 'BS X' const popoverEl = fixtureEl.querySelector('a') const action = 'undefinedMethod' @@ -395,7 +395,7 @@ describe('Popover', () => { }) it('should should call show method', () => { - fixtureEl.innerHTML = 'BS twitter' + fixtureEl.innerHTML = 'BS X' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl) @@ -413,7 +413,7 @@ describe('Popover', () => { describe('getInstance', () => { it('should return popover instance', () => { - fixtureEl.innerHTML = 'BS twitter' + fixtureEl.innerHTML = 'BS X' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl) @@ -423,7 +423,7 @@ describe('Popover', () => { }) it('should return null when there is no popover instance', () => { - fixtureEl.innerHTML = 'BS twitter' + fixtureEl.innerHTML = 'BS X' const popoverEl = fixtureEl.querySelector('a') diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index 09144b5729..7f21ee93b2 100644 --- a/js/tests/visual/tooltip.html +++ b/js/tests/visual/tooltip.html @@ -20,7 +20,7 @@

Tooltip Bootstrap Visual Test

-

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

+

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin X handle freegan cred raw denim single-origin coffee viral.

diff --git a/site/content/docs/5.3/about/overview.md b/site/content/docs/5.3/about/overview.md index 9a357e2dc2..9802da43f8 100644 --- a/site/content/docs/5.3/about/overview.md +++ b/site/content/docs/5.3/about/overview.md @@ -16,9 +16,9 @@ Bootstrap is maintained by a [small team of developers](https://github.com/orgs/ Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world. -Bootstrap was created at Twitter in mid-2010 by [@mdo](https://twitter.com/mdo) and [@fat](https://twitter.com/fat). Prior to being an open-sourced framework, Bootstrap was known as _Twitter Blueprint_. A few months into development, Twitter held its [first Hack Week](https://blog.twitter.com/engineering/en_us/a/2010/hack-week) and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today. +Bootstrap was created at Twitter in mid-2010 by [@mdo](https://x.com/mdo) and [@fat](https://x.com/fat). Prior to being an open-sourced framework, Bootstrap was known as _Twitter Blueprint_. A few months into development, Twitter held its [first Hack Week](https://blog.x.com/engineering/en_us/a/2010/hack-week) and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today. -Originally [released](https://blog.twitter.com/developer/en_us/a/2011/bootstrap-twitter) on , we've since had over [twenty releases]({{< param repo >}}/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach. +Originally [released](https://blog.x.com/developer/en_us/a/2011/bootstrap-twitter) on , we've since had over [twenty releases]({{< param repo >}}/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach. With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS's flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers. diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md index 3d3583c376..2fe53daeb5 100644 --- a/site/content/docs/5.3/content/tables.md +++ b/site/content/docs/5.3/content/tables.md @@ -142,7 +142,7 @@ Highlight a table row or cell by adding a `.table-active` class. 3 Larry the Bird - @twitter + @x @@ -163,7 +163,7 @@ Highlight a table row or cell by adding a `.table-active` class. 3 Larry the Bird - @twitter + @x @@ -195,7 +195,7 @@ Highlight a table row or cell by adding a `.table-active` class. 3 Larry the Bird - @twitter + @x @@ -216,7 +216,7 @@ Highlight a table row or cell by adding a `.table-active` class. 3 Larry the Bird - @twitter + @x @@ -294,7 +294,7 @@ Add a thicker border, darker between table groups—``, ``, and `< 3 Larry the Bird - @twitter + @x @@ -420,7 +420,7 @@ Border styles, active styles, and table variants are not inherited by nested tab 3 Larry the Bird - @twitter + @x @@ -484,7 +484,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `. 3 Larry the Bird - @twitter + @x @@ -528,7 +528,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `. 3 Larry the Bird - @twitter + @x @@ -574,7 +574,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `. 3 Larry the Bird - @twitter + @x @@ -655,7 +655,7 @@ You can also put the `` on the top of the table with `.caption-top`. 3 Larry the Bird - @twitter + @x diff --git a/site/content/docs/5.3/examples/album/index.html b/site/content/docs/5.3/examples/album/index.html index 54b2c5bde1..1e5377dbf6 100644 --- a/site/content/docs/5.3/examples/album/index.html +++ b/site/content/docs/5.3/examples/album/index.html @@ -14,7 +14,7 @@ title: Album example

Contact

diff --git a/site/content/docs/5.3/examples/blog-rtl/index.html b/site/content/docs/5.3/examples/blog-rtl/index.html index 66cb05f55b..2c25c479f7 100644 --- a/site/content/docs/5.3/examples/blog-rtl/index.html +++ b/site/content/docs/5.3/examples/blog-rtl/index.html @@ -239,7 +239,7 @@ extra_css:

في مكان آخر

  1. GitHub
    2. -
  2. Twitter
    3. +
  3. X
  4. Facebook
@@ -250,7 +250,7 @@ extra_css:
-

تم تصميم نموذج المدونة لـ Bootstrap بواسطة @mdo.

+

تم تصميم نموذج المدونة لـ Bootstrap بواسطة @mdo.

عد إلى الأعلى

diff --git a/site/content/docs/5.3/examples/blog/index.html b/site/content/docs/5.3/examples/blog/index.html index 5bffc40510..97533bcaa9 100644 --- a/site/content/docs/5.3/examples/blog/index.html +++ b/site/content/docs/5.3/examples/blog/index.html @@ -291,7 +291,7 @@ extra_css:

Elsewhere

  1. GitHub
    2. -
  2. Twitter
    3. +
  3. X
  4. Facebook
@@ -302,7 +302,7 @@ extra_css: