Docs(web): Document component changes into the Migration Guide #DS-1489 #1697

crishpeen · 2024-10-10T14:44:07Z

Description

Additional context

Issue reference

netlify · 2024-10-10T14:44:24Z

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

Name	Link
🔨 Latest commit	`06fc04b`
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-storybook/deploys/6711224d62276100082857f8

netlify · 2024-10-10T14:45:57Z

✅ Deploy Preview for spirit-design-system ready!

Name	Link
🔨 Latest commit	`06fc04b`
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system/deploys/6711224dcb467e0008d9afd6
😎 Deploy Preview	https://deploy-preview-1697--spirit-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 96 (🟢 up 1 from production) Accessibility: 91 (🔴 down 2 from production) Best Practices: 100 (no change from production) SEO: 83 (🟢 up 1 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 · 2024-10-10T14:51:58Z

coverage: 96.838%. remained the same
when pulling 572c270 on docs/web-migration-components
into e7c27d7 on docs/web-migration-general-changes.

literat · 2024-10-14T08:38:48Z

docs/migrations/web/MIGRATION-v3.md

+
+Button `inverted` modifier was removed. Use themes to switch the button colors.
+
+### Field Group: Alignment


Suggested change

### Field Group: Alignment

### FieldGroup: Alignment

The component is called FieldGroup IMHO.

I think it depends on the context. I believe we generally use the Title Case syntax (with space) in the docs and demos, and PascalCase in code.

I think we should refer to the components in a consistent way by their names. We use FileUploader not "File Uploader". It is way easier to address the components with the same name as in the code.

We use Title Case syntax in design too 🤷

It is way easier to address the components with the same name as in the code.

It is (or can be), but we need to do this consciously and throughout the whole design system. It's a change that exceeds the scope of this PR.

Ok, let's discuss this on a Long Topics. https://www.notion.so/almacareer/Long-topics-13baee254ce6484fa7d3180489384d84

docs/migrations/web/MIGRATION-v3.md

adamkudrna

👍🏻

docs/migrations/web/MIGRATION-v3.md

adamkudrna · 2024-10-15T16:31:09Z

docs/migrations/web/MIGRATION-v3.md

+
+Button `inverted` modifier was removed. Use themes to switch the button colors.
+
+### Field Group: Alignment


I think it depends on the context. I believe we generally use the Title Case syntax (with space) in the docs and demos, and PascalCase in code.

docs/migrations/web/MIGRATION-v3.md

… #DS-1489

…n Guide #DS-1489

adamkudrna · 2024-10-17T14:42:07Z

docs/migrations/web/MIGRATION-v3.md

+### Pill: Renamed and Removed Variants
+
+Pill component variants `primary`, `secondary`, `tertiary`, `inverted` and `unselected` were removed.
+Instead, the `neutral` variant was added. The current list of variants is


Suggested change

Instead, the `neutral` variant was added. The current list of variants is

Instead, the `neutral` variant was added. The current list of variants is:

adamkudrna · 2024-10-17T14:43:25Z

docs/migrations/web/MIGRATION-v3.md

+
+#### Migration Guide
+
+Use the `neutral` or emotion variants. If you need other variants, please, let us know.


Suggested change

Use the `neutral` or emotion variants. If you need other variants, please, let us know.

Use the `neutral` or emotion variants. If you need more variants, please, let us know.

adamkudrna · 2024-10-17T14:51:43Z

docs/migrations/web/MIGRATION-v3.md

+
+### Product Logo: The `inverted` Modifier Removed
+
+Product Logo `inverted` modifier was removed. Use themes to switch the logo colors.


Use themes to switch the logo colors.

ProductLogo doesn't have any themeable styling. I think it's more like this:

Suggested change

Product Logo `inverted` modifier was removed. Use themes to switch the logo colors.

The `inverted` modifier was removed from Product Logo. The component itself does not apply any color now, but you may want to swap the image source for certain themes. For example:

<div class="ProductLogo">

<img src="path-to-logo" class="my-logo-for-light-theme" alt="Product Logo" height="60" width="120" />

<img src="path-to-logo" class="my-logo-for-dark-theme" alt="Product Logo" height="60" width="120" />

</div>

This is a simple example, both images will be downloaded in this case. You may need to involve a more complex solution that will be performance friendly.

I'm filing an issue to show how to use themeable images: https://jira.almacareer.tech/browse/DS-1519

But now I realize this is matters mainly with dynamic themes like dark mode… So we could leave it out here and just add a general docs?

adamkudrna · 2024-10-17T14:53:07Z

docs/migrations/web/MIGRATION-v3.md

+
+### Toast: Link and Close Button
+
+Toast component now has its own close button and link.


Suggested change

Toast component now has its own close button and link.

The Toast component now has its own close button and link.

I think there should always be the definite article in the form of "the X component"…

literat

LGTM 👍

crishpeen requested a review from a team as a code owner October 10, 2024 14:44

github-actions bot assigned crishpeen Oct 10, 2024

github-actions bot added the documentation Improvements or additions to documentation label Oct 10, 2024

literat reviewed Oct 14, 2024

View reviewed changes

docs/migrations/web/MIGRATION-v3.md Show resolved Hide resolved

literat reviewed Oct 14, 2024

