@cfpb/cfpb-design-system 3.4.10 → 3.4.12

package/package.json

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

package/src/base/base.scss

@@ -27,6 +27,21 @@ textarea {
   font-family: var(--font-stack);
 }
 
+/*
+ * On iOS Safari the input is collapsed till it's clicked.
+ * This sets the default min width and height to what it would be if the
+ * appearance was a textfield.
+ */
+input[type='date'] {
+  display: revert;
+  min-width: 98px;
+  min-height: 29px;
+
+  &.a-text-input--full {
+    min-width: 100%;
+  }
+}
+
 strong,
 b {
   font-weight: 600;

package/src/components/cfpb-forms/form-field.scss

@@ -4,7 +4,6 @@
 
 .m-form-field {
   .a-text-input--full {
-    box-sizing: border-box;
     width: 100%;
   }
 

package/src/components/cfpb-forms/text-input.scss

@@ -88,6 +88,7 @@
   border: 1px solid $input-border;
   background: $input-bg;
   color: $input-text;
+  box-sizing: border-box;
 
   &:hover,
   &.hover {

package/src/components/cfpb-typography/link.scss

@@ -7,6 +7,9 @@
   .a-link__text {
     border-bottom-width: 1px;
     border-bottom-style: inherit;
+
+    // See https://github.com/cfpb/consumerfinance.gov/pull/8252
+    overflow-wrap: break-word;
   }
 }
 

package/src/utilities/utilities.scss

@@ -351,12 +351,8 @@ $ba: Link underline active color.
 // Width utilities
 //
 
-@mixin u-w100pct() {
-  width: 100%;
-}
-
 .u-w100pct {
-  @include u-w100pct;
+  width: 100%;
 }
 
 .u-w90pct {
@@ -399,10 +395,18 @@ $ba: Link underline active color.
   width: 75%;
 }
 
+.u-w65pct {
+  width: 65%;
+}
+
 .u-w25pct {
   width: 25%;
 }
 
+.u-w15pct {
+  width: 15%;
+}
+
 .u-w66pct {
   width: math.div(2, 3) * 100%;
 }