Add non-clickable filter tag

cfpb · Nov 21, 2024 · b0b50c1 · b0b50c1
1 parent a128164
commit b0b50c1
Show file tree

Hide file tree

Showing 14 changed files with 38 additions and 29 deletions.
diff --git a/docs/pages/tags.md b/docs/pages/tags.md
@@ -133,6 +133,13 @@ variation_groups:
               </a>
             </li>
           </ul>
+      - variation_is_deprecated: false
+        variation_name: Non-clickable filter tag
+        variation_description: There can be elements that have the appearance of a filter tag, but are not clickable. This is used like an inline notification.
+        variation_code_snippet: >-
+          <div class="a-tag-filter">
+            Option 1
+          </div>
     variation_group_name: Types
 behavior: To clear a filter tag selection, click the “x” icon inside of the filter tag.
 related_items: >-

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
@@ -16,6 +16,21 @@
   text-align: left;
   min-width: fit-content;
 
+  .cf-icon-svg {
+    pointer-events: none;
+
+    // Prevent flexbox from squishing icon when tag text is long.
+    flex: none;
+  }
+
+  // If the contents are wrapped in a label, negate the label's display.
+  > label {
+    display: contents;
+    pointer-events: none;
+  }
+}
+
+button.a-tag-filter {
   &:hover {
     background-color: var(--teal-40);
     cursor: pointer;
@@ -29,19 +44,6 @@
   &:active {
     background-color: var(--teal);
   }
-
-  .cf-icon-svg {
-    pointer-events: none;
-
-    // Prevent flexbox from squishing icon when tag text is long.
-    flex: none;
-  }
-
-  // If the contents are wrapped in a label, negate the label's display.
-  > label {
-    display: contents;
-    pointer-events: none;
-  }
 }
 
 a.a-tag-filter {