Skip to content

Feat: Enable gradients in components #DS-1887 #2062

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

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

curdaj
Copy link
Contributor

@curdaj curdaj commented May 12, 2025

Description

Additional context

Issue reference

Copy link

netlify bot commented May 12, 2025

Deploy Preview for spirit-design-system-storybook canceled.

Name Link
🔨 Latest commit 7e2562e
🔍 Latest deploy log https://app.netlify.com/sites/spirit-design-system-storybook/deploys/6824475a0e8f2d0008024108

@github-actions github-actions bot added the feature New feature or request label May 12, 2025
Copy link

netlify bot commented May 12, 2025

Deploy Preview for spirit-design-system ready!

Name Link
🔨 Latest commit 7e2562e
🔍 Latest deploy log https://app.netlify.com/sites/spirit-design-system/deploys/6824475a7ce8fb000868a3a9
😎 Deploy Preview https://deploy-preview-2062--spirit-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 96 (no change from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 90 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@coveralls
Copy link

Coverage Status

coverage: 96.923%. remained the same
when pulling fa2d5fa on feat/ds-1887-enable-gradients-in-components
into c353edd on main.

@curdaj curdaj added the run-visual-tests Runs visual regression testing on this PR label May 12, 2025
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hardcoded for demo - will be removed

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hardcoded for demo - will be removed

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hardcoded for demo - will be removed

Copy link
Contributor

Copy link
Contributor

@curdaj curdaj marked this pull request as ready for review May 13, 2025 07:15
@curdaj curdaj force-pushed the feat/ds-1887-enable-gradients-in-components branch from 6b85d9d to e0c759b Compare May 13, 2025 07:16
Copy link
Member

@crishpeen crishpeen left a comment

Choose a reason for hiding this comment

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

LGTM, good job. I would only open the gradients options to allow users to defined thier custom ones. :)

@curdaj curdaj force-pushed the feat/ds-1887-enable-gradients-in-components branch from 4a40679 to e0d08b5 Compare May 13, 2025 14:21
@curdaj curdaj force-pushed the feat/ds-1887-enable-gradients-in-components branch from e0d08b5 to 7e2562e Compare May 14, 2025 07:33
Comment on lines 103 to 105
[dictionary-color]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#color
[dictionary-gradient]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#gradient
[dictionary-border-properities]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#border-properties
Copy link
Contributor

Choose a reason for hiding this comment

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

🔤

<Box padding="space-800" backgroundGradient="secondary">
Secondary Background Gradient
</Box>
<Box padding="space-800" backgroundGradient={{ mobile: 'primary', tablet: 'secondary', desktop: 'secondary' }}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we omit the desktop value if it is the same?

Suggested change
<Box padding="space-800" backgroundGradient={{ mobile: 'primary', tablet: 'secondary', desktop: 'secondary' }}>
<Box padding="space-800" backgroundGradient={{ mobile: 'primary', tablet: 'secondary' }}>

Copy link
Contributor

Choose a reason for hiding this comment

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

Or there is a typo and it should be there:

Suggested change
<Box padding="space-800" backgroundGradient={{ mobile: 'primary', tablet: 'secondary', desktop: 'secondary' }}>
<Box padding="space-800" backgroundGradient={{ mobile: 'primary', tablet: 'secondary', desktop: 'primary' }}>

?

<div class="docs-Stack docs-Stack--start">

<p>For demo purposes, the boxes have custom padding.</p>
<div class="bg-gradient-primary p-800">Primary Background Gradient</div>
Copy link
Contributor

Choose a reason for hiding this comment

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

Non-related to this PR: p-<space-token> works, but m-<space-token> not? Why?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New feature or request run-visual-tests Runs visual regression testing on this PR
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants