Skip to content
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

Refactor and simplify Badge css #3950

Merged
merged 1 commit into from
Feb 2, 2021
Merged

Refactor and simplify Badge css #3950

merged 1 commit into from
Feb 2, 2021

Conversation

BPScott
Copy link
Member

@BPScott BPScott commented Jan 30, 2021 •
edited
Loading

WHY are these changes introduced?

I found a way to remove a bit under a quarter of badge's generated css (3031 bytes => 2358bytes) by using a css variable instead of using a mixin

WHAT is this pull request doing?

  • By using a css variable we can remove the usage a mixin that added
    additional selectors
  • Simplify print style for progressPartiallyComplete by using a really
    large spread and an offset to make it look like half of the box has
    been colored in. Thus avoiding needing a pseudo-element
  • Use regular selector chaining instead of nesting

Note that per #3226 we can't simplify so that we always use either background or box-shadow for pips. backgrounds are stripped off in print styles, while box-shadow renders a slight halo on screens (this seems to be due to the pip border radius, rather than the box-shadow itself)

How to 🎩

Check playground. Note that:

  • Colors are still applied as expected
  • Check print styles (chrome gives you a preview when you cmd+p) still shows filled in / half filled in pips for complete / partially complete badges
Copy-paste this code in playground/Playground.tsx: 
import React from 'react';

import {Page, Badge} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <Badge status="success">Hello</Badge>
      <Badge status="info">Hello</Badge>
      <Badge status="attention">Hello</Badge>
      <Badge status="critical">Hello</Badge>
      <Badge status="warning">Hello</Badge>
      <Badge status="new">Hello</Badge>
      <hr />

      <Badge status="success" progress="incomplete">
        Hello
      </Badge>
      <Badge status="info" progress="incomplete">
        Hello
      </Badge>
      <Badge status="attention" progress="incomplete">
        Hello
      </Badge>
      <Badge status="critical" progress="incomplete">
        Hello
      </Badge>
      <Badge status="warning" progress="incomplete">
        Hello
      </Badge>
      <Badge status="new" progress="incomplete">
        Hello
      </Badge>
      <hr />

      <Badge status="success" progress="partiallyComplete">
        Hello
      </Badge>
      <Badge status="info" progress="partiallyComplete">
        Hello
      </Badge>
      <Badge status="attention" progress="partiallyComplete">
        Hello
      </Badge>
      <Badge status="critical" progress="partiallyComplete">
        Hello
      </Badge>
      <Badge status="warning" progress="partiallyComplete">
        Hello
      </Badge>
      <Badge status="new" progress="partiallyComplete">
        Hello
      </Badge>
      <hr />

      <Badge status="success" progress="complete">
        Hello
      </Badge>
      <Badge status="info" progress="complete">
        Hello
      </Badge>
      <Badge status="attention" progress="complete">
        Hello
      </Badge>
      <Badge status="critical" progress="complete">
        Hello
      </Badge>
      <Badge status="warning" progress="complete">
        Hello
      </Badge>
      <Badge status="new" progress="complete">
        Hello
      </Badge>

      <hr />
      {/* Add the code you want to test in here */}

      <Badge size="small" status="success">
        Hello
      </Badge>
      <Badge size="small" status="info">
        Hello
      </Badge>
      <Badge size="small" status="attention">
        Hello
      </Badge>
      <Badge size="small" status="critical">
        Hello
      </Badge>
      <Badge size="small" status="warning">
        Hello
      </Badge>
      <Badge size="small" status="new">
        Hello
      </Badge>
      <hr />

      <Badge size="small" status="success" progress="incomplete">
        Hello
      </Badge>
      <Badge size="small" status="info" progress="incomplete">
        Hello
      </Badge>
      <Badge size="small" status="attention" progress="incomplete">
        Hello
      </Badge>
      <Badge size="small" status="critical" progress="incomplete">
        Hello
      </Badge>
      <Badge size="small" status="warning" progress="incomplete">
        Hello
      </Badge>
      <Badge size="small" status="new" progress="incomplete">
        Hello
      </Badge>
      <hr />

      <Badge size="small" status="success" progress="partiallyComplete">
        Hello
      </Badge>
      <Badge size="small" status="info" progress="partiallyComplete">
        Hello
      </Badge>
      <Badge size="small" status="attention" progress="partiallyComplete">
        Hello
      </Badge>
      <Badge size="small" status="critical" progress="partiallyComplete">
        Hello
      </Badge>
      <Badge size="small" status="warning" progress="partiallyComplete">
        Hello
      </Badge>
      <Badge size="small" status="new" progress="partiallyComplete">
        Hello
      </Badge>
      <hr />

      <Badge size="small" status="success" progress="complete">
        Hello
      </Badge>
      <Badge size="small" status="info" progress="complete">
        Hello
      </Badge>
      <Badge size="small" status="attention" progress="complete">
        Hello
      </Badge>
      <Badge size="small" status="critical" progress="complete">
        Hello
      </Badge>
      <Badge size="small" status="warning" progress="complete">
        Hello
      </Badge>
      <Badge size="small" status="new" progress="complete">
        Hello
      </Badge>
    </Page>
  );
}

@BPScott BPScott requested a review from alex-page January 30, 2021 01:34
@github-actions
Copy link
Contributor

github-actions bot commented Jan 30, 2021 •
edited
Loading

🟡 This pull request modifies 2 files and might impact 63 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: 63)
📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/Badge/Badge.scss (total: 63)

Files potentially affected (total: 63)

@BPScott
Refactor and simplify Badge css
e559604 
- By using a css variable we can remove the usage a mixin that added
  additional selectors
- Simplify print style for progressPartiallyComplete by using a really
  large spread and an offset to make it look like half of the box has
  been colored in. Thus avoiding needing a pseudo-element
- Use regular selector chaining instead of nesting
@BPScott BPScott merged commit da4749a into main Feb 2, 2021
@BPScott BPScott deleted the badge-refactor branch February 2, 2021 02:21
This was referenced Mar 18, 2021
Closed
Closed
sylvhama pushed a commit that referenced this pull request Mar 26, 2021
@BPScott @sylvhama
Refactor and simplify Badge css (#3950)
c6848ae 
- By using a css variable we can remove the usage a mixin that added
  additional selectors
- Simplify print style for progressPartiallyComplete by using a really
  large spread and an offset to make it look like half of the box has
  been colored in. Thus avoiding needing a pseudo-element
- Use regular selector chaining instead of nesting
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.
2 participants
@BPScott @alex-page