diff --git a/redirects.yaml b/redirects.yaml index 6c96ee8f28..3559a3972c 100644 --- a/redirects.yaml +++ b/redirects.yaml @@ -54,3 +54,4 @@ /docs/utilities/visualise-font-metrics: /docs/utilities/font-metrics /docs/utilities/no-margin: /docs/utilities/margin-collapse /docs/utilities/no-padding: /docs/utilities/margin-collapse +/docs/examples/patterns/chip/dark: /docs/examples/patterns/chip/default?theme=dark diff --git a/templates/docs/examples/patterns/chip/combined.html b/templates/docs/examples/patterns/chip/combined.html new file mode 100644 index 0000000000..bddcd28f39 --- /dev/null +++ b/templates/docs/examples/patterns/chip/combined.html @@ -0,0 +1,16 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Chip / Combined{% endblock %} + +{% block standalone_css %}patterns_chip{% endblock %} + +{% block content %} +{% with is_combined = true %} +
{% include 'docs/examples/patterns/chip/colors.html' %}
+
{% include 'docs/examples/patterns/chip/default.html' %}
+
{% include 'docs/examples/patterns/chip/dense.html' %}
+
{% include 'docs/examples/patterns/chip/inline.html' %}
+
{% include 'docs/examples/patterns/chip/long-values.html' %}
+
{% include 'docs/examples/patterns/chip/variants.html' %}
+
{% include 'docs/examples/patterns/chip/with-dismiss.html' %}
+{% endwith %} +{% endblock %} diff --git a/templates/docs/examples/patterns/chip/dark.html b/templates/docs/examples/patterns/chip/dark.html deleted file mode 100644 index 7b2f88c394..0000000000 --- a/templates/docs/examples/patterns/chip/dark.html +++ /dev/null @@ -1,31 +0,0 @@ -{% extends "_layouts/examples.html" %} -{% block title %}Chip / Dark{% endblock %} - -{% block standalone_css %}patterns_chip{% endblock %} - -{% set is_dark = true %} -{% block content %} -
- - - - - - Type - Information - - -
-{% endblock %} diff --git a/templates/docs/patterns/chip/index.md b/templates/docs/patterns/chip/index.md index 140b0f0bd0..fc50c92dd5 100644 --- a/templates/docs/patterns/chip/index.md +++ b/templates/docs/patterns/chip/index.md @@ -44,11 +44,9 @@ View example of the inline chip pattern ## Dark chips -To use chips on a dark background the `is-dark` class can be applied. If the chip includes the dismiss icon, you'll need to add the `is-light` class to the icon. To ensure the dark chips are accessible, the background colour used must `#2b2b2b` or darker: +To use chips on a dark background the `is-dark` class can be applied. If the chip includes the dismiss icon, you'll need to add the `is-light` class to the icon. To ensure the dark chips are accessible, the background colour used must `#2b2b2b` or darker. -
-View example of the dark chip pattern -
+[See an example of chips on dark background](/docs/examples/patterns/chip/default?theme=dark) ## Import