Add default styles to "Enter" buttons (#1257)

folio-org · Dec 30, 2024 · 2ad947d · 2ad947d
1 parent 8e57279
commit 2ad947d
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 45 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 * Add "Retrieval service point" filter. Refs UIREQ-1190.
 * Include `Retrieval service point` column in csv exports. Refs UIREQ-1191.
 * Add icons to requests action menu. Refs UIREQ-1116.
+* Revise "Enter" button on New request page. Refs UIREQ-1114.
 
 ## [11.0.2] (https://github.com/folio-org/ui-requests/tree/v11.0.2) (2024-12-10)
 [Full Changelog](https://github.com/folio-org/ui-requests/compare/v11.0.1...v11.0.2)

diff --git a/src/components/InstanceInformation/InstanceInformation.css b/src/components/InstanceInformation/InstanceInformation.css
@@ -0,0 +1,12 @@
+.fieldWrapper {
+  display: flex;
+  align-items: start;
+}
+
+.instanceHridField {
+  margin-right: 20px;
+}
+
+.enterButton {
+  margin-top: 25px;
+}
diff --git a/src/components/InstanceInformation/InstanceInformation.js b/src/components/InstanceInformation/InstanceInformation.js
@@ -24,7 +24,7 @@ import {
   memoizeValidation,
 } from '../../utils';
 
-import css from '../../requests.css';
+import css from './InstanceInformation.css';
 
 export const INSTANCE_SEGMENT_FOR_PLUGIN = 'instances';
 
@@ -174,7 +174,10 @@ class InstanceInformation extends Component {
             !isEditForm &&
             <>
               <Row>
-                <Col xs={9}>
+                <Col
+                  xs={12}
+                  className={css.fieldWrapper}
+                >
                   <FormattedMessage id="ui-requests.instance.scanOrEnterBarcode">
                     {placeholder => {
                       const key = values.keyOfInstanceIdField ?? 0;
@@ -202,19 +205,17 @@ class InstanceInformation extends Component {
                                 onChange={this.handleChange}
                                 onBlur={this.handleBlur(input)}
                                 onKeyDown={this.onKeyDown}
+                                className={css.instanceHridField}
                               />
                             );
                           }}
                         </Field>
                       );
                     }}
                   </FormattedMessage>
-                </Col>
-                <Col xs={3}>
                   <Button
-                    buttonStyle="primary noRadius"
+                    buttonStyle="default"
                     buttonClass={css.enterButton}
-                    fullWidth
                     onClick={this.handleClick}
                     disabled={submitting}
                   >

diff --git a/src/components/ItemInformation/ItemInformation.css b/src/components/ItemInformation/ItemInformation.css
@@ -0,0 +1,12 @@
+.fieldWrapper {
+  display: flex;
+  align-items: start;
+}
+
+.itemBarcodeField {
+  margin-right: 20px;
+}
+
+.enterButton {
+  margin-top: 25px;
+}
diff --git a/src/components/ItemInformation/ItemInformation.js b/src/components/ItemInformation/ItemInformation.js
@@ -24,7 +24,7 @@ import {
   memoizeValidation,
 } from '../../utils';
 
-import css from '../../requests.css';
+import css from './ItemInformation.css';
 
 class ItemInformation extends Component {
   static propTypes = {
@@ -176,7 +176,10 @@ class ItemInformation extends Component {
           {
             !isEditForm &&
             <Row>
-              <Col xs={9}>
+              <Col
+                xs={12}
+                className={css.fieldWrapper}
+              >
                 <FormattedMessage id="ui-requests.item.scanOrEnterBarcode">
                   {placeholder => {
                     const key = values.keyOfItemBarcodeField ?? 0;
@@ -204,20 +207,18 @@ class ItemInformation extends Component {
                               onChange={this.handleChange}
                               onBlur={this.handleBlur(input)}
                               onKeyDown={this.onKeyDown}
+                              className={css.itemBarcodeField}
                             />
                           );
                         }}
                       </Field>
                     );
                   }}
                 </FormattedMessage>
-              </Col>
-              <Col xs={3}>
                 <Button
                   id="clickable-select-item"
-                  buttonStyle="primary noRadius"
+                  buttonStyle="default"
                   buttonClass={css.enterButton}
-                  fullWidth
                   onClick={this.handleClick}
                   disabled={submitting}
                 >

diff --git a/src/components/RequesterInformation/RequesterInformation.css b/src/components/RequesterInformation/RequesterInformation.css
@@ -0,0 +1,12 @@
+.fieldWrapper {
+  display: flex;
+  align-items: start;
+}
+
+.requesterBarcodeField {
+  margin-right: 20px;
+}
+
+.enterButton {
+  margin-top: 25px;
+}
diff --git a/src/components/RequesterInformation/RequesterInformation.js b/src/components/RequesterInformation/RequesterInformation.js
@@ -28,7 +28,7 @@ import {
   BASE_SPINNER_PROPS,
 } from '../../constants';
 
-import css from '../../requests.css';
+import css from './RequesterInformation.css';
 
 export const VISIBLE_COLUMNS = ['active', 'name', 'patronGroup', 'username', 'barcode'];
 export const COLUMN_MAPPING = {
@@ -224,7 +224,10 @@ class RequesterInformation extends Component {
         <Col xs={12}>
           {!isEditForm &&
           <Row>
-            <Col xs={9}>
+            <Col
+              xs={12}
+              className={css.fieldWrapper}
+            >
               <FormattedMessage id="ui-requests.requester.scanOrEnterBarcode">
                 {placeholder => {
                   const key = values.keyOfUserBarcodeField ?? 0;
@@ -252,40 +255,38 @@ class RequesterInformation extends Component {
                             onChange={this.handleChange}
                             onBlur={this.handleBlur(input)}
                             onKeyDown={this.onKeyDown}
+                            className={css.requesterBarcodeField}
                           />
                         );
                       }}
                     </Field>
                   );
                 }}
               </FormattedMessage>
-              <Pluggable
-                {...this.props}
-                aria-haspopup="true"
-                type="find-user"
-                searchLabel={<FormattedMessage id="ui-requests.requester.findUserPluginLabel" />}
-                searchButtonStyle="link"
-                dataKey="users"
-                selectUser={this.onSelectUser}
-                visibleColumns={VISIBLE_COLUMNS}
-                columnMapping={COLUMN_MAPPING}
-                disableRecordCreation
-                marginTop0
-              />
-            </Col>
-            <Col xs={3}>
               <Button
                 id="clickable-select-requester"
-                buttonStyle="primary noRadius"
+                buttonStyle="default"
                 buttonClass={css.enterButton}
-                fullWidth
                 onClick={this.handleClick}
                 disabled={submitting}
               >
                 <FormattedMessage id="ui-requests.enter" />
               </Button>
             </Col>
           </Row>}
