DEP Upgrade bootstrap and reactstrap

creative-commoners · Jan 21, 2025 · 6f1f766 · 6f1f766
1 parent 8e1007c
commit 6f1f766
Show file tree

Hide file tree

Showing 67 changed files with 1,547 additions and 1,292 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/dist/js/vendor.js b/client/dist/js/vendor.js
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/Accordion/AccordionBlock.js b/client/src/components/Accordion/AccordionBlock.js
@@ -17,7 +17,7 @@ const AccordionBlock = (props) => {
     <div className="accordion__block">
       <a
         className="accordion__title"
-        data-toggle="collapse"
+        data-bs-toggle="collapse"
         href={`#${listIDAttr}`}
         aria-expanded="true"
         aria-controls={listID}

diff --git a/client/src/components/Badge/Badge.js b/client/src/components/Badge/Badge.js
@@ -23,13 +23,13 @@ class Badge extends PureComponent {
       return null;
     }
 
-    const invertedClass = inverted ? `badge-${status}--inverted` : '';
+    const colourClass = inverted ? `text-bg-${status}--inverted` : `text-bg-${status}`;
 
     const compiledClassNames = classnames(
       className,
       'badge',
       `badge-${status}`,
-      invertedClass,
+      colourClass,
     );
     return (
       <span className={compiledClassNames}>
@@ -48,7 +48,7 @@ Badge.propTypes = {
 
 Badge.defaultProps = {
   status: 'default',
-  className: 'badge-pill',
+  className: 'rounded-pill',
   inverted: false,
 };
 

diff --git a/client/src/components/Badge/Badge.scss b/client/src/components/Badge/Badge.scss
@@ -14,7 +14,7 @@
 
 // Inverted states
 @each $color, $value in $theme-colors {
-  .badge-#{$color}--inverted {
+  .text-bg-#{$color}--inverted {
     @include badge-variant-inverted($value);
   }
 }
diff --git a/client/src/components/Badge/mixins/_badge.scss b/client/src/components/Badge/mixins/_badge.scss
@@ -1,13 +1,13 @@
-// Provides an inverted variant of Bootstrap badges.
-// See: bootstrap/mixins/_badge.scss for original.
+// Provides an inverted variant of Bootstrap 5's .text-bg-{color} classes which replace the old .badge-{color} classes.
 @mixin badge-variant-inverted($bg) {
   color: $bg;
-  background-color: color-yiq($bg);
+  background-color: color-contrast($bg);
 
   &[href] {
-    @include hover-focus {
+    &:hover,
+    &:focus {
       color: darken($bg, 10%);
-      background-color: color-yiq($bg);
+      background-color: color-contrast($bg);
     }
   }
 }
diff --git a/client/src/components/Badge/tests/Badge-story.js b/client/src/components/Badge/tests/Badge-story.js
@@ -45,11 +45,11 @@ export default {
       control: 'inline-radio',
       options: {
         'Empty class name': '',
-        'badge-pill class name': 'badge-pill'
+        'rounded-pill class name': 'rounded-pill'
       },
       table: {
         type: { summary: 'string' },
-        defaultValue: { summary: 'badge-pill' },
+        defaultValue: { summary: 'rounded-pill' },
       },
     }
   }
@@ -60,7 +60,7 @@ export const _Badge = {
   args: {
     message: 'Hello World!',
     status: 'default',
-    className: 'badge-pill',
+    className: 'rounded-pill',
     inverted: false
   }
 };
diff --git a/client/src/components/Badge/tests/Badge-test.js b/client/src/components/Badge/tests/Badge-test.js
@@ -26,7 +26,7 @@ test('Badge render() should return a Bootstrap style badge when valid', () => {
     />
   );
   expect(container.querySelectorAll('.badge').length).toBe(1);
-  expect(container.querySelectorAll('.badge-success').length).toBe(1);
+  expect(container.querySelectorAll('.text-bg-success').length).toBe(1);
   expect(container.querySelectorAll('.customclass').length).toBe(1);
   expect(container.innerHTML).toContain('Hello world');
 });
diff --git a/client/src/components/Breadcrumb/Breadcrumb.scss b/client/src/components/Breadcrumb/Breadcrumb.scss
@@ -36,7 +36,7 @@
   max-height: $toolbar-height;
   overflow: hidden;
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     margin-left: $toolbar-total-height;
 
     .toolbar__back-button + & {

diff --git a/client/src/components/Button/BackButton.scss b/client/src/components/Button/BackButton.scss
@@ -5,7 +5,7 @@
   color: $text-muted; // TEMP: Needed for anchor buttons to override legacy styles
   margin-left: -$spacer-xs;
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     margin-left: 42px;
 
     .insert-media-modal & {

diff --git a/client/src/components/FieldHolder/FieldHolder.js b/client/src/components/FieldHolder/FieldHolder.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { FormGroup, InputGroup, InputGroupAddon, Label } from 'reactstrap';
+import { FormGroup, InputGroup, InputGroupText, Label } from 'reactstrap';
 import castStringToElement from 'lib/castStringToElement';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
@@ -42,6 +42,7 @@ function fieldHolder(Field) {
           field: true,
           [this.props.extraClass]: true,
           readonly: this.props.readOnly,
+          'form-group': true,
         }),
         id: this.props.holderId,
       };
@@ -126,20 +127,22 @@ function fieldHolder(Field) {
       };
 
       const field = <Field {...props} />;
-      const prefix = this.props.data && this.props.data.prefix ? this.props.data.prefix : '';
-      const suffix = this.props.data && this.props.data.suffix ? this.props.data.suffix : '';
+      let prefix = this.props.data && this.props.data.prefix ? this.props.data.prefix : '';
+      let suffix = this.props.data && this.props.data.suffix ? this.props.data.suffix : '';
       if (!prefix && !suffix) {
         return field;
       }
+      if (prefix !== '' && typeof prefix === 'string') {
+        prefix = <InputGroupText>{prefix}</InputGroupText>;
+      }
+      if (suffix !== '' && typeof suffix === 'string') {
+        suffix = <InputGroupText>{suffix}</InputGroupText>;
+      }
       return (
         <InputGroup>
-          {prefix &&
-            <InputGroupAddon addonType="prepend">{prefix}</InputGroupAddon>
-          }
+          {prefix}
           {field}
-          {suffix &&
-            <InputGroupAddon addonType="append">{suffix}</InputGroupAddon>
-          }
+          {suffix}
         </InputGroup>
       );
     }

