chore: enable correct sizing with asymmetric layouts

Author: mrcthms

polaris-react/src/components/BulkActions/BulkActions.scss

@@ -11,7 +11,8 @@ $bulk-actions-button-stacking-order: (
   align-items: center;
   flex-wrap: wrap;
   opacity: 0;
-  width: 90vw;
+  // width: 90vw;
+  width: 100%;
   justify-content: center;
   transition: var(--p-duration-250) var(--p-ease-in);
   transform: translateY(120px);

polaris-react/src/components/BulkActions/BulkActions.tsx

@@ -1,5 +1,5 @@
 import React, {PureComponent, createRef} from 'react';
-import {TransitionGroup, CSSTransition} from 'react-transition-group';
+import {Transition} from 'react-transition-group';
 
 import {debounce} from '../../utilities/debounce';
 import {classNames} from '../../utilities/css';
@@ -43,6 +43,8 @@ export interface BulkActionsProps {
   onMoreActionPopoverToggle?(isOpen: boolean): void;
   /** If the BulkActions is currently sticky in view */
   isSticky?: boolean;
+  /** The width of the BulkActions */
+  width: number;
 }
 
 type CombinedProps = BulkActionsProps & {
@@ -190,7 +192,8 @@ class BulkActionsInner extends PureComponent<CombinedProps, State> {
 
   // eslint-disable-next-line @typescript-eslint/member-ordering
   render() {
-    const {selectMode, disabled, promotedActions, i18n, isSticky} = this.props;
+    const {selectMode, disabled, promotedActions, i18n, isSticky, width} =
+      this.props;
 
     const actionSections = this.actionSections();
 
@@ -296,34 +299,36 @@ class BulkActionsInner extends PureComponent<CombinedProps, State> {
     }
 
     const group = (
-      <TransitionGroup>
-        <CSSTransition
-          timeout={250}
-          in={selectMode}
-          key="group"
-          nodeRef={this.groupNode}
-        >
-          {(status: TransitionStatus) => {
-            const groupClassName = classNames(
-              styles.Group,
-              !isSticky && styles['Group-not-sticky'],
-              !measuring && isSticky && styles[`Group-${status}`],
-              measuring && styles['Group-measuring'],
-            );
-            return (
-              <div className={groupClassName} ref={this.groupNode}>
-                <EventListener event="resize" handler={this.handleResize} />
-                <div
-                  className={styles.ButtonGroupWrapper}
-                  ref={this.setButtonsNode}
-                >
-                  {groupContent}
-                </div>
+      <Transition
+        timeout={250}
+        in={selectMode}
+        key="group"
+        nodeRef={this.groupNode}
+      >
+        {(status: TransitionStatus) => {
+          const groupClassName = classNames(
+            styles.Group,
+            !isSticky && styles['Group-not-sticky'],
+            !measuring && isSticky && styles[`Group-${status}`],
+            measuring && styles['Group-measuring'],
+          );
+          return (
+            <div
+              className={groupClassName}
+              ref={this.groupNode}
+              style={{width}}
+            >
+              <EventListener event="resize" handler={this.handleResize} />
+              <div
+                className={styles.ButtonGroupWrapper}
+                ref={this.setButtonsNode}
+              >
+                {groupContent}
               </div>
-            );
-          }}
-        </CSSTransition>
-      </TransitionGroup>
+            </div>
+          );
+        }}
+      </Transition>
     );
 
     return <div ref={this.setContainerNode}>{group}</div>;

polaris-react/src/components/BulkActions/hooks/tests/use-is-bulk-actions-sticky.test.tsx

@@ -14,12 +14,16 @@ function Component({selectMode}: ComponentProps) {
     tableMeasurerRef,
     isBulkActionsSticky,
     bulkActionsAbsoluteOffset,
+    bulkActionsMaxWidth,
+    bulkActionsOffsetLeft,
   } = useIsBulkActionsSticky(selectMode);
 
   return (
     <div className="table" ref={tableMeasurerRef}>
       <p className="sticky">{isBulkActionsSticky ? 'true' : 'false'}</p>
       <span className="offset">{bulkActionsAbsoluteOffset}</span>
+      <span className="width">{bulkActionsMaxWidth}</span>
+      <span className="left">{bulkActionsOffsetLeft}</span>
       <em style={{height: 400}} />
       <i className="intersection" ref={bulkActionsIntersectionRef} />
     </div>
@@ -34,7 +38,11 @@ describe('useIsBulkActionsSticky', () => {
       Element.prototype,
       'getBoundingClientRect',
     );
-    setGetBoundingClientRect(400);
+    setGetBoundingClientRect({
+      width: 600,
+      height: 400,
+      left: 20,
+    });
 
     intersectionObserver.mock();
   });
@@ -47,15 +55,27 @@ describe('useIsBulkActionsSticky', () => {
   describe('when measuring', () => {
     it('returns the offset correctly when select mode is false', () => {
       const component = mountWithApp(<Component selectMode={false} />);
-      const result = component.find('span')?.text();
+      const result = component.findAll('span')[0]?.text();
       expect(result).toBe('400');
     });
 
     it('returns the offset correctly when select mode is true', () => {
       const component = mountWithApp(<Component selectMode />);
-      const result = component.find('span')?.text();
+      const result = component.findAll('span')[0]?.text();
       expect(result).toBe('300');
     });
+
+    it('returns the width value correctly', () => {
+      const component = mountWithApp(<Component selectMode />);
+      const result = component.findAll('span')[1]?.text();
+      expect(result).toBe('600');
+    });
+
+    it('returns the left value correctly', () => {
+      const component = mountWithApp(<Component selectMode />);
+      const result = component.findAll('span')[2]?.text();
+      expect(result).toBe('20');
+    });
   });
 
   describe('when isIntersecting', () => {
@@ -94,13 +114,21 @@ describe('useIsBulkActionsSticky', () => {
     });
   });
 
-  function setGetBoundingClientRect(height: number) {
+  function setGetBoundingClientRect({
+    width,
+    height,
+    left,
+  }: {
+    width: number;
+    height: number;
+    left: number;
+  }) {
     getBoundingClientRectSpy.mockImplementation(() => {
       return {
         height,
-        width: 0,
+        width,
         top: 0,
-        left: 0,
+        left,
         bottom: 0,
         right: 0,
         x: 0,

polaris-react/src/components/BulkActions/hooks/use-is-bulk-actions-sticky.ts

@@ -9,29 +9,46 @@ const PADDING_IN_SELECT_MODE = 100;
 export function useIsBulkActionsSticky(selectMode: boolean) {
   const [isBulkActionsSticky, setIsSticky] = useState(false);
   const [bulkActionsAbsoluteOffset, setBulkActionsAbsoluteOffset] = useState(0);
+  const [bulkActionsMaxWidth, setBulkActionsMaxWidth] = useState(0);
+  const [bulkActionsOffsetLeft, setBulkActionsOffsetLeft] = useState(0);
   const bulkActionsIntersectionRef = useRef<HTMLDivElement>(null);
   const tableMeasurerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    function computeTableHeight() {
+    function computeTableDimensions() {
       const node = tableMeasurerRef.current;
       if (!node) {
-        return 0;
+        return {
+          maxWidth: 0,
+          offsetHeight: 0,
+          offsetLeft: 0,
+        };
       }
+      const box = node.getBoundingClientRect();
       const paddingHeight = selectMode ? PADDING_IN_SELECT_MODE : 0;
-      return node.getBoundingClientRect().height - paddingHeight;
+      const offsetHeight = box.height - paddingHeight;
+      const maxWidth = box.width;
+      const offsetLeft = box.left;
+
+      return {
+        offsetHeight,
+        offsetLeft,
+        maxWidth,
+      };
     }
-    const tableHeight = computeTableHeight();
+    const {offsetHeight, offsetLeft, maxWidth} = computeTableDimensions();
 
     const debouncedComputeTableHeight = debounce(
-      computeTableHeight,
+      computeTableDimensions,
       DEBOUNCE_PERIOD,
       {
         trailing: true,
       },
     );
 
-    setBulkActionsAbsoluteOffset(tableHeight);
+    setBulkActionsAbsoluteOffset(offsetHeight);
+    setBulkActionsMaxWidth(maxWidth);
+    setBulkActionsOffsetLeft(offsetLeft);
 
     window.addEventListener('resize', debouncedComputeTableHeight);
 
@@ -73,5 +90,7 @@ export function useIsBulkActionsSticky(selectMode: boolean) {
     tableMeasurerRef,
     isBulkActionsSticky,
     bulkActionsAbsoluteOffset,
+    bulkActionsMaxWidth,
+    bulkActionsOffsetLeft,
   };
 }

polaris-react/src/components/IndexTable/IndexTable.tsx

@@ -169,6 +169,8 @@ function IndexTableBase({
     tableMeasurerRef,
     isBulkActionsSticky,
     bulkActionsAbsoluteOffset,
+    bulkActionsMaxWidth,
+    bulkActionsOffsetLeft,
   } = useIsBulkActionsSticky(selectMode);
 
   const tableBodyRef = useCallback(
@@ -553,6 +555,8 @@ function IndexTableBase({
       data-condensed={condensed}
       style={{
         top: isBulkActionsSticky ? undefined : bulkActionsAbsoluteOffset,
+        width: bulkActionsMaxWidth,
+        left: isBulkActionsSticky ? bulkActionsOffsetLeft : undefined,
       }}
     >
       {loadingMarkup}
@@ -563,6 +567,7 @@ function IndexTableBase({
         actions={actions}
         onSelectModeToggle={condensed ? handleSelectModeToggle : undefined}
         isSticky={isBulkActionsSticky}
+        width={bulkActionsMaxWidth}
       />
     </div>
   ) : null;

polaris-react/src/components/ResourceList/ResourceList.scss

@@ -32,7 +32,6 @@ $breakpoints-empty-search-results-height-up: '(min-height: #{breakpoint(600px)})
   position: relative;
   background-color: var(--p-surface);
   z-index: resource-list(header-outer-wrapper-stacking-order);
-  overflow: hidden;
   border-top-left-radius: var(--p-border-radius-2);
   border-top-right-radius: var(--p-border-radius-2);
 

polaris-react/src/components/ResourceList/ResourceList.tsx

@@ -171,6 +171,8 @@ export const ResourceList: ResourceListType = function ResourceList<TItemType>({
     tableMeasurerRef,
     isBulkActionsSticky,
     bulkActionsAbsoluteOffset,
+    bulkActionsMaxWidth,
+    bulkActionsOffsetLeft,
   } = useIsBulkActionsSticky(selectMode);
 
   const defaultResourceName = useLazyRef(() => ({
@@ -572,6 +574,8 @@ export const ResourceList: ResourceListType = function ResourceList<TItemType>({
       className={bulkActionClassNames}
       style={{
         top: isBulkActionsSticky ? undefined : bulkActionsAbsoluteOffset,
+        width: bulkActionsMaxWidth,
+        left: isBulkActionsSticky ? bulkActionsOffsetLeft : undefined,
       }}
     >
       <BulkActions
@@ -580,6 +584,8 @@ export const ResourceList: ResourceListType = function ResourceList<TItemType>({
         promotedActions={promotedBulkActions}
         actions={bulkActions}
         disabled={loading}
+        isSticky={isBulkActionsSticky}
+        width={bulkActionsMaxWidth}
       />
     </div>
   ) : null;