Skip to content

Conversation

@rexmac
Copy link
Contributor

@rexmac rexmac commented Sep 6, 2019

WHY are these changes introduced?

Fixes #2086.

WHAT is this pull request doing?

Adds display: block style to Tabs .DisclosureActivator to match the styling of .Tab and fix the vertical alignment issue.

Before

Screen Shot 2019-09-06 at 12 19 24

After

Screen Shot 2019-09-06 at 12 19 11

How to 🎩

Copy-paste this code in playground/Playground.tsx:
import React from 'react';
import {Card, Page, Tabs} from '../src';

export function Playground() {
  const [selected, setSelected] = React.useState(0);
  const tabs = [
    {
      id: 'alpha',
      content: 'Alpha',
    },
    {
      id: 'bravo',
      content: 'Bravo',
    },
    {
      id: 'charlie',
      content: 'Charlie',
    },
    {
      id: 'delta',
      content: 'Delta',
    },
    {
      id: 'echo',
      content: 'Echo',
    },
    {
      id: 'foxtrot',
      content: 'Foxtrot',
    },
    {
      id: 'golf',
      content: 'Golf',
    },
    {
      id: 'hotel',
      content: 'Hotel',
    },
    {
      id: 'india',
      content: 'India',
    },
    {
      id: 'juliet',
      content: 'Juliet',
    },
    {
      id: 'kilo',
      content: 'Kilo',
    },
    {
      id: 'lima',
      content: 'Lima',
    },
    {
      id: 'mike',
      content: 'Mike',
    },
  ];

  return (
    <Page title="Playground">
      <Card>
        <Tabs
          tabs={tabs}
          selected={selected}
          onSelect={(selectedTabIndex) => setSelected(selectedTabIndex)}
        >
          <Card.Section title={tabs[selected].content}>
            <p>Tab {selected} selected</p>
          </Card.Section>
        </Tabs>
      </Card>
    </Page>
  );
}

🎩 checklist

@rexmac rexmac marked this pull request as ready for review September 6, 2019 16:19
@rexmac rexmac self-assigned this Sep 6, 2019
Copy link
Member

@chloerice chloerice left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tophat 👀 solid 👍 :shipit:

@rexmac rexmac force-pushed the fix-tab-disclosureactivator-alignment branch from 81cd0e3 to be0da8d Compare September 6, 2019 17:35
Copy link
Contributor

@ry5n ry5n left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Percy flags were either false positives, or show the Tabs issue being resolved. 👍

@rexmac rexmac force-pushed the fix-tab-disclosureactivator-alignment branch from be0da8d to 26cf11c Compare September 9, 2019 13:24
Copy link
Member

@AndrewMusgrave AndrewMusgrave left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM ✅

@rexmac rexmac force-pushed the fix-tab-disclosureactivator-alignment branch from 26cf11c to e7a7f17 Compare September 11, 2019 13:08
@BPScott
Copy link
Member

BPScott commented Sep 11, 2019

Looks like you've got a bunch of extra fluff in your unreleased.md, can you remove that please - you probably branched just before we cut a release

@rexmac rexmac force-pushed the fix-tab-disclosureactivator-alignment branch from e7a7f17 to d6bc597 Compare September 11, 2019 18:30
@rexmac rexmac merged commit 7b7b629 into master Sep 11, 2019
@rexmac rexmac deleted the fix-tab-disclosureactivator-alignment branch September 11, 2019 18:44
@dleroux dleroux temporarily deployed to production September 20, 2019 17:44 Inactive
@dleroux dleroux temporarily deployed to production September 23, 2019 15:28 Inactive
@dleroux dleroux temporarily deployed to production September 23, 2019 15:38 Inactive
@dleroux dleroux temporarily deployed to production September 23, 2019 16:59 Inactive
@dleroux dleroux temporarily deployed to production September 23, 2019 17:05 Inactive
@solutionwin2020
Copy link

Anyone tell me how to make polaris tabs vertical it is horizontal by default and i need this in vertical like in list on both desktop and mobile versions.

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Tabs] Disclosure activator vertical misalignment

7 participants