From 45cd887f3b92c66b2ccac7d61f41a5049a4d265e Mon Sep 17 00:00:00 2001 From: Petr Skoda Date: Fri, 17 Feb 2023 13:05:17 +0100 Subject: [PATCH] MDL-77603 tool_componentlibrary: import Bootstrap v4.6.2 --- admin/tool/componentlibrary/config.yml | 4 +- .../bootstrap/components/breadcrumb.md | 2 +- .../bootstrap/components/button-group.md | 20 +-- .../content/bootstrap/components/buttons.md | 20 +-- .../content/bootstrap/components/card.md | 4 +- .../content/bootstrap/components/carousel.md | 54 ++++---- .../content/bootstrap/components/collapse.md | 25 +++- .../content/bootstrap/components/dropdowns.md | 106 +++++++-------- .../bootstrap/components/input-group.md | 8 +- .../bootstrap/components/list-group.md | 2 +- .../content/bootstrap/components/navbar.md | 28 ++-- .../content/bootstrap/components/navs.md | 126 +++++++++--------- .../bootstrap/components/pagination.md | 6 +- .../content/bootstrap/components/popovers.md | 6 +- .../content/bootstrap/components/scrollspy.md | 4 +- .../content/bootstrap/components/toasts.md | 10 +- .../content/bootstrap/components/tooltips.md | 6 +- .../content/bootstrap/content/images.md | 2 +- .../content/bootstrap/content/reboot.md | 2 +- .../content/bootstrap/content/typography.md | 4 +- .../content/bootstrap/utilities/flex.md | 1 + .../hugo/site/data/colors.yml | 32 +++-- .../componentlibrary/hugo/site/data/grays.yml | 2 +- .../hugo/site/data/theme-colors.yml | 2 +- .../hugo/site/layouts/partials/header.html | 2 +- .../hugo/site/layouts/shortcodes/callout.html | 3 +- .../hugo/site/layouts/shortcodes/example.html | 27 ++-- .../hugo/site/layouts/shortcodes/param.html | 14 ++ .../site/layouts/shortcodes/placeholder.html | 29 ++-- .../hugo/site/layouts/shortcodes/year.html | 4 +- 30 files changed, 310 insertions(+), 245 deletions(-) create mode 100644 admin/tool/componentlibrary/hugo/site/layouts/shortcodes/param.html diff --git a/admin/tool/componentlibrary/config.yml b/admin/tool/componentlibrary/config.yml index 31b697ae7a4..1ef66f95de8 100644 --- a/admin/tool/componentlibrary/config.yml +++ b/admin/tool/componentlibrary/config.yml @@ -62,8 +62,8 @@ staticDir: "./admin/tool/componentlibrary/content/static" params: moodleroot: "MOODLEROOT" - current_version: "4.6.0" - current_ruby_version: "4.6.0" + current_version: "4.6.2" + current_ruby_version: "4.6.2" docs_version: "4.6" boostrap_docs: "https://getbootstrap.com/docs/4.6" repo: "https://github.com/twbs/bootstrap" diff --git a/admin/tool/componentlibrary/content/bootstrap/components/breadcrumb.md b/admin/tool/componentlibrary/content/bootstrap/components/breadcrumb.md index 9ed198fcd1a..5b25f83d58f 100644 --- a/admin/tool/componentlibrary/content/bootstrap/components/breadcrumb.md +++ b/admin/tool/componentlibrary/content/bootstrap/components/breadcrumb.md @@ -54,4 +54,4 @@ $breadcrumb-divider: none; Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the ` @@ -181,10 +181,10 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele Pricing
  • - -
    +
    Action Another action Something else here @@ -461,10 +461,10 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="max-height: 100 Link
  • - - @@ -510,7 +510,7 @@ With no `.navbar-brand` shown at the smallest breakpoint: Link
  • - Disabled + Disabled
    • @@ -539,7 +539,7 @@ With a brand name shown on the left and toggler on the right: Link
  • - Disabled + Disabled
    • @@ -568,7 +568,7 @@ With a toggler on the left and brand name on the right: Link
  • - Disabled + Disabled
    • diff --git a/admin/tool/componentlibrary/content/bootstrap/components/navs.md b/admin/tool/componentlibrary/content/bootstrap/components/navs.md index 5a1cdcc812b..e6e17f9d68b 100644 --- a/admin/tool/componentlibrary/content/bootstrap/components/navs.md +++ b/admin/tool/componentlibrary/content/bootstrap/components/navs.md @@ -28,7 +28,7 @@ The base `.nav` component does not include any `.active` state. The following ex Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -40,7 +40,7 @@ Classes are used throughout, so your markup can be super flexible. Use ` {{< /example >}} @@ -85,7 +85,7 @@ Right-aligned with `.justify-content-end`: Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -106,7 +106,7 @@ Stack your navigation by changing the flex item direction with the `.flex-column Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -118,7 +118,7 @@ As always, vertical navigation is possible without ` {{< /example >}} @@ -159,7 +159,7 @@ Take that same HTML, but use `.nav-pills` instead: Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -180,7 +180,7 @@ Force your `.nav`'s contents to extend the full available width one of two modif Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -192,7 +192,7 @@ When using a ` {{< /example >}} @@ -210,7 +210,7 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -222,7 +222,7 @@ Similar to the `.nav-fill` example using a ` {{< /example >}} @@ -235,7 +235,7 @@ If you need responsive nav variations, consider using a series of [flexbox utili Active Longer nav link Link - Disabled + Disabled {{< /example >}} @@ -243,7 +243,7 @@ If you need responsive nav variations, consider using a series of [flexbox utili If you're using navs to provide a navigation bar, be sure to add a `role="navigation"` to the most logical parent container of the ` {{< /example >}} @@ -307,20 +307,22 @@ Use the tab JavaScript plugin—include it individually or through the compiled If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}). -Dynamic tabbed interfaces, as described in the [WAI ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). +Dynamic tabbed interfaces, as described in the [ARIA Authoring Practices Guide tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using `
    @@ -339,13 +341,13 @@ Note that dynamic tabbed interfaces should not contain dropdown menus, ```html
    @@ -360,9 +362,9 @@ To help fit your needs, this works with `
      `-based markup, as shown above, or
      @@ -381,9 +383,9 @@ To help fit your needs, this works with `
        `-based markup, as shown above, or ```html
        @@ -398,13 +400,13 @@ The tabs plugin also works with pills.
        @@ -423,13 +425,13 @@ The tabs plugin also works with pills. ```html
        @@ -445,10 +447,10 @@ And with vertical pills.
        @@ -474,10 +476,10 @@ And with vertical pills.
        @@ -499,16 +501,16 @@ You can activate a tab or pill navigation without writing any JavaScript by simp @@ -526,7 +528,7 @@ You can activate a tab or pill navigation without writing any JavaScript by simp Enable tabbable tabs via JavaScript (each tab needs to be activated individually): ```js -$('#myTab a').on('click', function (event) { +$('#myTab button').on('click', function (event) { event.preventDefault() $(this).tab('show') }) @@ -535,10 +537,10 @@ $('#myTab a').on('click', function (event) { You can activate individual tabs in several ways: ```js -$('#myTab a[href="#profile"]').tab('show') // Select tab by name -$('#myTab li:first-child a').tab('show') // Select first tab -$('#myTab li:last-child a').tab('show') // Select last tab -$('#myTab li:nth-child(3) a').tab('show') // Select third tab +$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name +$('#myTab li:first-child button').tab('show') // Select first tab +$('#myTab li:last-child button').tab('show') // Select last tab +$('#myTab li:nth-child(3) button').tab('show') // Select third tab ``` ### Fade effect @@ -562,21 +564,21 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a #### $().tab -Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM. +Activates a tab element and content container. Tab should have either a `data-target` or, if using a link, an `href` attribute targeting a container node in the DOM. ```html @@ -589,7 +591,7 @@ Activates a tab element and content container. Tab should have either a `data-ta ``` @@ -645,7 +647,7 @@ If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events ```js -$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) { +$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) { event.target // newly activated tab event.relatedTarget // previous active tab }) diff --git a/admin/tool/componentlibrary/content/bootstrap/components/pagination.md b/admin/tool/componentlibrary/content/bootstrap/components/pagination.md index 23b474589db..6b959279283 100644 --- a/admin/tool/componentlibrary/content/bootstrap/components/pagination.md +++ b/admin/tool/componentlibrary/content/bootstrap/components/pagination.md @@ -58,7 +58,7 @@ While the `.disabled` class uses `pointer-events: none` to _try_ to disable the