From 0a9d392975d7f77d8a0e10270da7e07aac013614 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= <ffoodd@users.noreply.github.com>
Date: Thu, 11 Feb 2021 18:48:08 +0100
Subject: [PATCH] Docs improvements after beta2 (#33049)
* docs(carousel): double-spaces out there
* docs(toasts): missing word, ins't it?
* docs(cheatsheet): use buttons for carousels and tabs ion cheatsheets too
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
site/content/docs/5.0/components/carousel.md | 24 +++++++++----------
site/content/docs/5.0/components/toasts.md | 2 +-
.../5.0/examples/cheatsheet-rtl/index.html | 20 ++++++++--------
.../docs/5.0/examples/cheatsheet/index.html | 24 +++++++++----------
4 files changed, 35 insertions(+), 35 deletions(-)
diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md
index a73ebb090a..9ad7294ecc 100644
--- a/site/content/docs/5.0/components/carousel.md
+++ b/site/content/docs/5.0/components/carousel.md
@@ -61,11 +61,11 @@ Adding in the previous and next controls. We recommend using `<button>` elements
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
</div>
</div>
- <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
+ <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
- <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
+ <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
@@ -94,11 +94,11 @@ You can also add the indicators to the carousel, alongside the controls, too.
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
</div>
</div>
- <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
+ <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
- <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
+ <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
@@ -139,11 +139,11 @@ Add captions to your slides easily with the `.carousel-caption` element within a
</div>
</div>
</div>
- <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
+ <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
- <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
+ <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
@@ -167,11 +167,11 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
</div>
</div>
- <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
+ <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
- <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
+ <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
@@ -195,11 +195,11 @@ Add `data-bs-interval=""` to a `.carousel-item` to change the amount of time to
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
</div>
</div>
- <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
+ <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
- <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
+ <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
@@ -268,11 +268,11 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap
</div>
</div>
</div>
- <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
+ <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
- <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
+ <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md
index 20aefb249f..57bcd319bb 100644
--- a/site/content/docs/5.0/components/toasts.md
+++ b/site/content/docs/5.0/components/toasts.md
@@ -162,7 +162,7 @@ Alternatively, you can also add additional controls and components to toasts.
### Color schemes
-Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}). Here we've added `.bg-primary` and `.text-white` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
+Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.bg-primary` and `.text-white` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
{{< example class="bg-light" >}}
<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
diff --git a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html b/site/content/docs/5.0/examples/cheatsheet-rtl/index.html
index 1770067688..e124936db6 100644
--- a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html
+++ b/site/content/docs/5.0/examples/cheatsheet-rtl/index.html
@@ -863,9 +863,9 @@ direction: rtl
{{< example show_markup="false" >}}
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
- <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
- <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
- <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
+ <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="الشريحة الأولى"></button>
+ <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="الشريحة الثانية"></button>
+ <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="الشريحة الثالثة"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
@@ -890,14 +890,14 @@ direction: rtl
</div>
</div>
</div>
- <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
+ <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">السابق</span>
- </a>
- <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
+ </button>
+ <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">التالى</span>
- </a>
+ </button>
</div>
{{< /example >}}
</div>
@@ -1167,9 +1167,9 @@ direction: rtl
{{< example show_markup="false" >}}
<nav>
<div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
- <a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">الصفحة الرئيسية</a>
- <a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">الملف الشخصي</a>
- <a class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">اتصل</a>
+ <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">الصفحة الرئيسية</button>
+ <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">الملف الشخصي</button>
+ <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">اتصل</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
diff --git a/site/content/docs/5.0/examples/cheatsheet/index.html b/site/content/docs/5.0/examples/cheatsheet/index.html
index 3941425104..de98178450 100644
--- a/site/content/docs/5.0/examples/cheatsheet/index.html
+++ b/site/content/docs/5.0/examples/cheatsheet/index.html
@@ -858,11 +858,11 @@ body_class: "bg-light"
<div>
{{< example show_markup="false" >}}
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
- <ol class="carousel-indicators">
- <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
- <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
- <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
- </ol>
+ <div class="carousel-indicators">
+ <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+ <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
+ <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
+ </div>
<div class="carousel-inner">
<div class="carousel-item active">
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
@@ -886,14 +886,14 @@ body_class: "bg-light"
</div>
</div>
</div>
- <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
+ <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
- </a>
- <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
+ </button>
+ <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
- </a>
+ </button>
</div>
{{< /example >}}
</div>
@@ -1163,9 +1163,9 @@ body_class: "bg-light"
{{< example show_markup="false" >}}
<nav>
<div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
- <a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
- <a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
- <a class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
+ <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
+ <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
+ <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">