update styles and tests

folio-org · Dec 11, 2023 · 0996090 · 0996090
1 parent e937164
commit 0996090
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/src/components/BulkEditActionMenu/ActionMenuGroup/ActionMenuGroup.css b/src/components/BulkEditActionMenu/ActionMenuGroup/ActionMenuGroup.css
@@ -5,3 +5,10 @@
 .ActionMenuGroupBody {
     margin-top: -8px;
 }
+
+.ActionMenuColumnSearch {
+    position: sticky;
+    top: 10px;
+    background: var(--bg);
+    z-index: 100
+}
diff --git a/src/components/BulkEditActionMenu/BulkEditActionMenu.js b/src/components/BulkEditActionMenu/BulkEditActionMenu.js
@@ -1,7 +1,6 @@
 import { FormattedMessage, useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { saveAs } from 'file-saver';
-
 import {
   Button,
   Icon,
@@ -11,6 +10,7 @@ import { CheckboxFilter } from '@folio/stripes/smart-components';
 import React, { useContext, useState } from 'react';
 import { Preloader } from '@folio/stripes-data-transfer-components';
 import { useLocation } from 'react-router-dom';
+import css from './ActionMenuGroup/ActionMenuGroup.css';
 import { ActionMenuGroup } from './ActionMenuGroup/ActionMenuGroup';
 import {
   APPROACHES,
@@ -172,10 +172,11 @@ const BulkEditActionMenu = ({
 
     return (
       <>
-        <div style={{ position: 'sticky', top: '10px', backgroundColor: 'white', zIndex: 100 }}>
+        <div className={css.ActionMenuColumnSearch}>
           <TextField
             value={columnSearch}
             onChange={e => setColumnSearch(e.target.value)}
+            aria-label={intl.formatMessage({ id: 'ui-bulk-edit.ariaLabel.columnFilter' })}
           />
         </div>
         <CheckboxFilter

diff --git a/...ponents/BulkEditList/BulkEditListResult/Preview/ElectronicAccessTable/ElectronicAcess.css b/...ponents/BulkEditList/BulkEditListResult/Preview/ElectronicAccessTable/ElectronicAcess.css
@@ -9,6 +9,12 @@
     background-color: #ccc;
 }
 
+.ElectronicAccess th:nth-child(1) { width: 15% }
+.ElectronicAccess th:nth-child(2) { width: 30% }
+.ElectronicAccess th:nth-child(3) { width: 15% }
+.ElectronicAccess th:nth-child(4) { width: 15% }
+.ElectronicAccess th:nth-child(5) { width: 20% }
+
 .ElectronicAccess th, .ElectronicAccess td {
     border: 1px solid var(--color-border-p2);
     padding: var(--gutter-static-one-third) var(--gutter-static-two-thirds);