@cfpb/cfpb-design-system 3.6.3 → 3.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/CHANGELOG.md +23 -8
  2. package/dist/components/cfpb-buttons/index.css +1 -1
  3. package/dist/components/cfpb-buttons/index.css.map +2 -2
  4. package/dist/components/cfpb-buttons/index.js +1 -1
  5. package/dist/components/cfpb-buttons/index.js.map +1 -1
  6. package/dist/components/cfpb-expandables/index.css +1 -1
  7. package/dist/components/cfpb-expandables/index.css.map +2 -2
  8. package/dist/components/cfpb-expandables/index.js +1 -1
  9. package/dist/components/cfpb-expandables/index.js.map +1 -1
  10. package/dist/components/cfpb-forms/index.css +1 -1
  11. package/dist/components/cfpb-forms/index.css.map +2 -2
  12. package/dist/components/cfpb-forms/index.js +1 -1
  13. package/dist/components/cfpb-forms/index.js.map +1 -1
  14. package/dist/components/cfpb-notifications/index.css +1 -1
  15. package/dist/components/cfpb-notifications/index.css.map +2 -2
  16. package/dist/components/cfpb-notifications/index.js.map +1 -1
  17. package/dist/components/cfpb-tooltips/index.css +1 -1
  18. package/dist/components/cfpb-tooltips/index.css.map +2 -2
  19. package/dist/components/cfpb-tooltips/index.js.map +1 -1
  20. package/dist/components/cfpb-typography/index.css +1 -1
  21. package/dist/components/cfpb-typography/index.css.map +2 -2
  22. package/dist/components/cfpb-typography/index.js.map +1 -1
  23. package/dist/index.css +1 -1
  24. package/dist/index.css.map +2 -2
  25. package/dist/index.js +1 -1
  26. package/dist/index.js.map +1 -1
  27. package/dist/utilities/index.css +1 -1
  28. package/dist/utilities/index.css.map +2 -2
  29. package/dist/utilities/index.js +1 -1
  30. package/dist/utilities/index.js.map +1 -1
  31. package/package.json +1 -1
  32. package/src/components/cfpb-buttons/button-group.scss +1 -1
  33. package/src/components/cfpb-buttons/button-link.scss +2 -7
  34. package/src/components/cfpb-buttons/button.scss +11 -3
  35. package/src/components/cfpb-buttons/vars.scss +8 -5
  36. package/src/components/cfpb-notifications/notification.scss +4 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cfpb/cfpb-design-system",
3
- "version": "3.6.3",
3
+ "version": "3.7.0",
4
4
  "description": "CFPB's UI framework",
5
5
  "exports": {
6
6
  ".": "./src/index.js",
package/src/components/cfpb-buttons/button-group.scss CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  .m-btn-group {
5
5
  display: flex;
6
- gap: math.div(10px, $base-font-size-px) + rem;
6
+ gap: math.div(15px, $base-font-size-px) + rem;
7
7
  flex-wrap: wrap;
8
8
  align-items: center;
9
9
  width: fit-content;
package/src/components/cfpb-buttons/button-link.scss CHANGED
@@ -81,13 +81,8 @@ $a: Link active color.
81
81
  // Secondary button link
82
82
  //
83
83
 
84
- @include u-btn-link-states(
85
- '.a-btn--link.a-btn--secondary',
86
- $btn-secondary-bg,
87
- $btn-secondary-bg-hover,
88
- $btn-secondary-bg,
89
- $btn-secondary-bg-active
90
- );
84
+ // The .a-btn--link.a-btn--secondary combo shouldn't be used,
85
+ // so we provide no styles.
91
86
 
92
87
  //
93
88
  // Destructive action button link
package/src/components/cfpb-buttons/button.scss CHANGED
@@ -81,23 +81,28 @@ input.a-btn::-moz-focus-inner {
81
81
  &:visited {
82
82
  background-color: $btn-secondary-bg;
83
83
  color: $btn-secondary-text;
84
+ box-shadow: 0 0 0 1px $btn-secondary-border inset;
84
85
  }
85
86
 
86
87
  &:hover,
87
88
  &.hover,
88
89
  &:focus,
89
90
  &.focus {
90
- background-color: $btn-secondary-bg-hover;
91
+ background-color: $btn-secondary-bg;
92
+ color: $btn-secondary-text-hover;
93
+ box-shadow: 0 0 0 1px $btn-secondary-border-hover inset;
91
94
  }
92
95
 
93
96
  &:focus,
94
97
  &.focus {
95
- outline-color: $btn-secondary-bg;
98
+ outline-color: $btn-secondary-border;
96
99
  }
97
100
 
98
101
  &:active,
99
102
  &.active {
100
- background-color: $btn-secondary-bg-active;
103
+ background-color: $btn-secondary-bg;
104
+ color: $btn-secondary-text-active;
105
+ box-shadow: 0 0 0 1px $btn-secondary-border-active inset;
101
106
  }
102
107
  }
103
108
 
@@ -179,6 +184,9 @@ input.a-btn::-moz-focus-inner {
179
184
  &:has(span + svg) {
180
185
  svg {
181
186
  order: 3;
187
+
188
+ // Prevent icon from shrinking when button wraps.
189
+ flex: none;
182
190
  }
183
191
  }
184
192
 
package/src/components/cfpb-buttons/vars.scss CHANGED
@@ -19,11 +19,14 @@ $btn-bg-active: var(--navy);
19
19
  $btn-divider: var(--pacific-60);
20
20
 
21
21
  // .btn__secondary
22
- $btn-secondary-text: var(--white);
23
- $btn-secondary-bg: var(--gray);
24
- $btn-secondary-bg-hover: var(--gray-dark);
25
- $btn-secondary-bg-active: var(--black);
26
- $btn-secondary-divider: var(--gray-40);
22
+ $btn-secondary-text: var(--pacific);
23
+ $btn-secondary-text-hover: var(--pacific-dark);
24
+ $btn-secondary-text-active: var(--navy);
25
+ $btn-secondary-bg: var(--white);
26
+ $btn-secondary-border: var(--pacific);
27
+ $btn-secondary-border-hover: var(--pacific-dark);
28
+ $btn-secondary-border-active: var(--navy);
29
+ $btn-secondary-divider: var(--pacific-60);
27
30
 
28
31
  // .btn__warning
29
32
  $btn-warning-text: var(--white);
package/src/components/cfpb-notifications/notification.scss CHANGED
@@ -66,6 +66,10 @@
66
66
  display: block;
67
67
  }
68
68
 
69
+ &__content {
70
+ max-width: 41.875rem;
71
+ }
72
+
69
73
  // Only adding left padding if an icon is present.
70
74
  .cf-icon-svg + &__content {
71
75
  padding-left: math.div(25px, $base-font-size-px) + rem;