@cfpb/cfpb-design-system 3.2.10 → 3.2.11

package/package.json

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

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

@@ -13,9 +13,18 @@ input.a-btn::-moz-focus-inner {
   border: 0;
 }
 
+@mixin a-btn-divider() {
+  content: '';
+  border-left: 1px solid $btn-divider;
+  order: 2;
+  place-self: normal;
+}
+
 @mixin a-btn() {
   appearance: none;
-  display: inline-block;
+  display: flex;
+  gap: math.div(10px, $base-font-size-px) + rem;
+
   box-sizing: border-box;
   padding: math.div($btn-v-padding, $btn-font-size) + em
     math.div($btn-h-padding, $btn-font-size) + em;
@@ -156,6 +165,37 @@ input.a-btn::-moz-focus-inner {
       width: 100%;
     }
   }
+
+  // Handle button with icon logic.
+  &:has(svg)::before {
+    @include a-btn-divider;
+  }
+
+  &--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 {
+      order: 3;
+    }
+  }
+
+  &:has(span + svg) {
+    svg {
+      order: 3;
+    }
+  }
 }
 
 .a-btn {

package/src/components/cfpb-buttons/index.js

@@ -1,4 +1,3 @@
 export * as buttonStyles from './button.scss';
 export * as buttonGroupStyles from './button-group.scss';
 export * as buttonLinkStyles from './button-link.scss';
-export * as buttonWithIconStyles from './button-with-icon.scss';

package/src/components/cfpb-pagination/pagination.scss

@@ -7,77 +7,52 @@
 //
 
 .m-pagination {
-  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas:
+    'pag-btn-prev . pag-btn-next'
+    'pag-form pag-form pag-form';
+  row-gap: math.div(15px, $base-font-size-px) + rem;
 
   &__form {
-    padding: math.div(5px, $base-font-size-px) + em;
-    border-radius: math.div(4px, $base-font-size-px) + em;
+    grid-area: pag-form;
+    display: flex;
+    flex-flow: wrap;
+    place-content: center;
+    gap: math.div(10px, $base-font-size-px) + rem;
+
+    padding: math.div(5px, $base-font-size-px) + rem;
+    border-radius: math.div(4px, $base-font-size-px) + rem;
     background: $pagination-bg;
     color: $pagination-text;
-    text-align: center;
   }
 
   &__current-page {
     // 45px is a magic number to provide enough room for three digits
     // and the number spinners for type="number" inputs on desktop
-    width: math.div(45px, $base-font-size-px) + em;
+    width: math.div(45px, $base-font-size-px) + rem;
 
-    // 10px + a normal inline single space ~= spec'ed value of 15px
-    margin-right: math.div(10px, $base-font-size-px) + em;
-    margin-left: math.div(10px, $base-font-size-px) + em;
     font-weight: 500;
     text-align: right;
   }
 
   &__label {
-    display: inline-block;
-
-    // 10px + a normal inline single space ~= spec'ed value of 15px
-    margin-right: math.div(10px, $base-font-size-px) + em;
-    vertical-align: middle;
-  }
-
-  &__btn-submit {
-    margin: 0;
-    vertical-align: middle;
+    display: contents;
+    white-space: nowrap;
   }
 
-  &__btn-prev,
-  &__btn-next {
-    min-width: $pagination-btn-min-width-px;
-
-    // 22px is a magic number to vertically center the type in the button
-    // TODO: Consider refactoring with flexbox for vertical centering
-    line-height: 22px;
-    text-align: center;
-
-    &.a-btn--disabled {
-      background-color: $pagination-bg;
-      border-color: transparent;
-    }
+  &__btn-prev {
+    grid-area: pag-btn-prev;
   }
-
   &__btn-next {
-    position: absolute;
-    right: 0;
-  }
-
-  // Mobile only.
-  @include respond-to-max($bp-xs-max) {
-    &__btn-prev,
-    &__btn-next {
-      margin-bottom: math.div(15px, $base-font-size-px) + em;
-    }
+    grid-area: pag-btn-next;
   }
 
   // Tablet and above.
   @include respond-to-min($bp-sm-min) {
-    &__btn-prev,
-    &__btn-next {
-      height: 100%;
-    }
+    grid-template-areas: 'pag-btn-prev pag-form pag-btn-next';
+
     &__btn-prev {
-      position: absolute;
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }

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

@@ -1,34 +0,0 @@
-@use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use './vars.scss' as *;
-
-// Icon locations
-// TODO: Replace magic numbers with calculations based off of the
-//       button padding size.
-
-.a-btn__icon--on-left {
-  padding-right: math.div(11px, $btn-font-size) + em;
-  border-right: 1px solid $btn-divider;
-  margin-right: math.div(7px, $btn-font-size) + em;
-}
-
-.a-btn__icon--on-right {
-  padding-left: math.div(11px, $btn-font-size) + em;
-  border-left: 1px solid $btn-divider;
-  margin-left: math.div(7px, $btn-font-size) + em;
-}
-
-.a-btn__icon {
-  .a-btn--secondary & {
-    border-color: $btn-secondary-divider;
-  }
-
-  .a-btn--warning & {
-    border-color: $btn-warning-divider;
-  }
-
-  .a-btn--disabled &,
-  .a-btn[disabled] & {
-    border-color: $btn-disabled-divider;
-  }
-}