-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
🪟 🎨 🧹 Migrate Card component to SCSS and refactor #16407
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was testing this change on the Connection Status view and it seems to have affected how the Error logs expand. Notably it appears to render the text, then do the element expansion.
className={classNames( | ||
className, | ||
styles.container, | ||
fullWidth ? styles.fullWidth : undefined, | ||
withPadding ? styles.withPadding : undefined | ||
)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
className={classNames( | |
className, | |
styles.container, | |
fullWidth ? styles.fullWidth : undefined, | |
withPadding ? styles.withPadding : undefined | |
)} | |
className={classNames(className, styles.container, { | |
[styles.fullWidth]: fullWidth, | |
[styles.withPadding]: withPadding, | |
})} |
className={classNames( | ||
styles.title, | ||
lightPadding || !children ? styles.lightPadding : undefined, | ||
roundedBottom ? styles.roundedBottom : undefined |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Repeat above object pattern here 👍
|
||
.iconColor { | ||
color: #615eff; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All these free-standing colors make me a touch nervous. Are we sure these colors can't come from _colors.scss
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh I might have missed this one, sorry! I was having trouble importing _colors.scss
in a few places, will go back and check.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If you continue to have issues with it, feel free to shoot me a ping! @use
is a little weird at first :)
Edit: Looks like you got it figured out 👍
https://www.loom.com/share/c265b9bf1d8d40ceb69dc56eb7f34256 |
@krishnaglick I've looked at the Loom with Nataly and also tested master vs this branch. I don't think there is any difference in rendering? The text in both cases will fade to opacity of the content at the same time while expanding it having that short moment where it overlaps the elements below. But I see that as well on master as well as in your Loom recording from master? I think it will just feel slightly different depending on the amount of elements below that it might need to push while animating, why it might feel in your recording from this branch slightly slower, but I don't even feel on the recording that it's slightly slower. If you believe there is an issue on this branch that's not master, could you maybe jump on a call with us, trying to demo it? |
@krishnaglick No longer relevant. We found a nice way to fix this. Nataly will create a separate PR for this, since it's already present on master and unrelated to this change, so we don't clutter this PR with it. |
@krishnaglick we also looked at the failing E2E tests - looks like there are no frontend errors and the test is flaky! |
@natalyjazzviolin @krishnaglick fyi I think the Frontend: Build is broken here, I can't build airbyte locally off of latest master |
Merged a PR to fix: #16663 |
* Converts worspace item into a button and adds some styling. * Adds workspace button width and padding. * Removes border for correct box shadow styling. * Converts chevron icon from styled components to scss. * Brakes card, contentcard, stateblock to rebuild styling and props. * Uses Card in ConnectorCard instead of ContentCard. * Adds conditional styling to Card. * Cleans up unused code. * Adds className override through props. * Updates existing destination card component. * Removes styled components from ConnectionBlock. * Replaces some ContenCards with Cards. * Replaces all ContentCard components with Card. * Adds missing padding in StateBlock. * Fixes linting errors. * Corrects stylelint errors. * Reguested changes. Co-authored-by: Tim Roes <tim@airbyte.io>
* Converts worspace item into a button and adds some styling. * Adds workspace button width and padding. * Removes border for correct box shadow styling. * Converts chevron icon from styled components to scss. * Brakes card, contentcard, stateblock to rebuild styling and props. * Uses Card in ConnectorCard instead of ContentCard. * Adds conditional styling to Card. * Cleans up unused code. * Adds className override through props. * Updates existing destination card component. * Removes styled components from ConnectionBlock. * Replaces some ContenCards with Cards. * Replaces all ContentCard components with Card. * Adds missing padding in StateBlock. * Fixes linting errors. * Corrects stylelint errors. * Reguested changes. Co-authored-by: Tim Roes <tim@airbyte.io>
What
This closes #15790 and should not alter anything visually in the UI.
Card
component to:Refactors the
WorkspaceItem
component at/workspaces
to use an HTML button for better accessibility.Removes the
ContentCard
component and replaces all of its instances withCard
Updates styling to use SCSS in some components that use
Card
where styled components would have no longer worked.How
Refactors
Card
and replaces styled components with SCSS.Recommended reading order
The
Card
component and its styling:airbyte-webapp/src/components/base/Card/Card.tsx
airbyte-webapp/src/components/base/Card/Card.module.scss
Where
Card
is replaced with a button at /workspaces:airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspaceItem.tsx
airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspaceItem.module.scss
Where
Card
replacesContentCard
:airbyte-webapp/src/components/CenteredPageComponents/PaddedCard.tsx
airbyte-webapp/src/components/CreateConnectionContent/CreateConnectionContent.tsx
airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx
airbyte-webapp/src/components/Modal/Modal.tsx
airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx
airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspacesControl.tsx
airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StateBlock.tsx
airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusView.tsx
airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView.tsx
airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/ExistingEntityForm.tsx
airbyte-webapp/src/pages/OnboardingPage/components/UseCaseBlock.tsx
airbyte-webapp/src/pages/SettingsPage/pages/ConfigurationsPage/ConfigurationsPage.tsx
airbyte-webapp/src/pages/SettingsPage/pages/SettingsComponents.tsx
airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx
airbyte-webapp/src/views/Connector/ServiceForm/index.stories.tsx
Where
Card
replacesContentCard
and adds SCSS:airbyte-webapp/src/views/Connection/CollapsibleCard.module.scss
airbyte-webapp/src/views/Connection/CollapsibleCard.tsx
airbyte-webapp/src/components/ConnectionBlock/ConnectionBlock.module.scss
airbyte-webapp/src/components/ConnectionBlock/ConnectionBlock.tsx
Deletes
ContentCard
:airbyte-webapp/src/components/ContentCard/ContentCard.tsx
airbyte-webapp/src/components/ContentCard/index.stories.tsx
airbyte-webapp/src/components/ContentCard/index.tsx
airbyte-webapp/src/components/index.tsx
🚨 User Impact 🚨
No breaking changes.
Tests
None needed.