ENH Improve hover active and focus state styling

silverstripe · Jan 26, 2024 · 9be6397 · 9be6397
1 parent 7e077dc
commit 9be6397
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 11 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/LinkField/LinkField.scss b/client/src/components/LinkField/LinkField.scss
@@ -20,3 +20,13 @@
 .link-field__save-record-first {
   padding-top: 7px;
 }
+
+.link-field__container .btn-link {
+  position: absolute;
+  right: 0;
+
+  &:focus,
+  &:not(:disabled):not(.disabled):active {
+    box-shadow: none;
+  }
+}
diff --git a/client/src/components/LinkPicker/LinkPicker.scss b/client/src/components/LinkPicker/LinkPicker.scss
@@ -86,7 +86,7 @@
   }
 
   &--draft::before {
-    background-color: $state-draft-bg;;
+    background-color: $state-draft-bg;
   }
 
   &--modified::before {

diff --git a/client/src/components/LinkPicker/LinkPickerMenu.js b/client/src/components/LinkPicker/LinkPickerMenu.js
@@ -17,7 +17,7 @@ const LinkPickerMenu = ({ types, onSelect }) => {
     toggle={toggle}
     className="link-picker__menu"
   >
-      <DropdownToggle className="link-picker__menu-toggle font-icon-plus-1" caret>
+      <DropdownToggle className="link-picker__menu-toggle font-icon-plus-1" caret color="secondary">
         {i18n._t('LinkField.ADD_LINK', 'Add Link')}
       </DropdownToggle>
       <DropdownMenu>

diff --git a/client/src/components/LinkPicker/LinkPickerTitle.js b/client/src/components/LinkPicker/LinkPickerTitle.js
@@ -95,10 +95,10 @@ const LinkPickerTitle = ({
           <span className="link-picker__url">{description}</span>
         </small>
       </div>
+      {(canDelete && !readonly) &&
+        <span className="link-picker__delete btn btn-link" onClick={stopPropagation(() => !loading ? onDelete(id) : null)}>{deleteText}</span>
+      }
     </Button>
-    {(canDelete && !readonly) &&
-      <Button disabled={loading} className="link-picker__delete" color="link" onClick={stopPropagation(() => onDelete(id))}>{deleteText}</Button>
-    }
   </div>
 };
 

diff --git a/client/src/components/LinkPicker/tests/LinkPickerTitle-test.js b/client/src/components/LinkPicker/tests/LinkPickerTitle-test.js
@@ -57,7 +57,7 @@ test('LinkPickerTitle delete button should fire the onDelete callback when not l
     })}
     />
   </LinkFieldContext.Provider>);
-  fireEvent.click(container.querySelector('button.link-picker__delete'));
+  fireEvent.click(container.querySelector('.link-picker__delete'));
   expect(mockOnDelete).toHaveBeenCalledTimes(1);
 });
 
@@ -70,7 +70,7 @@ test('LinkPickerTitle delete button should not fire the onDelete callback while
     })}
     />
   </LinkFieldContext.Provider>);
-  fireEvent.click(container.querySelector('button.link-picker__delete'));
+  fireEvent.click(container.querySelector('.link-picker__delete'));
   expect(mockOnDelete).toHaveBeenCalledTimes(0);
 });
 
@@ -79,7 +79,7 @@ test('LinkPickerTitle main button should fire the onClick callback when not load
   const { container } = render(<LinkFieldContext.Provider value={{ loading: false }}>
     <LinkPickerTitle {...makeProps({ onClick: mockOnClick })} />
   </LinkFieldContext.Provider>);
-  fireEvent.click(container.querySelector('button.link-picker__button'));
+  fireEvent.click(container.querySelector('.link-picker__button'));
   expect(mockOnClick).toHaveBeenCalledTimes(1);
 });
 
@@ -88,7 +88,7 @@ test('LinkPickerTitle main button should not fire the onClick callback while loa
   const { container } = render(<LinkFieldContext.Provider value={{ loading: true }}>
     <LinkPickerTitle {...makeProps({ onClick: mockOnClick })} />
   </LinkFieldContext.Provider>);
-  fireEvent.click(container.querySelector('button.link-picker__button'));
+  fireEvent.click(container.querySelector('.link-picker__button'));
   expect(mockOnClick).toHaveBeenCalledTimes(0);
 });