chore: use @carbon/styles (v11) #1709

gregorw · 2023-03-26T21:28:18Z

Reworking #1496. See https://carbon-components-svelte-v11.onrender.com for actual results.

This PR introduces v11 Carbon styles. As a first step, I would make sure that all existing components still work, before introducing new components or changing the technology stack in any other ways.

@carbon/styles
@ibm/plex

Here’s the list of components that need to be verified:

Fixes #1253.

—

Other resources and considerations

theetrain · 2023-03-27T01:20:38Z

Thanks again for taking the time; I see you even refactored Tabs to replace the dropdown styles with a scrolling tabs list, which matches v11 implementation details.

To ensure I understand, is the proposal here to:

First prove that components work with v11 styles, and refactor them accordingly
Then, figure out an improved way for consumers to set up Carbon CSS in their projects
Ship these components, then continue work towards carbon-components-svelte@v1
Afterwards (out of scope for now), we set up svelte-package, types, and other v1 goals

If so, I'm on board with this.

gregorw · 2023-03-27T06:50:56Z

First prove that components work with v11 styles, and refactor them accordingly

Exactly, this should be our first priority. This change should then be merged to master and be released. Basically, this is new v11 styles with the minimal adaptions from v10 components. Projects that use carbon-components-svelte can than use this release.

1.1 Bugfixing, feature parity

Once v11 styles are released we might need to fix a few bugs, change a few more props – or we can start working towards feature parity.

Then, figure out an improved way for consumers to set up Carbon CSS in their projects

Here it is important to understand what problem we are solving. When discussing this, I think we should also talk about if we want to support the v11 ClassPrefix component. This is related. Can library consumers choose their own class prefixes? How does that impact bundling of styles?

Ship these components, then continue work towards carbon-components-svelte@v1

At this point components should already be shipped. Improvements to developer experience and work towards feature parity can be parallel as long as we manage to make small increments that are mergeable to master.

Afterwards (out of scope for now), we set up svelte-package, types, and other v1 goals

As with point 3 I think improvements towards the build scripts and typescript improvements (svelte/elements) can be discussed separately and gradually merged into master.

If so, I'm on board with this.

I do think we are on the same page here.

gregorw · 2023-03-27T13:48:43Z

One more thing. If we want to discuss individual components, let’s reset carbon-v11 branch to master and merge individual commits/components of this PR onto that temporary but rather short-lived branch. The idea would really be to make @carbon/styles work with the bare minimum of changes.

gregorw · 2023-03-28T18:17:20Z

src/DatePicker/DatePickerInput.svelte

@@ -117,7 +117,7 @@
      class:bx--date-picker__input="{true}"
      class:bx--date-picker__input--invalid="{invalid}"
      class:bx--date-picker__input--sm="{size === 'sm'}"
-      class:bx--date-picker__input--xl="{size === 'xl'}"
+      class:bx--date-picker__input--lg="{size === 'lg' || size === 'xl'}"


@theetrain I wonder if we should keep supporting legacy size xl for a while. What do you think?

v3ss0n · 2023-04-17T19:55:20Z

UIShell is broken withou this.

PS : Scss files and css files are missing from yout PR>

See upgrade guide here: https://carbondesignsystem.com/migrating/guide/develop

