Skip to content

Conversation

@alex-page
Copy link
Member

@alex-page alex-page commented Feb 12, 2023

WHY are these changes introduced?

Border tokens are under a category called shape which is not clear to users. All of the values are categorised as ShapeBorder so removing Shape simplifies this category. The tokens also have confusing legacy aliases which breaks the scale.

WHAT is this pull request doing?

  • Remove border-radius-base
  • Remove border-radius-large
  • Replace border-radius-half
  • Rename token group Shape to Border
  • Fail linter when there is usage of border-radius-base border-radius-large and border-radius-half
  • Replace shape tokens page with border on polaris.shopify.com

@alex-page alex-page changed the title Radii breaking change Rename Shape to Border and remove border radius alias Feb 12, 2023
@alex-page alex-page changed the base branch from main to v11-major February 12, 2023 22:09
@alex-page alex-page changed the title Rename Shape to Border and remove border radius alias Rename Shape to Border and remove legacy border radius alias values Feb 12, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Feb 13, 2023

size-limit report 📦

Path Size
polaris-react-cjs 216.01 KB (-0.03% 🔽)
polaris-react-esm 138.91 KB (-0.02% 🔽)
polaris-react-esnext 194.09 KB (-0.03% 🔽)
polaris-react-css 41.92 KB (-0.05% 🔽)

@alex-page alex-page self-assigned this Feb 13, 2023
@alex-page alex-page marked this pull request as ready for review February 14, 2023 02:23
Copy link
Contributor

@lgriffee lgriffee left a comment

Choose a reason for hiding this comment

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

LGTM! 🚢✨💯 Only thought would be to include an entry in documentation/guides/migrating-from-v10-to-v11.md about this change as well.

}: AlphaCardProps) => {
const breakpoints = useBreakpoints();
const defaultBorderRadius = '2' as ShapeBorderRadiusScale;
const defaultBorderRadius = '2' as BorderRadiusScale;
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
const defaultBorderRadius = '2' as BorderRadiusScale;
const defaultBorderRadius: BorderRadiusScale = '2';

Also, can we move this value outside the body of the function?

shapeBorderRadiusScale,
shapeBorderRadiusAlias,
} from '../../src/token-groups/shape';
import {border, borderRadiusScale} from '../../src/token-groups/border';
Copy link
Member

Choose a reason for hiding this comment

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

Reminder to rename the file as well

Comment on lines +307 to +309
/--p-border-radius-base/,
/--p-border-radius-large/,
/--p-border-radius-half/,
Copy link
Contributor

Choose a reason for hiding this comment

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

If we are removing these tokens won't they get flagged? Is this needed? Mentioning this to @aaronccasanova earlier and was just starting to chat about it. Following up on that convo here.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yes. Removing these tokens is a bit weird to add them to the linter. The reason I think we should do this is to encourage people to use the latest version and use the tokens as intended. At some point in the future this can definitely be removed.

@lgriffee
Copy link
Contributor

LGTM! 🚢✨💯 Only thought would be to include an entry in documentation/guides/migrating-from-v10-to-v11.md about this change as well.

I'm working on documentation for removing tokens on another branch. If you follow this format below for the token removal portion of the documentation then it should avoid conflicts. No worries though if another way makes more sense! And I assume you'll also be creating another section talking about the token grouping rename so no worries if it breaks the format below.

## Tokens

The following tokens have either been renamed or removed. You will need to replace any instances of them with their new name or value equivalents.

| Deprecated Token          | Replacement Value        |
| ------------------------- | ------------------------ |
| `--p-border-radius-base`  | `--p-border-radius-1`    |
| `--p-border-radius-large` | `--p-border-radius-2`    |
| `--p-border-radius-half`  | `--p-border-radius-full` |

@alex-page alex-page closed this Apr 11, 2023
@alex-page alex-page deleted the radii-breaking-change branch November 27, 2023 03:21
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.

3 participants