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

@@ -29,6 +29,7 @@ class Badge extends PureComponent {
       className,
       'badge',
       `badge-${status}`,
+      `bg-${status}`,
       invertedClass,
     );
     return (
@@ -48,7 +49,7 @@ Badge.propTypes = {
 
 Badge.defaultProps = {
   status: 'default',
-  className: 'badge-pill',
+  className: 'rounded-pill',
   inverted: false,
 };
 

client/src/components/Badge/mixins/_badge.scss

@@ -2,12 +2,13 @@
 // See: bootstrap/mixins/_badge.scss for original.
 @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('.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';
@@ -126,20 +126,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/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 {

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>

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;

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

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;

client/src/components/PopoverOptionSet/PopoverOptionSet.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Input, InputGroup, InputGroupAddon, Popover, Util as reactstrapUtil } from 'reactstrap';
+import { Button, Input, InputGroup, Popover, Util as reactstrapUtil } from 'reactstrap';
 import classNames from 'classnames';
 import i18n from 'i18n';
 
@@ -91,7 +91,7 @@ class PopoverOptionSet extends Component {
 
   /**
    * Render a link to clear the search field if user entered input
-   * @returns {InputGroupAddon|null}
+   * @returns {button|null}
    */
   renderSearchValueClearLink() {
     const { clearButtonClassName } = this.props;
@@ -102,14 +102,12 @@ class PopoverOptionSet extends Component {
     }
 
     return (
-      <InputGroupAddon addonType="append">
-        <button
-          className={classNames(clearButtonClassName)}
-          onClick={this.handleSearchValueClear}
-        >
-          {i18n._t('PopoverOptionSet.CLEAR', 'Clear')}
-        </button>
-      </InputGroupAddon>
+      <button
+        className={classNames(clearButtonClassName)}
+        onClick={this.handleSearchValueClear}
+      >
+        {i18n._t('PopoverOptionSet.CLEAR', 'Clear')}
+      </button>
     );
   }