See [@carbon/layout](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#carbonlayout) migration guide: $layout-01 Removed, use $spacing-05 instead $layout-02 Removed, use $spacing-06 instead $layout-03 Removed, use $spacing-07 instead $layout-04 Removed, use $spacing-09 instead $layout-05 Removed, use $spacing-10 instead $layout-06 Removed, use $spacing-12 instead $layout-07 Removed, use $spacing-13 instead

See https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#type-tokens

Upgrading to css-grid should be separate.

In v11 [Tabs](https://carbondesignsystem.com/migrating/guide/design/#tabs-breaking) received some additional modifiers. In this commit we only want to make sure that the Svelte v10 tabs still work using v11 styles. This probably needs additional testing.

Note that state labels `tileCollapsedLabel` and `tileExpandedLabel` are no longer supported.

For better compatibility with existing codebases sizes `field` and `small` are still supported. Note that flagship implementation does the same thing.

This removes legacy `ToggleSkeleton`.

Size `xl` changed to `lg`.

For better compatibility with existing codebases size `xl` is still supported.

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

The `bx--aspect-ratio--object` class is gone and needs to be replaced manually.

`cols` no longer has a defaults to 50 but remains at 100% width by default.

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

Size `compact` changed to `xs`. For better compatibility with existing codebases size `compact` is still supported.

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

* Breaking changes * - The `Popover` now uses a different markup. The trigger becomes a child of the component. - The new `PopoverContent` becomes an additional child of the `Popover` component. - remove `relative` property

In v11 the definintion tooltip uses the `Popover` component internally. While the component is called `DefinitionTooltip` in the reference implementation, it is not renamed at this point. - rename `tooltipText` to `definition` - rename `tooltip` slot to `definition` - remove `direction` (see `align`) - use `align` values from `Popover` and set to `bottom-left` as default instead of `center`

Refactor `Tooltip` to use `Popover` component internally. **Breaking changes** - `direction` is replaced by additional `align` options. - `hideIcon` property is removed. **Limitations** - The reference implementaiton uses the trigger content instead of the tooltip content as primary slot. This is not considered in this refactoring since it would be too big of a change. - Instead of `TooltipFooter` a new `Toggletip` component would be required which is not included in this patch.

theetrain · 2024-01-12T21:01:23Z

Superseded by #1881

gregorw force-pushed the carbon-v11 branch from e4196e4 to 3ae9ee5 Compare March 26, 2023 21:57

gregorw mentioned this pull request Mar 26, 2023

Support for inline theming? #1648

Open

gregorw force-pushed the carbon-v11 branch from 3ae9ee5 to 1f37ed4 Compare March 26, 2023 22:15

gregorw force-pushed the carbon-v11 branch 2 times, most recently from 424597a to c69957f Compare March 27, 2023 22:20

gregorw commented Mar 28, 2023

View reviewed changes

gregorw force-pushed the carbon-v11 branch 4 times, most recently from d7685f9 to ee3dcfa Compare March 31, 2023 17:50

gregorw force-pushed the carbon-v11 branch from 8ab063e to 3522461 Compare May 20, 2023 22:24

gregorw force-pushed the carbon-v11 branch from 3522461 to 9662995 Compare July 18, 2023 16:49

gregorw force-pushed the carbon-v11 branch 4 times, most recently from 0e42e43 to a555fdc Compare September 30, 2023 13:43

gregorw added 10 commits October 7, 2023 12:17

chore: depend on @carbon/styles instead of carbon-components

9843797

See upgrade guide here: https://carbondesignsystem.com/migrating/guide/develop

chore: use v11 styles for docs

46056f2

dev: deploy to carbon-components-svelte-v11.render.com

d99e0a1

chore: stick to bx instead of cds class prefix

526c574

chore: migrate type tokens to v11

ad34a00

See https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#type-tokens

chore: keep flex-grid instead of css grid for the moment

8c7e888

Upgrading to css-grid should be separate.

chore: v11 Tabs

c0aaeb2

In v11 [Tabs](https://carbondesignsystem.com/migrating/guide/design/#tabs-breaking) received some additional modifiers. In this commit we only want to make sure that the Svelte v10 tabs still work using v11 styles. This probably needs additional testing.

chore: use @ibm/plex fonts

8dabd3e

chore: v11 Button

a0089ef

gregorw added 17 commits October 7, 2023 12:24

chore: v11 ExpandableTile

0a279bd

Note that state labels `tileCollapsedLabel` and `tileExpandedLabel` are no longer supported.

chore: v11 FileUploader

4be962c

For better compatibility with existing codebases sizes `field` and `small` are still supported. Note that flagship implementation does the same thing.

chore: v11 Toggle

4f9de63

This removes legacy `ToggleSkeleton`.

chore: v11 MultiSelect

5221080

Size `xl` changed to `lg`.

chore: v11 NumberInput

53901ef

For better compatibility with existing codebases size `xl` is still supported.

chore: v11 OverflowMenu

70f8845

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

chore: v11 PasswordInput

164ce79

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

chore: v11 Search

27da0e6

chore: v11 Select

d20a5a7

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

chore: v11 AspectRatio

75b9921

The `bx--aspect-ratio--object` class is gone and needs to be replaced manually.

chore: v11 TextArea

8ff8007

`cols` no longer has a defaults to 50 but remains at 100% width by default.

chore: v11 TextInput

6c39298

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

chore: v11 TimePicker

68aa238

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

chore: v11 TreeView

2df8215

Size `compact` changed to `xs`. For better compatibility with existing codebases size `compact` is still supported.

chore: remove Truncate since it does not exist in Carbon v11

9c680c5

chore: v11 UIShell

630ef85

chore: v11 Accordion

baf33c0

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

gregorw force-pushed the carbon-v11 branch from a555fdc to 2275ed3 Compare October 7, 2023 10:24

gregorw added 2 commits October 7, 2023 14:07

feat(v11): Popover

d139d19

* Breaking changes * - The `Popover` now uses a different markup. The trigger becomes a child of the component. - The new `PopoverContent` becomes an additional child of the `Popover` component. - remove `relative` property

gregorw force-pushed the carbon-v11 branch 3 times, most recently from 5562360 to 9fe7411 Compare October 7, 2023 14:43

gregorw force-pushed the carbon-v11 branch from 9fe7411 to e00c956 Compare October 7, 2023 14:45

metonym force-pushed the master branch 2 times, most recently from e7485c4 to 417102d Compare November 8, 2023 03:27

theetrain mentioned this pull request Jan 3, 2024

Initial pre-release - Carbon v11 styles #1881

Merged

24 tasks

theetrain closed this Jan 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: use @carbon/styles (v11) #1709

chore: use @carbon/styles (v11) #1709

gregorw commented Mar 26, 2023 •

edited

Loading

theetrain commented Mar 27, 2023

gregorw commented Mar 27, 2023 •

edited

Loading

gregorw commented Mar 27, 2023 •

edited

Loading

gregorw Mar 28, 2023

v3ss0n commented Apr 17, 2023 •

edited

Loading

theetrain commented Jan 12, 2024

chore: use @carbon/styles (v11) #1709

chore: use @carbon/styles (v11) #1709

Conversation

gregorw commented Mar 26, 2023 • edited Loading

theetrain commented Mar 27, 2023

gregorw commented Mar 27, 2023 • edited Loading

gregorw commented Mar 27, 2023 • edited Loading

gregorw Mar 28, 2023

Choose a reason for hiding this comment

v3ss0n commented Apr 17, 2023 • edited Loading

theetrain commented Jan 12, 2024

gregorw commented Mar 26, 2023 •

edited

Loading

gregorw commented Mar 27, 2023 •

edited

Loading

gregorw commented Mar 27, 2023 •

edited

Loading

v3ss0n commented Apr 17, 2023 •

edited

Loading