Merge pull request #2120 from cfpb/ans_filter_tag_height

Add filter tag anchor markup example
cfpb · Nov 19, 2024 · 0c9acd2 · 0c9acd2
2 parents 9575591 + 195cf5c
commit 0c9acd2
Show file tree

Hide file tree

Showing 14 changed files with 37 additions and 17 deletions.
diff --git a/docs/pages/tags.md b/docs/pages/tags.md
@@ -119,6 +119,19 @@ variation_groups:
                 </svg>
               </button>
             </li>
+            <li>
+              <a href="#" class="a-tag-filter">
+                A filter tag using an anchor element
+                <svg
+                xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg
+                cf-icon-svg__error" viewBox="0 0 12 19"><path d="M11.383 13.644A1.03
+                1.03 0 0 1 9.928 15.1L6 11.172 2.072 15.1a1.03 1.03 0 1
+                1-1.455-1.456l3.928-3.928L.617 5.79a1.03 1.03 0 1 1 1.455-1.456L6
+                8.261l3.928-3.928a1.03 1.03 0 0 1 1.455 1.456L7.455
+                9.716z"></path>
+                </svg>
+              </a>
+            </li>
           </ul>
     variation_group_name: Types
 behavior: To clear a filter tag selection, click the “x” icon inside of the filter tag.

diff --git a/packages/cfpb-design-system/dist/components/cfpb-expandables/index.css b/packages/cfpb-design-system/dist/components/cfpb-expandables/index.css
diff --git a/packages/cfpb-design-system/dist/components/cfpb-expandables/index.css.map b/packages/cfpb-design-system/dist/components/cfpb-expandables/index.css.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-expandables/index.js.map b/packages/cfpb-design-system/dist/components/cfpb-expandables/index.js.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-forms/index.css b/packages/cfpb-design-system/dist/components/cfpb-forms/index.css
diff --git a/packages/cfpb-design-system/dist/components/cfpb-forms/index.css.map b/packages/cfpb-design-system/dist/components/cfpb-forms/index.css.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-forms/index.js.map b/packages/cfpb-design-system/dist/components/cfpb-forms/index.js.map
diff --git a/packages/cfpb-design-system/dist/index.css b/packages/cfpb-design-system/dist/index.css
diff --git a/packages/cfpb-design-system/dist/index.css.map b/packages/cfpb-design-system/dist/index.css.map
diff --git a/packages/cfpb-design-system/dist/index.js.map b/packages/cfpb-design-system/dist/index.js.map
diff --git a/packages/cfpb-design-system/dist/utilities/index.css b/packages/cfpb-design-system/dist/utilities/index.css
diff --git a/packages/cfpb-design-system/dist/utilities/index.css.map b/packages/cfpb-design-system/dist/utilities/index.css.map
diff --git a/packages/cfpb-design-system/dist/utilities/index.js.map b/packages/cfpb-design-system/dist/utilities/index.js.map
diff --git a/packages/cfpb-design-system/src/components/cfpb-forms/tag.scss b/packages/cfpb-design-system/src/components/cfpb-forms/tag.scss
@@ -45,13 +45,20 @@
 }
 
 a.a-tag-filter {
+  line-height: normal;
+
   // Colors for :link, :visited, :hover, :focus, :active.
   @include u-link-colors(
     var(--black),
     var(--black),
     var(--black),
     var(--black),
-    var(--black)
+    var(--black),
+    var(--teal),
+    var(--teal),
+    var(--teal),
+    var(--teal),
+    var(--teal)
   );
 }