@cfpb/cfpb-design-system 3.4.6 → 3.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfpb/cfpb-design-system",
-  "version": "3.4.6",
+  "version": "3.4.7",
   "description": "CFPB's UI framework",
   "main": "src/index.js",
   "author": {

package/src/components/cfpb-buttons/button-group.scss

@@ -6,4 +6,5 @@
   gap: math.div(10px, $base-font-size-px) + rem;
   flex-wrap: wrap;
   align-items: center;
+  width: fit-content;
 }

package/src/components/cfpb-buttons/button-link.scss

@@ -36,6 +36,7 @@ $a: Link active color.
       text-decoration-style: solid;
       background-color: transparent;
       outline: 1px dotted $f;
+      color: $f;
     }
 
     &:active,
@@ -49,10 +50,8 @@ $a: Link active color.
 }
 
 .a-btn--link {
-  padding: 0;
-
   // Padding added so the focus rectangle falls below the underline.
-  padding-bottom: 1.5px;
+  padding: 1.5px 0;
   border-radius: 0;
   text-decoration-line: underline;
   text-decoration-thickness: 1px;

package/src/components/cfpb-buttons/button.scss

@@ -39,6 +39,7 @@ input.a-btn::-moz-focus-inner {
   text-decoration: none;
   transition: background-color 0.1s;
   width: fit-content;
+  height: fit-content;
   justify-content: center;
 
   &,
@@ -168,19 +169,6 @@ input.a-btn::-moz-focus-inner {
     }
   }
 
-  &--secondary:has(svg)::before {
-    border-color: $btn-secondary-divider;
-  }
-
-  &--warning:has(svg)::before {
-    border-color: $btn-warning-divider;
-  }
-
-  &--disabled:has(svg)::before,
-  &[disabled]:has(svg)::before {
-    border-color: $btn-disabled-divider;
-  }
-
   // Set either the text or icon as the last item in the button.
   &:has(svg + span) {
     span {
@@ -195,10 +183,25 @@ input.a-btn::-moz-focus-inner {
   }
 
   // Handle button with icon divider logic.
-  &:not(.a-btn--hide-icon):has(svg)::before {
+  &:not(.a-btn--hide-icon):has(svg + span)::before,
+  &:not(.a-btn--hide-icon):has(span + svg)::before {
     @include u-btn-divider;
   }
 
+  // Handle different coloring in divider.
+  &--secondary:has(svg)::before {
+    border-color: $btn-secondary-divider !important;
+  }
+
+  &--warning:has(svg)::before {
+    border-color: $btn-warning-divider !important;
+  }
+
+  &--disabled:has(svg)::before,
+  &[disabled]:has(svg)::before {
+    border-color: $btn-disabled-divider !important;
+  }
+
   // Hide the icon if the a-btn--hide-icon modifier is set.
   // Useful for showing and hiding a loading icon, for example.
   &--hide-icon {