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(Badge): updated Badge variants' color names #2793

Merged
merged 8 commits into from
Oct 24, 2023
Merged

refactor(Badge): updated Badge variants' color names #2793

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5b43d47
updated badges stories and index.tsx
LinKCoding Oct 2, 2023
d54cdc5
save changes to stories
LinKCoding Oct 10, 2023
6f64f89
Merge branch 'main' into kl-web-2446
LinKCoding Oct 10, 2023
88333a2
removed strokeContrast
LinKCoding Oct 10, 2023
21a8e15
Merge branch 'main' into kl-web-2446
LinKCoding Oct 16, 2023
a715f9d
fixed trailing comma
LinKCoding Oct 19, 2023
47787b0
update lingering old named variants
LinKCoding Oct 19, 2023
703bf07
ran prettier
LinKCoding Oct 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 5 additions & 11 deletions packages/gamut/src/Badge/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { StyleProps, variance } from '@codecademy/variance';
import styled from '@emotion/styled';

const colorVariants = variant({
defaultVariant: 'default',
defaultVariant: 'primary',
base: {
alignItems: 'center',
borderRadius: '40px',
Expand All @@ -16,30 +16,24 @@ const colorVariants = variant({
whiteSpace: 'nowrap',
},
variants: {
default: {
primary: {
bg: `text`,
textColor: 'background',
},
yellow: {
accent: {
bg: 'yellow',
textColor: 'navy',
},
grey: {
secondary: {
bg: `text-disabled`,
textColor: 'white',
},
stroke: {
tertiary: {
border: 1,
borderColor: 'text-disabled',
color: 'text-disabled',
bg: 'transparent',
},
strokeContrast: {
border: 1,
borderColor: 'text',
color: 'text',
bg: 'transparent',
},
},
});

Expand Down
28 changes: 15 additions & 13 deletions packages/styleguide/stories/Atoms/Badge.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ import LinkTo from '@storybook/addon-links/react';
'Badges are generally used as a standard way to highlight a short piece of text, likely a single word.',
status: 'updating',
source: 'gamut',
design: {
type: 'figma',
url:
'https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?type=design&node-id=60-3&mode=design&t=aRabEpDXVTIQicAe-0',
},
}}
/>

Expand All @@ -30,27 +35,24 @@ export const BadgeTemplate = (args) => (

## Variants

We support the following variants of Badges: `default`, `grey`, `stroke`, `strokeContrast`, and `yellow`.
We support the following variants of Badges: `primary`, `secondary`, `tertiary`, and `accent`.

- **Greyscale Badges** provide different levels of priority for the `default` (primary), `grey` (secondary), and `stroke` (tertiary) variants
- **Accent colors** like `yellow` are meant to be used sparingly so they can stand out against other elements.
- **Greyscale Badges** provide different levels of priority for the `primary`, `secondary`, and `tertiary` variants.
- **Accent colors** like `accent` are meant to be used sparingly so they can stand out against other elements.

Additional variants should designed with both <LinkTo kind='Foundations/ColorMode'>ColorModes</LinkTo> in mind. For example, the `yellow` and `grey` variants work against both light and dark backgrounds, while the `default` and `stroke` variants both adapt to their ColorMode (which you can check out by using the toolbar at the top of this page!)
Additional variants should designed with both <LinkTo kind='Foundations/ColorMode'>ColorModes</LinkTo> in mind. For example, the `accent` and `secondary` variants work against both light and dark backgrounds, while the `primary` and `tertiary` variants both adapt to their ColorMode (which you can check out by using the toolbar at the top of this page!)

<Canvas>
<Story name="default" args={{ children: 'default' }}>
<Story name="primary" args={{ children: 'primary' }}>
{BadgeTemplate.bind({})}
</Story>
<Story name="grey" args={{ variant: 'grey' }}>
<Story name="secondary" args={{ variant: 'secondary' }}>
{BadgeTemplate.bind({})}
</Story>
<Story name="stroke" args={{ variant: 'stroke' }}>
<Story name="tertiary" args={{ variant: 'tertiary' }}>
{BadgeTemplate.bind({})}
</Story>
<Story name="strokeContrast" args={{ variant: 'strokeContrast' }}>
{BadgeTemplate.bind({})}
</Story>
<Story name="yellow" args={{ variant: 'yellow' }}>
<Story name="accent" args={{ variant: 'accent' }}>
{BadgeTemplate.bind({})}
</Story>
</Canvas>
Expand All @@ -59,13 +61,13 @@ Additional variants should designed with both <LinkTo kind='Foundations/ColorMod

We have two `size` options, which should be used according to their context:

- Use `default` when the `Badge` is a standalone entitity
- Use `primary` when the `Badge` is a standalone entitity
- Use `sm` when the `Badge` is inline with other components such as <LinkTo kind='Typography/Text'>Text</LinkTo>

<Canvas>
<Story
name="default size"
args={{ variant: 'stroke', children: 'default size' }}
args={{ variant: 'tertiary', children: 'default size' }}
>
{BadgeTemplate.bind({})}
</Story>
Expand Down
Loading