DEP Upgrade bootstrap and reactstrap

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}

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,
 };
 

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);
   }
 }

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);
     }
   }
 }

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
   }
 };

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');
 });

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 + & {

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 & {

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>
       );
     }

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', () => {

client/src/components/Form/Form.scss

@@ -171,7 +171,6 @@ input[type="checkbox"],
 input[type="radio"],
 input.checkbox,
 input.radio {
-  display: inline;
   margin-right: 6px;
 }
 

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 {
@@ -142,39 +141,6 @@
   }
 }
 
-
-// Specific button variations
-.btn-primary {
-  border-bottom-color: $btn-primary-shadow;
-
-  .btn__circle {
-    background: $white;
-  }
-
-  &:focus {
-    outline-color: $brand-primary;
-  }
-}
-
-.btn-outline-primary {
-  border-color: lighten($btn-primary-border, 10%);
-
-  &:not(:disabled, .disabled) {
-    &:hover,
-    &:active,
-    &:focus {
-      color: darken($btn-primary-bg, 10%);
-      background-image: none;
-      background-color: lighten($btn-primary-bg, 50%);
-      border-color: $btn-primary-border;
-    }
-  }
-
-  .btn__circle {
-    background: $btn-primary-bg;
-  }
-}
-
 .btn-secondary {
   border-color: transparent;
   background-color: transparent;
@@ -200,13 +166,17 @@
   &:not(:disabled, .disabled) {
     &:hover,
     &:focus,
-    &.focus,
-    &:active,
-    &.active {
+    &.focus {
       background-color: $btn-secondary-bg;
       border-color: $btn-secondary-bg;
       color: $text-muted;
     }
+    &:active,
+    &.active {
+      background-color: var(--bs-btn-active-bg);
+      border-color: var(--bs-btn-active-border-color);
+      color: var(--bs-btn-active-color);
+    }
   }
 }
 
@@ -281,14 +251,14 @@
 
 // Close buttons
 // Bootstrap close button customizations
-.close {
+.btn-close {
   font-size: ($font-size-base * 1.8);
   opacity: .3;
   line-height: 20px;
   display: block;
 }
 
-button.close {
+button.btn-close {
   padding: $input-btn-padding-y $input-btn-padding-x;
 }
 
@@ -312,7 +282,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 {

client/src/components/FormAlert/FormAlert.scss

@@ -1,4 +1,4 @@
-.message-box .close {
+.message-box .btn-close {
   cursor: pointer;
   padding-bottom: 0.9rem;
   padding-top: 0.6rem;

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;

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',

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', () => {

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>
     );
   }

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>