Avoid annotation buttons from overflowing the card

Author: acelaya

src/sidebar/components/Annotation/AnnotationPublishControl.tsx

@@ -7,10 +7,12 @@ import {
   MenuExpandIcon,
 } from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
+import { useRef } from 'preact/hooks';
 
 import type { Group } from '../../../types/api';
 import type { SidebarSettings } from '../../../types/config';
 import { applyTheme } from '../../helpers/theme';
+import { useIsContentTruncated } from '../../hooks/use-is-content-truncated';
 import { withServices } from '../../service-context';
 import Menu from '../Menu';
 import MenuItem from '../MenuItem';
@@ -71,22 +73,31 @@ function AnnotationPublishControl({
     </div>
   );
 
+  const postButtonText = `Post to ${isPrivate ? 'Only Me' : group.name}`;
+  const postButtonRef = useRef<HTMLButtonElement | null>(null);
+  const isButtonContentTruncated = useIsContentTruncated(postButtonRef);
+
   return (
     <div className="flex flex-row gap-x-3">
-      <div className="flex relative">
+      <div className="flex relative max-w-full min-w-0">
         <Button
           classes={classnames(
             // Turn off right-side border radius to align with menu-open button
             'rounded-r-none',
+            // Truncate text in this button. It also requires overwriting its
+            // `display` property from flex to block
+            'truncate !block',
           )}
           data-testid="publish-control-button"
           style={buttonStyle}
           onClick={onSave}
           disabled={isDisabled}
           size="lg"
           variant="primary"
+          title={isButtonContentTruncated ? postButtonText : undefined}
+          elementRef={postButtonRef}
         >
-          Post to {isPrivate ? 'Only Me' : group.name}
+          {postButtonText}
         </Button>
         {/* This wrapper div is necessary because of peculiarities with
              Safari: see https://github.com/hypothesis/client/issues/2302 */}

src/sidebar/components/Annotation/test/AnnotationPublishControl-test.js

@@ -8,6 +8,7 @@ import {
   mockImportedComponents,
 } from '@hypothesis/frontend-testing';
 import { mount } from '@hypothesis/frontend-testing';
+import sinon from 'sinon';
 
 import AnnotationPublishControl, {
   $imports,
@@ -17,6 +18,7 @@ describe('AnnotationPublishControl', () => {
   let fakeGroup;
   let fakeSettings;
   let fakeApplyTheme;
+  let fakeUseIsContentTruncated;
 
   let fakeOnSave;
   let fakeOnCancel;
@@ -54,12 +56,16 @@ describe('AnnotationPublishControl', () => {
     };
 
     fakeApplyTheme = sinon.stub();
+    fakeUseIsContentTruncated = sinon.stub().returns(false);
 
     $imports.$mock(mockImportedComponents());
     $imports.$mock({
       '../../helpers/theme': {
         applyTheme: fakeApplyTheme,
       },
+      '../../hooks/use-is-content-truncated': {
+        useIsContentTruncated: fakeUseIsContentTruncated,
+      },
     });
   });
 
@@ -202,6 +208,16 @@ describe('AnnotationPublishControl', () => {
     });
   });
 
+  [true, false].forEach(isTruncated => {
+    it('adds title to publish button when its content is truncated', () => {
+      fakeUseIsContentTruncated.returns(isTruncated);
+
+      const wrapper = createAnnotationPublishControl();
+
+      assert.equal(!!getPublishButton(wrapper).prop('title'), isTruncated);
+    });
+  });
+
   it(
     'should pass a11y checks',
     checkAccessibility({

src/sidebar/hooks/test/use-is-content-truncated-test.js

@@ -0,0 +1,76 @@
+import { mount } from '@hypothesis/frontend-testing';
+import { useRef } from 'preact/hooks';
+
+import { useIsContentTruncated } from '../use-is-content-truncated';
+
+describe('useIsContentTruncated', () => {
+  function FakeComponent({ children }) {
+    const truncatedElementRef = useRef(null);
+    const isTruncated = useIsContentTruncated(truncatedElementRef);
+
+    return (
+      <div data-testid="container">
+        <div
+          style={{ width: '100px', maxWidth: '100%' }}
+          className="truncate"
+          ref={truncatedElementRef}
+        >
+          {children}
+        </div>
+        <div data-testid="is-truncated">{isTruncated ? 'Yes' : 'No'}</div>
+      </div>
+    );
+  }
+
+  function createComponent(content) {
+    return mount(<FakeComponent>{content}</FakeComponent>, { connected: true });
+  }
+
+  function isTruncated(wrapper) {
+    return wrapper.find('[data-testid="is-truncated"]').text() === 'Yes';
+  }
+
+  function waitForResize(element) {
+    return new Promise(resolve => {
+      const observer = new ResizeObserver(() => {
+        observer.disconnect();
+        resolve();
+      });
+      observer.observe(element);
+    });
+  }
+
+  [
+    {
+      content: 'foo',
+      shouldBeTruncated: false,
+    },
+    {
+      content: 'foo'.repeat(1000),
+      shouldBeTruncated: true,
+    },
+  ].forEach(({ content, shouldBeTruncated }) => {
+    it('checks if content is truncated once mounted', () => {
+      const wrapper = createComponent(content);
+      assert.equal(isTruncated(wrapper), shouldBeTruncated);
+    });
+  });
+
+  it('checks if content is truncated when resized', async () => {
+    const wrapper = createComponent('some content');
+
+    // Content is initially not truncated
+    assert.isFalse(isTruncated(wrapper));
+
+    // When we resize the container to make it smaller, the content gets
+    // truncated
+    const container = wrapper.find('[data-testid="container"]').getDOMNode();
+    const resizePromise = waitForResize(container);
+    container.style.width = '10px';
+
+    await resizePromise;
+    wrapper.update();
+
+    assert.isTrue(isTruncated(wrapper));
+  });
+});

src/sidebar/hooks/use-is-content-truncated.ts

@@ -0,0 +1,34 @@
+import type { RefObject } from 'preact';
+import { useEffect, useState } from 'preact/hooks';
+
+/**
+ * Determines if the content of an element is truncated.
+ *
+ * Useful to use with elements with hidden overflow and ellipsis text-overflow,
+ * to know if the content is truncated and the ellipsis is being shown.
+ */
+export function useIsContentTruncated(
+  elementRef: RefObject<HTMLElement | null>,
+) {
+  const [isTruncated, setIsTruncated] = useState<boolean>(false);
+  useEffect(() => {
+    const buttonEl = elementRef.current;
+    /* istanbul ignore next */
+    if (!buttonEl) {
+      return () => {};
+    }
+
+    const isTruncated = () =>
+      setIsTruncated(buttonEl.scrollWidth > buttonEl.clientWidth);
+
+    // Check immediately if the element's content is truncated, and then again
+    // every time it is resized
+    isTruncated();
+    const observer = new ResizeObserver(isTruncated);
+    observer.observe(buttonEl);
+
+    return () => observer.disconnect();
+  }, [elementRef]);
+
+  return isTruncated;
+}