STSMACOM-863: Improve confirmation modal footer for ControlledVocab…

… component (#1526)

CHANGELOG.md

@@ -28,6 +28,7 @@
 * Omit (don't disable) "+ New" button in `<EditableList>` when user lacks permission. Refs STSMACOM-836.
 * Avoid deprecated `defaultProps` for functional components. Refs STSMACOM-835.
 * Upgrade `notes` to `v4.0`. Refs STSMACOM-861.
+* Improve confirmation modal footer for `ControlledVocab` component. Refs STSMACOM-863.
 
 ## [9.1.3](https://github.com/folio-org/stripes-smart-components/tree/v9.1.3) (2024-05-06)
 [Full Changelog](https://github.com/folio-org/stripes-smart-components/compare/v9.1.2...v9.1.3)

lib/ControlledVocab/ControlledVocab.js

@@ -15,6 +15,7 @@ import {
   Paneset,
   Row,
   Loading,
+  ModalFooter,
 } from '@folio/stripes-components';
 
 import EditableList from '../EditableList';
@@ -437,8 +438,21 @@ class ControlledVocab extends React.Component {
     const type = this.props.labelSingular;
     const { cannotDeleteTermHeader, cannotDeleteTermMessage } = this.props.translations ?? {};
 
+    const footer = (
+      <ModalFooter>
+        <Button
+          buttonStyle="primary"
+          onClick={this.hideItemInUseDialog}
+          marginBottom0
+        >
+          <FormattedMessage id="stripes-core.label.okay" />
+        </Button>
+      </ModalFooter>
+    );
+
     return (
       <Modal
+        footer={footer}
         open={this.state.showItemInUseDialog}
         label={
           cannotDeleteTermHeader ?
@@ -456,13 +470,6 @@ class ControlledVocab extends React.Component {
             }
           </Col>
         </Row>
-        <Row>
-          <Col xs>
-            <Button buttonStyle="primary" onClick={this.hideItemInUseDialog}>
-              <FormattedMessage id="stripes-core.label.okay" />
-            </Button>
-          </Col>
-        </Row>
       </Modal>
     );
   }