Skip to content

Adds monochrome styling to connected disclosure and fixes spacing issue #3588

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Oct 30, 2020
Merged

Adds monochrome styling to connected disclosure and fixes spacing issue #3588

merged 1 commit into from
Oct 30, 2020

Conversation

@lucasfrosty
Copy link
Contributor

@lucasfrosty lucasfrosty commented Oct 30, 2020 •
edited
Loading

WHY are these changes introduced?

Fixes #3585

WHAT is this pull request doing?

This problem happens because we add a margin-left 1px, which is only useful for some type of buttons, in some scenarios it creates an unnecessary gap.

Also when making the fix i've realized that monochrome styling were not being applied to the connected disclosure button, leading also to some unexpected behaviour. This was also fixed here.

Tophats

For monochrome outlined button

Before:
Screen Shot 2020-10-30 at 10 47 32 AM

After:
Screen Shot 2020-10-30 at 10 47 17 AM

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx: 
import React from 'react';

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

export function Playground() {
  const secondaryActions = [
    {
      content: 'My secondary action',
    },
  ];

  const cardStuff = (
    <div style={{width: 300}}>
      <Button
        // primary
        destructive
        outline
        // monochrome
        connectedDisclosure={{
          actions: secondaryActions,
        }}
      >
        Test button
      </Button>
    </div>
  );

  return (
    <Page title="Playground">
      <Card sectioned>{cardStuff}</Card>
    </Page>
  );
}

🎩 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
Copy link
Contributor

github-actions bot commented Oct 30, 2020 •
edited
Loading

🟡 This pull request modifies 3 files and might impact 55 other files. This is an average splash zone for a change, remember to tophat areas that could be affected.

Details:
All files potentially affected (total: 55)
📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/Button/Button.scss (total: 55)

Files potentially affected (total: 55)

🧩 src/components/Button/Button.tsx (total: 54)

Files potentially affected (total: 54)

@lucasfrosty lucasfrosty force-pushed the button-connected-disclosure-monochrome-fixes branch from a85836f to e6f3f61 Compare October 30, 2020 13:48
@lucasfrosty lucasfrosty force-pushed the button-connected-disclosure-monochrome-fixes branch from e6f3f61 to 7bf0b62 Compare October 30, 2020 16:21
@lucasfrosty lucasfrosty merged commit 7bece97 into master Oct 30, 2020
@lucasfrosty lucasfrosty deleted the button-connected-disclosure-monochrome-fixes branch October 30, 2020 17:20
sylvhama pushed a commit that referenced this pull request Mar 26, 2021
@lucasfrosty @sylvhama
adds monochrome styling to connected disclosure and fixes spacing iss…
460a813 
…ue (#3588)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@alex-page alex-page alex-page approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Split button (1px gap and missing spinner)

2 participants

@lucasfrosty @alex-page