[Tabs] Tabs wrap on window resize

[lhoffbeck]

WHY are these changes introduced?

Fixes #3976

The Tabs component (and specifically the TabsMeasurer) currently doesn't take into account what happens when tab widths aren't integers. This can result in the "disclosure tab" (the ... overflow button) being wrapped to the next line.

WHAT is this pull request doing?

This PR rounds up the tab width values and adds equality to the comparison check in Tabs/utilities.ts when determining whether a tab should be wrapped, with the end result being that tabs are hidden 1px sooner but the disclosure tab isn't wrapped.

before

after

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React, {useCallback, useState} from 'react';

import {Page, Card, Tabs} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <TabsExample />
    </Page>
  );
}

function TabsExample() {
  const [selected, setSelected] = useState(0);

  const handleTabChange = useCallback(
    (selectedTabIndex) => setSelected(selectedTabIndex),
    [],
  );

  const tabs = [
    {
      id: 'all-customers-1',
      content: 'All',
      accessibilityLabel: 'All customers',
      panelID: 'all-customers-content-1',
    },
    {
      id: 'accepts-marketing-1',
      content: 'Accepts marketing',
      panelID: 'accepts-marketing-content-1',
    },
    {
      id: 'repeat-customers-1',
      content: 'Repeat customers',
      panelID: 'repeat-customers-content-1',
    },
    {
      id: 'prospects-1',
      content: 'Prospects',
      panelID: 'prospects-content-1',
    },
  ];

  return (
    <Card>
      <Tabs tabs={tabs} selected={selected} onSelect={handleTabChange}>
        <Card.Section title={tabs[selected].content}>
          <p>Tab {selected} selected</p>
        </Card.Section>
      </Tabs>
    </Card>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

🟢 This pull request modifies 3 files and might impact 1 other files.

Details:

All files potentially affected (total: 1)

• /src/components/Tabs/Tabs.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🧩 src/components/Tabs/components/TabMeasurer/TabMeasurer.tsx (total: 1)

Files potentially affected (total: 1)

• /src/components/Tabs/Tabs.tsx

🧩 src/components/Tabs/utilities.ts (total: 1)

Files potentially affected (total: 1)

• /src/components/Tabs/Tabs.tsx

[kyledurand]

Code looks good to me. Thanks for looking into this 👏