diff --git a/site/content/docs/5.3/components/progress.md b/site/content/docs/5.3/components/progress.md index c441f13c85c2..ea9e3d2d2779 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.