From f328d01d3ac0b9868049dce95ac3e6fc749866ec Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sun, 27 Dec 2020 19:00:33 +0000 Subject: [PATCH 1/7] Carousel: use buttons, not links, for prev/next - expand the styles to neutralise border/background - change docs page - add extra unit test to check that links or buttons work as controls - modify visual test to use buttons as well --- js/tests/unit/carousel.spec.js | 38 +++++++++++++--- js/tests/visual/carousel.html | 8 ++-- scss/_carousel.scss | 2 + site/content/docs/5.0/components/carousel.md | 48 ++++++++++---------- 4 files changed, 61 insertions(+), 35 deletions(-) diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js index 0286762fa9a2..3d2a515b1ebc 100644 --- a/js/tests/unit/carousel.spec.js +++ b/js/tests/unit/carousel.spec.js @@ -1156,7 +1156,7 @@ describe('Carousel', () => { expect(Carousel.getInstance(carouselEl)).toBeDefined() }) - it('should create carousel and go to the next slide on click', done => { + it('should create carousel and go to the next slide on click (with real button controls)', done => { fixtureEl.innerHTML = [ '', + '' + ].join('') + + const next = fixtureEl.querySelector('#next') + const item2 = fixtureEl.querySelector('#item2') + + next.click() + + setTimeout(() => { + expect(item2.classList.contains('active')).toEqual(true) + done() + }, 10) + }) + + it('should create carousel and go to the next slide on click (using links as controls)', done => { + fixtureEl.innerHTML = [ + ' + diff --git a/scss/_carousel.scss b/scss/_carousel.scss index d2e42bc10bd8..dd5324583cd9 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -100,6 +100,8 @@ width: $carousel-control-width; color: $carousel-control-color; text-align: center; + background: none; + border: 0; opacity: $carousel-control-opacity; @include transition($carousel-control-transition); diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index afa652945f72..f55e3efffd67 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -61,14 +61,14 @@ Adding in the previous and next controls: {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} - + + {{< /example >}} @@ -94,14 +94,14 @@ 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" >}} - + + {{< /example >}} @@ -139,14 +139,14 @@ Add captions to your slides easily with the `.carousel-caption` element within a - + + {{< /example >}} @@ -167,14 +167,14 @@ 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" >}} - + + {{< /example >}} @@ -195,14 +195,14 @@ 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" >}} - + + {{< /example >}} @@ -240,14 +240,14 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap - + + {{< /example >}} From d753f4a279550c2d4fa83adef8b8163d2074e42b Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 29 Dec 2020 16:27:06 +0000 Subject: [PATCH 2/7] Use buttons for newly-merged extra carousel --- site/content/docs/5.0/components/carousel.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index 551456a3ef18..2e7963e09ce9 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -223,14 +223,14 @@ By default, carousels support swiping left/right on touchscreen devices to move {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} - + + {{< /example >}} From 13eb932bc479aad1925b52ee54fdc640d3b82776 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Thu, 7 Jan 2021 09:54:07 +0000 Subject: [PATCH 3/7] Edit carousel examples - use buttons instead of links for prev/next - remove `role="button"` from links that are actually links --- .../docs/5.0/examples/carousel-rtl/index.html | 20 +++++++++---------- .../docs/5.0/examples/carousel/index.html | 20 +++++++++---------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/site/content/docs/5.0/examples/carousel-rtl/index.html b/site/content/docs/5.0/examples/carousel-rtl/index.html index a446be716e71..a25a0e854a26 100644 --- a/site/content/docs/5.0/examples/carousel-rtl/index.html +++ b/site/content/docs/5.0/examples/carousel-rtl/index.html @@ -49,7 +49,7 @@

عنوان المثال.

نهاية الأوضاع ان أضف, هو مما رجوعهم وقدّموا. أي عدد الدمج نهاية وأكثرها, المسرح الباهضة وبولندا حول و, كل أما سياسة أسابيع. مع حيث قُدُماً الكونجرس, بها و خيار ٢٠٠٤, كلا في مكّن وقام. مع يكن زهاء بالفشل, الجوي الصين الشمال إذ على.

-

سجل اليوم

+

سجل اليوم

@@ -59,7 +59,7 @@

عنوان المثال.

عنوان مثال آخر.

ثم تزامناً الفرنسي الإقتصادية دار. لكل عن الضغوط المتّبعة, أن حتى إختار المدن بالإنزال. عن الشمل بالفشل تلك, بل أراض أوزار بلديهما حول. دون لكون والتي ثم, كُلفة ويعزى استطاعوا أن لمّ. جُل بخطوط واحدة البشريةً.

-

أعرف أكثر

+

أعرف أكثر

@@ -69,19 +69,19 @@

عنوان مثال آخر.

واحد أكثر لقياس جيد.

قررت العصبة إيطاليا وتم أن, عن سكان وقامت الحكومة وفي. كان بـ اوروبا اليابانية, ثمّة بوابة يتعلّق عل بعض. عدم رئيس الآلاف أن حدى.

-

تصفح المعرض

+

تصفح المعرض

- + + @@ -97,19 +97,19 @@

واحد أكثر لقياس جيد.

{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}

عنوان

ان وتم عجّل الأجل, قبل نتيجة المشترك بـ, أي جعل جورج أوزار المسرح. أن وإعلان الساحل تلك, مكن ان استبدال الباهضة التكاليف. الى ماذا اليميني الحكومة في, إجلاء نتيجة قبل تم. مساعدة بولندا، أي هذه الحكم.

-

عرض التفاصيل

+

عرض التفاصيل

{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}

عنوان

هو أخر إتفاقية الدولارات الأوروبيّون, ثانية طوكيو و به،, ونتج أعمال مما أم. عن الا يونيو أفريقيا, السيطرة التقليدي ومن ٣٠. هو الغالي الإتفاقية ويكيبيديا، مكن, و الى هُزم اعتداء وايرلندا. وقبل بمباركة الأوروبيّون عن فقد, بتحدّي والفلبين ما كلا.

-

عرض التفاصيل

+

عرض التفاصيل

{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}

عنوان

غير عن الثقيل وسمّيت الأوضاع, لم تاريخ بالحرب للسيطرة حين, دار اللا تطوير تم. الى بشرية اليابان في. أما الشهيرة الإثنان وايرلندا ما, لإعلان واشتدّت و مدن. في غير والحزب للسيطرة الإكتفاء. ثانية الكونجرس الا من, جُل ٣٠ وبداية الشرقية.

-

عرض التفاصيل

+

عرض التفاصيل

diff --git a/site/content/docs/5.0/examples/carousel/index.html b/site/content/docs/5.0/examples/carousel/index.html index 42effad08fc5..74aa0e7bda12 100644 --- a/site/content/docs/5.0/examples/carousel/index.html +++ b/site/content/docs/5.0/examples/carousel/index.html @@ -48,7 +48,7 @@

Example headline.

Some representative placeholder content for the first slide of the carousel.

-

Sign up today

+

Sign up today

@@ -58,7 +58,7 @@

Example headline.

Another example headline.

Some representative placeholder content for the second slide of the carousel.

-

Learn more

+

Learn more

@@ -68,19 +68,19 @@

Another example headline.

One more for good measure.

Some representative placeholder content for the third slide of this carousel.

-

Browse gallery

+

Browse gallery

- + + @@ -96,19 +96,19 @@

One more for good measure.

{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}

Heading

Some representative placeholder content for the three columns of text below the carousel. This is the first column.

-

View details »

+

View details »

{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}

Heading

Another exciting bit of representative placeholder content. This time, we've moved on to the second column.

-

View details »

+

View details »

{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}

Heading

And lastly this, the third column of representative placeholder content.

-

View details »

+

View details »

From c72d23b8b7a2294edef76edf2a49baa974749556 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Thu, 7 Jan 2021 10:22:28 +0000 Subject: [PATCH 4/7] Clarify that controls can be button or link also adds code ticks to `id` --- site/content/docs/5.0/components/carousel.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index 2e7963e09ce9..d6cb4ad0dd1d 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -22,7 +22,7 @@ Please be aware that nested carousels are not supported, and carousels are gener Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit. -**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-bs-target` attribute (or `href` for links) that matches the id of the `.carousel` element. +**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique `id` on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-bs-target` attribute (or `href` for links) that matches the `id` of the `.carousel` element. ### Slides only @@ -46,7 +46,7 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w- ### With controls -Adding in the previous and next controls: +Adding in the previous and next controls. We recommend using `