[Tabs] Tabs wrap on window resize (#3976)

[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

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[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]

Looks like you cloned the repo and opened this in your personal GH. Can you open this PR against Shopify/polaris-react directly? It saves us time in tophatting and won't hang on some of the CI checks

[lhoffbeck]

@kyledurand Ahh I was following the advice of that linked egghead tutorial from the contributions page, I'll close this out and reopen against Shopify/polaris-react in a sec. Thanks!

[lhoffbeck]

Reopened against shopifyShopify/polaris-react here: #3980