From cfd3560c6df1decc0d203041c1218d9ca2547a67 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 21 Jan 2023 17:34:09 +0000 Subject: [PATCH] Docs: add overflow and text color info to progress bar page (#37921) * Docs: add overflow and text color info to progress bar page * Add example/reference for color & background helper use * Add mention of color modes/dark mode * Tweak link text --- site/content/docs/5.3/components/progress.md | 33 ++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/site/content/docs/5.3/components/progress.md b/site/content/docs/5.3/components/progress.md index c441f13c85..ea9e3d2d27 100644 --- a/site/content/docs/5.3/components/progress.md +++ b/site/content/docs/5.3/components/progress.md @@ -75,6 +75,14 @@ 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" >}}). + +{{< example >}} +
+
Long label text for the progress bar, set to a dark color
+
+{{< /example >}} + ## Backgrounds Use background utility classes to change the appearance of individual progress bars. @@ -98,6 +106,31 @@ 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. + +{{< example >}} +
+
25%
+
+
+
50%
+
+
+
75%
+
+
+
100%
+
+{{< /example >}} + +Alternatively, you can use the new combined [color and background]({{< docsref "/helpers/color-background" >}}) helper classes. + +{{< example >}} +
+
75%
+
+{{< /example >}} + ## Multiple bars You can include multiple progress components inside a container with `.progress-stacked` to create a single stacked progress bar. Note that in this case, the styling to set the visual width of the progress bar *must* be applied to the `.progress` elements, rather than the `.progress-bar`s.