diff --git a/client/src/components/FieldHolder/tests/FieldHolder-test.js b/client/src/components/FieldHolder/tests/FieldHolder-test.js
@@ -198,7 +198,8 @@ test('FieldHolder prefix', () => {
     }}
     />
   );
-  expect(container.querySelector('.input-group-prepend .input-group-text').innerHTML).toBe('My prefix');
+  expect(container.querySelectorAll('.input-group-text')).toHaveLength(1);
+  expect(container.querySelector('.input-group .input-group-text').innerHTML).toBe('My prefix');
 });
 
 test('FieldHolder prefix', () => {
@@ -210,7 +211,8 @@ test('FieldHolder prefix', () => {
     }}
     />
   );
-  expect(container.querySelector('.input-group-append .input-group-text').innerHTML).toBe('My suffix');
+  expect(container.querySelectorAll('.input-group-text')).toHaveLength(1);
+  expect(container.querySelector('.input-group .input-group-text').innerHTML).toBe('My suffix');
 });
 
 test('FieldHolder titleTip should be rendered if one is provided', () => {

diff --git a/client/src/components/FormAction/FormAction.scss b/client/src/components/FormAction/FormAction.scss
@@ -80,7 +80,6 @@
 }
 
 // Used buttons with text and icons, but you wan to hide the text only. eg. gridfield pagination
-// Could change to BS .text-hide { @include text-hide(); }, although slightly different
 .btn--hide-text[class*="font-icon-"] {
 
   &:before {
@@ -312,7 +311,7 @@ button.close {
 }
 
 .actions-warning {
-  color: #856404; // in bootstrap: theme-color-level(map-get($theme-colors, "yellow"), 6)
+  color: #856404; // in bootstrap: shift-color(map-get($theme-colors, "yellow"), 6)
 
   // override .btn styles
   &.btn {

diff --git a/client/src/components/GridField/GridField.scss b/client/src/components/GridField/GridField.scss
@@ -200,7 +200,7 @@ div.grid-field__sort-field + .form__fieldgroup-item {
 .grid-field__icon-action--hidden-on-hover {
   opacity: 0;
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     opacity: 1;
   }
 }
@@ -243,7 +243,7 @@ div.grid-field__sort-field + .form__fieldgroup-item {
 
 
 // Responsive grid-field
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
   .grid-field__table td,
   .grid-field__table th {
     display: none;

diff --git a/client/src/components/GridFieldActions/GridFieldActions.js b/client/src/components/GridFieldActions/GridFieldActions.js
@@ -22,7 +22,7 @@ class GridFieldActions extends PureComponent {
       return groupsList;
     }, []);
 
-    const dropdownMenuProps = { right: true };
+    const dropdownMenuProps = { end: true };
     const dropdownToggleClassNames = [
       'action-menu__toggle',
       'btn',

diff --git a/client/src/components/GridFieldActions/tests/GridFieldActions-test.js b/client/src/components/GridFieldActions/tests/GridFieldActions-test.js
@@ -46,7 +46,7 @@ test('GridFieldActions.render() should render a menu, if there is more than one
     }}
     />
   );
-  expect(container.querySelector('.action-menu__toggle .sr-only').innerHTML).toBe('View actions');
+  expect(container.querySelector('.action-menu__toggle .visually-hidden').innerHTML).toBe('View actions');
 });
 
 test('GridFieldActions.renderSingleAction() should render a button', () => {

diff --git a/client/src/components/InputField/InputField.js b/client/src/components/InputField/InputField.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import {
   Input,
   InputGroup,
-  InputGroupAddon,
 } from 'reactstrap';
 import PropTypes from 'prop-types';
 
@@ -69,13 +68,11 @@ class InputField extends Component {
     return (
       <InputGroup>
         <Input {...this.getInputProps()} />
-        <InputGroupAddon addonType="append">
-          <Tip
-            {...tip}
-            fieldTitle={title}
-            id={`${id}-tip`}
-          />
-        </InputGroupAddon>
+        <Tip
+          {...tip}
+          fieldTitle={title}
+          id={`${id}-tip`}
+        />
       </InputGroup>
     );
   }

diff --git a/client/src/components/LabelField/LabelField.js b/client/src/components/LabelField/LabelField.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 const LabelField = ({ id, className, title, extraClass, data }) => {
   const htmlFor = data && data.target;
-  const classes = `${className} ${extraClass}`;
+  const classes = `form-label ${className} ${extraClass}`;
 
   return (
     <label id={id} className={classes} htmlFor={htmlFor}>{title}</label>

diff --git a/client/src/components/Menu/Menu.scss b/client/src/components/Menu/Menu.scss
@@ -13,7 +13,7 @@
   width: $cms-menu-width !important;
   overflow: hidden;
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     position: absolute;
     top: 0;
     left: -100%;
@@ -130,7 +130,7 @@
     padding-right: 1px;
     border-top: 1px solid rgba($border-color, .5);
 
-    @include media-breakpoint-down(sm) {
+    @include media-breakpoint-down(md) {
       .toggle-collapse,
       .toggle-expand,
       .sticky-toggle {
@@ -220,7 +220,7 @@
 }
 
 .cms-menu.cms-menu--open + .cms-menu-mobile-overlay {
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     display: block;
   }
 }
@@ -258,7 +258,7 @@
     background-color: $brand-secondary-hover;
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     text-align: center;
   }
 
@@ -277,7 +277,7 @@
       opacity: .9;
     }
 
-    @include media-breakpoint-down(sm) {
+    @include media-breakpoint-down(md) {
       margin-left: $toolbar-total-height;
       margin-right: $toolbar-total-height;
     }
@@ -336,7 +336,7 @@
       padding-left: 0;
       transition: padding $transition-speed-fast;
 
-      @include media-breakpoint-down(sm) {
+      @include media-breakpoint-down(md) {
         left: 18px;
       }
     }
@@ -348,7 +348,7 @@
       white-space: nowrap;
       padding-left: 29px;
 
-      @include media-breakpoint-down(sm) {
+      @include media-breakpoint-down(md) {
         padding-left: 36px;
       }
     }
@@ -373,7 +373,7 @@
     }
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     left: 20px;
   }
 }
@@ -441,7 +441,7 @@
         display: block;
         margin-left: 30px;
 
-        @include media-breakpoint-down(sm) {
+        @include media-breakpoint-down(md) {
           margin-left: 38px;
         }
       }
@@ -486,7 +486,7 @@
   top: 0;
   z-index: $zindex-menu + 1;
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     display: block;
   }
 }
@@ -593,7 +593,7 @@
   }
 }
 
