v11.x.x updates to Badge

[yurm04]

WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-summer-editions/issues/23

WHAT is this pull request doing?

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </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

[sophschneider]

🙌 LGTM! just left a comment about the font weight and custom border radius.

[sophschneider]

changed values from https://www.figma.com/file/jLLkmo9r28hiqPvf4s90E4/Polaris-Uplift-Components-(WIP)?type=design&node-id=367-343&t=8cxXoDCk6TMWWz3G-0

[sophschneider]

@kyledurand @johanstromqvist Badge is ready for review! You can check out the storybook here.

before	after	design

I put all the badges in one story for easy tophatting, I'll revert it after review. There is also an Icon variant that we haven't discussed, but its only used once in the Admin so I don't think its worth coming up for designs/adding logic for summer editions. I created an issue for after editions here.

[sophschneider]

I will revert this mega story after review

[johanstromqvist]

@kyledurand @johanstromqvist Badge is ready for review! You can check out the storybook here.

I put all the badges in one story for easy tophatting, I'll revert it after review. There is also an Icon variant that we haven't discussed, but its only used once in the Admin so I don't think its worth coming up for designs/adding logic for summer editions. I created an issue for after editions here.

Beautiful! Love the story and the backlog issue.

Re pip

• What's your take on the pip being css or svg?
• Did you test it one low res screen? I currently don't have access to one.
• Is there a follow up action that needs to be captured in the post SE23 issue?

[johanstromqvist]

💯

[johanstromqvist]

Contrast seemed low, but it passes. I guess merchants typically are scanning for non-fullfilled statuses on the screen anyways.

Quick test using --p-color-text (left) instead of --p-color-text-subdued (right)

[sophschneider]

@johanstromqvist

Did you test it one low res screen? I currently don't have access to one.

No, since im only modifying the border radius and thickness on the pip it should be the same as the old pip. I do have browserstack though if you want to test the whole v11.x.x branch when we do a polish review

What's your take on the pip being css or svg?

I would personally rather use svgs but this is the most minimal change for summer editions. In the follow up PR after editions we can evaluate

Contrast seemed low, but it passes. I guess merchants typically are scanning for non-fullfilled statuses on the screen anyways.

I have similar concerns since subdued text on subdued bg is cutting it really close, but it seems to be a consistent pattern across designs.

Is there a follow up action that needs to be captured in the post SE23 issue?

wdym?

btw im merging this to move fast but feel free to respond on this PR or the original/follow up badge issue