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

Wildcard: <Card /> migration #29989

Merged
merged 13 commits into from Jan 24, 2022
Merged

Wildcard: <Card /> migration #29989

merged 13 commits into from Jan 24, 2022

Conversation

umpox
Copy link
Contributor

@umpox umpox commented Jan 20, 2022

closes #27681

Description

Automated migration of the card card-* styles to the <Card /> WIldcard component. Powered by this codemod: sourcegraph/codemod#73 (This PR is basically super rough as it just required tweaking an existing codemod to migrate. Migration is priority here, will cleanup codemod afterwards)

This PR:

  • Fully migrates usage of Bootstrap card-* classes to the Wildcard <Card /> component
  • Removes global Card styles and classNames
  • Adds CardFooter Wildcard component
  • Some styling tweaks

Notes

  • The original Card migration involved tweaking the UI to match the Wildcard redesign Card styles. It means there was a chance of some small regressions for the padding of our cards after this migration. I have checked every CardBody and Card that could be affected and removed some redundant padding styles!

@cla-bot cla-bot bot added the cla-signed label Jan 21, 2022
{children}
</Component>
)
export const Card = React.forwardRef(({ children, className, as: Component = 'div', ...attributes }, reference) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Note: I have removed the interactive variant prop.

Reasoning: It seems better to me just to style the card when it is used as a button element, which is all we would use the interactive prop for, as far as I can tell.

Doing it this way also ensures nobody accidentally styles div card like it would be interactive

as?: React.ElementType
}

export const CardFooter = React.forwardRef(
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Added CardFooter. We had usage in the application and this wasn't implemented in the original Card PR

@umpox umpox marked this pull request as ready for review January 21, 2022 15:32
@github-actions github-actions bot added the frontend-platform Issues related to our frontend platform, owned collectively by our frontend crew. label Jan 21, 2022
@umpox umpox requested review from a team January 21, 2022 15:32
@sourcegraph-bot
Copy link
Contributor

sourcegraph-bot commented Jan 21, 2022

Notifying subscribers in CODENOTIFY files for diff e136905...fa5511e.

Notify File(s)
@courier-new client/web/src/enterprise/batches/close/BatchChangeCloseAlert.tsx
client/web/src/enterprise/batches/execution/BatchSpecExecutionDetailsPage.tsx
client/web/src/enterprise/batches/execution/WorkspaceDetails.tsx
client/web/src/enterprise/batches/global/DotcomGettingStartedPage.tsx
client/web/src/enterprise/batches/list/BatchChangeListPage.tsx
client/web/src/enterprise/batches/list/BatchChangesChangelogAlert.tsx
client/web/src/enterprise/batches/list/BatchChangesListIntro.tsx
client/web/src/enterprise/batches/list/GettingStarted.tsx
@efritz client/web/src/enterprise/codeintel/indexes/components/CodeIntelIndexMeta.tsx
client/web/src/enterprise/codeintel/uploads/components/CodeIntelUploadMeta.tsx
@eseliger client/web/src/enterprise/batches/close/BatchChangeCloseAlert.tsx
client/web/src/enterprise/batches/execution/BatchSpecExecutionDetailsPage.tsx
client/web/src/enterprise/batches/execution/WorkspaceDetails.tsx
client/web/src/enterprise/batches/global/DotcomGettingStartedPage.tsx
client/web/src/enterprise/batches/list/BatchChangeListPage.tsx
client/web/src/enterprise/batches/list/BatchChangesChangelogAlert.tsx
client/web/src/enterprise/batches/list/BatchChangesListIntro.tsx
client/web/src/enterprise/batches/list/GettingStarted.tsx
@limitedmage client/web/src/enterprise/code-monitoring/CodeMonitoringGettingStarted.tsx
client/web/src/enterprise/code-monitoring/components/FormTriggerArea.tsx
client/web/src/enterprise/code-monitoring/components/snapshots/FormActionArea.test.tsx.snap
client/web/src/enterprise/code-monitoring/components/snapshots/FormTriggerArea.test.tsx.snap
client/web/src/enterprise/code-monitoring/components/actions/ActionEditor.tsx
client/web/src/search/home/LoggedOutHomepage.tsx
client/web/src/search/results/StreamingSearchResults.tsx
@slimsag client/web/src/repo/docs/DocumentationWelcomeAlert.tsx
@sourcegraph/frontend-platform client/wildcard/src/components/Card/Card.module.scss
client/wildcard/src/components/Card/Card.tsx
client/wildcard/src/components/Card/snapshots/Card.test.tsx.snap
client/wildcard/src/components/Card/components/CardFooter.module.scss
client/wildcard/src/components/Card/components/CardFooter.tsx
client/wildcard/src/components/Card/components/CardHeader.module.scss
client/wildcard/src/components/Card/components/index.ts
client/wildcard/src/components/Card/story/Card.story.tsx
client/wildcard/src/components/index.ts

@umpox umpox marked this pull request as draft January 21, 2022 15:33
@umpox umpox changed the title <Card /> migration Wildcard: <Card /> migration Jan 21, 2022
@umpox umpox marked this pull request as ready for review January 21, 2022 15:34
@umpox umpox merged commit 1d15648 into main Jan 24, 2022
@umpox umpox deleted the tr/card-migration branch January 24, 2022 13:48
@umpox umpox restored the tr/card-migration branch January 25, 2022 09:26
davejrt pushed a commit that referenced this pull request Jan 26, 2022
davejrt pushed a commit that referenced this pull request Feb 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cla-signed frontend-platform Issues related to our frontend platform, owned collectively by our frontend crew.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Wildcard V2: <Card /> Codemod
3 participants