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.

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

[WB-1874] Remove kind prop now that secondary kind is being deprecated #2463

Open
wants to merge 4 commits into
base: link-css-states
Choose a base branch
from

Conversation

jandrade
Copy link
Member

@jandrade jandrade commented Feb 6, 2025

Summary:

Now that we are moving to Polaris, we’ve noticed that the Link.secondary variant
is not used very often (~0.2% of total Link usage). We are going to remove it to
simplify the styling of Links and consolidate on a more consistent pattern
across our sites.

This PR removes the kind prop from the Link component and updates the
documentation to reflect this change.

Also removes the kind="primary" from the Link instance in Banner component.

Issue: WB-1874

Test plan:

Navigate to /?path=/docs/packages-link--docs and verify that the Link
component does not have the kind prop anymore.

Also navigate to /?path=/story/packages-link-link-all-variants--default and
verify that the "kind" variants are not available anymore. Only "default" and
"inline".

@jandrade jandrade self-assigned this Feb 6, 2025
Copy link

changeset-bot bot commented Feb 6, 2025

🦋 Changeset detected

Latest commit: b739489

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages
Name Type
@khanacademy/wonder-blocks-banner Patch
@khanacademy/wonder-blocks-link Major
@khanacademy/wonder-blocks-pill Patch
@khanacademy/wonder-blocks-dropdown Patch
@khanacademy/wonder-blocks-birthday-picker Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Contributor

github-actions bot commented Feb 6, 2025

Size Change: -184 B (-0.19%)

Total Size: 97.3 kB

Filename Size Change
packages/wonder-blocks-banner/dist/es/index.js 1.55 kB -3 B (-0.19%)
packages/wonder-blocks-link/dist/es/index.js 2.1 kB -181 B (-7.95%)
ℹ️ View Unchanged
Filename Size
packages/wonder-blocks-accordion/dist/es/index.js 3.54 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js 1.83 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js 887 B
packages/wonder-blocks-button/dist/es/index.js 4.31 kB
packages/wonder-blocks-cell/dist/es/index.js 2.01 kB
packages/wonder-blocks-clickable/dist/es/index.js 3.04 kB
packages/wonder-blocks-core/dist/es/index.js 2.97 kB
packages/wonder-blocks-data/dist/es/index.js 6.24 kB
packages/wonder-blocks-dropdown/dist/es/index.js 19 kB
packages/wonder-blocks-form/dist/es/index.js 6.03 kB
packages/wonder-blocks-grid/dist/es/index.js 1.36 kB
packages/wonder-blocks-icon-button/dist/es/index.js 3.12 kB
packages/wonder-blocks-icon/dist/es/index.js 871 B
packages/wonder-blocks-labeled-field/dist/es/index.js 1.22 kB
packages/wonder-blocks-layout/dist/es/index.js 1.81 kB
packages/wonder-blocks-modal/dist/es/index.js 5.41 kB
packages/wonder-blocks-pill/dist/es/index.js 1.4 kB
packages/wonder-blocks-popover/dist/es/index.js 4.85 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js 1.52 kB
packages/wonder-blocks-search-field/dist/es/index.js 1.33 kB
packages/wonder-blocks-switch/dist/es/index.js 2 kB
packages/wonder-blocks-testing-core/dist/es/index.js 3.73 kB
packages/wonder-blocks-testing/dist/es/index.js 1.07 kB
packages/wonder-blocks-theming/dist/es/index.js 679 B
packages/wonder-blocks-timing/dist/es/index.js 1.79 kB
packages/wonder-blocks-tokens/dist/es/index.js 2.51 kB
packages/wonder-blocks-toolbar/dist/es/index.js 905 B
packages/wonder-blocks-tooltip/dist/es/index.js 6.96 kB
packages/wonder-blocks-typography/dist/es/index.js 1.23 kB

compressed-size-action

Copy link
Contributor

github-actions bot commented Feb 6, 2025

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-uzrknytnsk.chromatic.com/

Chromatic results:

Metric Total
Captured snapshots 373
Tests with visual changes 8
Total stories 548
Inherited (not captured) snapshots [TurboSnap] 0
Tests on the build 373

@jandrade jandrade marked this pull request as ready for review February 6, 2025 20:05
@khan-actions-bot khan-actions-bot requested a review from a team February 6, 2025 20:05
@khan-actions-bot
Copy link
Contributor

Gerald

Required Reviewers
  • @Khan/wonder-blocks for changes to .changeset/cool-tomatoes-run.md, .changeset/moody-pianos-return.md, __docs__/wonder-blocks-link/link-variants.stories.tsx, __docs__/wonder-blocks-link/link.argtypes.tsx, __docs__/wonder-blocks-link/link.stories.tsx, packages/wonder-blocks-banner/src/components/banner.tsx, packages/wonder-blocks-link/src/components/link-core.tsx, packages/wonder-blocks-link/src/components/link.tsx

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

Copy link
Contributor

github-actions bot commented Feb 6, 2025

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (54f80ac) and published all packages with changesets to npm.

You can install the packages in webapp by running:

./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2463"

Packages can also be installed manually by running:

pnpm add @khanacademy/wonder-blocks-<package-name>@PR2463

Copy link
Member

@beaesguerra beaesguerra left a comment

Choose a reason for hiding this comment

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

Looks good! Left some non-blocking questions!

@@ -0,0 +1,5 @@
---
"@khanacademy/wonder-blocks-link": major
Copy link
Member

Choose a reason for hiding this comment

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

Does this have an impact on Perseus?

@@ -40,7 +40,7 @@ export default {
type StoryComponentType = StoryObj<typeof Link>;

/**
* By default the link is a `primary` link.
* By default the link uses a blue color.
Copy link
Member

Choose a reason for hiding this comment

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

Would it be helpful to reference the token name in docs instead of blue since it might be a different color for other themes?

Copy link
Member Author

Choose a reason for hiding this comment

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

hmm great question! how about adding a semantic meaning instead?

Something in the lines of: uses a color that communicates the presence and meaning of interaction (extracted from the semantic colors docs).

Copy link
Member

Choose a reason for hiding this comment

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

This sounds good!

Comment on lines -182 to -188
if (kind === "secondary" && light) {
throw new Error("Secondary Light links are not supported");
}

if (visitable && kind !== "primary") {
throw new Error("Only primary link is visitable");
}
Copy link
Member

Choose a reason for hiding this comment

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

🧹 Glad we can simplify things!

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