+          <Pluggable
+            {...this.props}
+            aria-haspopup="true"
+            type="find-user"
+            searchLabel={<FormattedMessage id="ui-requests.requester.findUserPluginLabel" />}
+            searchButtonStyle="link"
+            dataKey="users"
+            selectUser={this.onSelectUser}
+            visibleColumns={VISIBLE_COLUMNS}
+            columnMapping={COLUMN_MAPPING}
+            disableRecordCreation
+            marginTop0
+          />
           {(selectedUser?.id || isEditForm) &&
             <UserForm
               user={request ? request.requester : selectedUser}

diff --git a/src/deprecated/components/InstanceInformation/InstanceInformation.css b/src/deprecated/components/InstanceInformation/InstanceInformation.css
@@ -1,3 +1,12 @@
+.fieldWrapper {
+  display: flex;
+  align-items: start;
+}
+
+.instanceHridField {
+  margin-right: 20px;
+}
+
 .enterButton {
   margin-top: 25px;
 }
diff --git a/src/deprecated/components/InstanceInformation/InstanceInformation.js b/src/deprecated/components/InstanceInformation/InstanceInformation.js
@@ -176,7 +176,10 @@ class InstanceInformation extends Component {
             !isEditForm &&
             <>
               <Row>
-                <Col xs={9}>
+                <Col
+                  xs={12}
+                  className={css.fieldWrapper}
+                >
                   <FormattedMessage id="ui-requests.instance.scanOrEnterBarcode">
                     {placeholder => {
                       const key = values.keyOfInstanceIdField ?? 0;
@@ -204,19 +207,17 @@ class InstanceInformation extends Component {
                                 onChange={this.handleChange}
                                 onBlur={this.handleBlur(input)}
                                 onKeyDown={this.onKeyDown}
+                                className={css.instanceHridField}
                               />
                             );
                           }}
                         </Field>
                       );
                     }}
                   </FormattedMessage>
-                </Col>
-                <Col xs={3}>
                   <Button
-                    buttonStyle="primary noRadius"
+                    buttonStyle="default"
                     buttonClass={css.enterButton}
-                    fullWidth
                     onClick={this.handleClick}
                     disabled={submitting}
                   >

diff --git a/src/deprecated/components/ItemInformation/ItemInformation.css b/src/deprecated/components/ItemInformation/ItemInformation.css
@@ -1,3 +1,12 @@
+.fieldWrapper {
+  display: flex;
+  align-items: start;
+}
+
+.itemBarcodeField {
+  margin-right: 20px;
+}
+
 .enterButton {
   margin-top: 25px;
 }
diff --git a/src/deprecated/components/ItemInformation/ItemInformation.js b/src/deprecated/components/ItemInformation/ItemInformation.js
@@ -178,7 +178,10 @@ class ItemInformation extends Component {
           {
             !isEditForm &&
             <Row>
-              <Col xs={9}>
+              <Col
+                xs={12}
+                className={css.fieldWrapper}
+              >
                 <FormattedMessage id="ui-requests.item.scanOrEnterBarcode">
                   {placeholder => {
                     const key = values.keyOfItemBarcodeField ?? 0;
@@ -206,20 +209,18 @@ class ItemInformation extends Component {
                               onChange={this.handleChange}
                               onBlur={this.handleBlur(input)}
                               onKeyDown={this.onKeyDown}
+                              className={css.itemBarcodeField}
                             />
                           );
                         }}
                       </Field>
                     );
                   }}
                 </FormattedMessage>
-              </Col>
-              <Col xs={3}>
                 <Button
                   id="clickable-select-item"
-                  buttonStyle="primary noRadius"
+                  buttonStyle="default"
                   buttonClass={css.enterButton}
-                  fullWidth
                   onClick={this.handleClick}
                   disabled={submitting}
                 >

diff --git a/src/requests.css b/src/requests.css
@@ -26,7 +26,3 @@
   margin-bottom: 0.5em;
   user-select: none;
 }
-
-.enterButton {
-  margin-top: 25px;
-}