-@include media-breakpoint-between(sm, sm) {
+@include media-breakpoint-between(sm, md) {
   .cms-help {
     &__links a.cms-help__link {
       display: none;

diff --git a/client/src/components/Modal/Modal.js b/client/src/components/Modal/Modal.js
@@ -58,7 +58,7 @@ const Modal = ({
     typeof onClosed === 'function' && (
       <button
         type="button"
-        className="close modal__close-button"
+        className="btn-close modal__close-button"
         onClick={onClosed}
         aria-label={i18n._t('Admin.CLOSE', 'Close')}
       />

diff --git a/client/src/components/Modal/Modal.scss b/client/src/components/Modal/Modal.scss
@@ -3,7 +3,7 @@
   // IE10 fix
   height: calc(100% - #{$toolbar-total-height});
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     height: calc(100% - 1rem);
     width: calc(100% - .5rem);
     margin: 0 auto;

diff --git a/client/src/components/OptionsetField/OptionField.js b/client/src/components/OptionsetField/OptionField.js
@@ -20,7 +20,6 @@ class OptionField extends Component {
     const classes = classnames({
       [this.props.className]: true,
       [this.props.extraClass]: true,
-      'form-check': true,
       checked: this.props.value,
       disabled: this.props.readOnly,
       'option-field--disabled': this.props.readOnly || this.props.disabled,
-Original file line number
+Diff line change
@@ Expand Up @@
         }}
         />
       );
-      expect(container.querySelector('.action-menu__toggle .sr-only').innerHTML).toBe('View actions');
+      expect(container.querySelector('.action-menu__toggle .visually-hidden').innerHTML).toBe('View actions');
     });
     test('GridFieldActions.renderSingleAction() should render a button', () => {
@@ Expand Down @@