View reviewed changes

docs/migrations/web/MIGRATION-v3.md Show resolved Hide resolved

literat reviewed Oct 14, 2024

View reviewed changes

docs/migrations/web/MIGRATION-v3.md Outdated Show resolved Hide resolved

crishpeen requested a review from adamkudrna October 15, 2024 07:01

crishpeen force-pushed the docs/web-migration-general-changes branch from 7fd4780 to 5728b54 Compare October 15, 2024 14:12

crishpeen requested review from pavelklibani and curdaj as code owners October 15, 2024 14:12

crishpeen force-pushed the docs/web-migration-components branch from a2ae7be to f990226 Compare October 15, 2024 14:13

adamkudrna reviewed Oct 15, 2024

View reviewed changes

crishpeen force-pushed the docs/web-migration-general-changes branch from 5728b54 to db21506 Compare October 17, 2024 07:38

crishpeen force-pushed the docs/web-migration-components branch from f990226 to 7891cc3 Compare October 17, 2024 09:39

crishpeen force-pushed the docs/web-migration-general-changes branch from cbfc143 to 1539c9f Compare October 17, 2024 11:16

crishpeen force-pushed the docs/web-migration-components branch from d385594 to 7becc0e Compare October 17, 2024 11:16

crishpeen force-pushed the docs/web-migration-general-changes branch from 1539c9f to e7c27d7 Compare October 17, 2024 14:21

crishpeen force-pushed the docs/web-migration-components branch from 7becc0e to 572c270 Compare October 17, 2024 14:22

crishpeen force-pushed the docs/web-migration-general-changes branch from e7c27d7 to b783fd5 Compare October 17, 2024 14:41

crishpeen added 3 commits October 17, 2024 16:42

Docs(web): Document component changes into the Migration Guide #DS-1489

2e1d6a9

fixup! Docs(web): Document component changes into the Migration Guide…

ad6120c

… #DS-1489

fixup! fixup! Docs(web): Document component changes into the Migratio…

06fc04b

…n Guide #DS-1489

crishpeen force-pushed the docs/web-migration-components branch from 572c270 to 06fc04b Compare October 17, 2024 14:42

adamkudrna approved these changes Oct 17, 2024

View reviewed changes

literat approved these changes Oct 18, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Docs(web): Document component changes into the Migration Guide #DS-1489 #1697

Docs(web): Document component changes into the Migration Guide #DS-1489 #1697

crishpeen commented Oct 10, 2024

netlify bot commented Oct 10, 2024 •

edited

Loading

netlify bot commented Oct 10, 2024 •

edited

Loading

coveralls commented Oct 10, 2024 •

edited

Loading

literat Oct 14, 2024

adamkudrna Oct 15, 2024

literat Oct 17, 2024

crishpeen Oct 17, 2024

adamkudrna Oct 17, 2024

literat Oct 18, 2024 •

edited

Loading

adamkudrna left a comment

adamkudrna Oct 15, 2024

adamkudrna Oct 17, 2024

adamkudrna Oct 17, 2024

adamkudrna Oct 17, 2024

adamkudrna Oct 17, 2024

adamkudrna Oct 17, 2024

literat left a comment


		Button `inverted` modifier was removed. Use themes to switch the button colors.

		### Field Group: Alignment

	Instead, the `neutral` variant was added. The current list of variants is
	Instead, the `neutral` variant was added. The current list of variants is:


		#### Migration Guide

		Use the `neutral` or emotion variants. If you need other variants, please, let us know.


		### Product Logo: The `inverted` Modifier Removed

		Product Logo `inverted` modifier was removed. Use themes to switch the logo colors.

-Product Logo `inverted` modifier was removed. Use themes to switch the logo colors.
+The `inverted` modifier was removed from Product Logo. The component itself does not apply any color now, but you may want to swap the image source for certain themes. For example:
+<div class="ProductLogo">
+ <img src="path-to-logo" class="my-logo-for-light-theme" alt="Product Logo" height="60" width="120" />
+ <img src="path-to-logo" class="my-logo-for-dark-theme" alt="Product Logo" height="60" width="120" />
+</div>
+This is a simple example, both images will be downloaded in this case. You may need to involve a more complex solution that will be performance friendly.


		### Toast: Link and Close Button

		Toast component now has its own close button and link.

	Toast component now has its own close button and link.
	The Toast component now has its own close button and link.

Docs(web): Document component changes into the Migration Guide #DS-1489 #1697

Are you sure you want to change the base?

Docs(web): Document component changes into the Migration Guide #DS-1489 #1697

Conversation

crishpeen commented Oct 10, 2024

Description

Additional context

Issue reference

netlify bot commented Oct 10, 2024 • edited Loading

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

netlify bot commented Oct 10, 2024 • edited Loading

✅ Deploy Preview for spirit-design-system ready!

coveralls commented Oct 10, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

literat Oct 18, 2024 • edited Loading

Choose a reason for hiding this comment

adamkudrna left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

literat left a comment

Choose a reason for hiding this comment

netlify bot commented Oct 10, 2024 •

edited

Loading

netlify bot commented Oct 10, 2024 •

edited

Loading

coveralls commented Oct 10, 2024 •

edited

Loading

literat Oct 18, 2024 •

edited

Loading