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

Initial pre-release - Carbon v11 styles #1881

Merged
merged 44 commits into from
Jan 12, 2024
Merged

Conversation

theetrain
Copy link
Collaborator

@theetrain theetrain commented Jan 3, 2024

Closes #1636, closes #1709, closes #1886
Relates to: #1872, #1629

This is the initial prerelease for carbon-components-svelte featuring:

Questions

  1. Should we support deprecated property values such as ContentSwitcher's size="xl"? I think we shouldn't.
  2. Should default sizes be explicit strings such as size="md" instead of "size=undefined"? It may be better to use explicit values when writing a form generator, but they can always return size=null I suppose. Search.svelte supports size="md"; maybe this can be addressed as part of Standardize props, events, and slots #1621

Before merging todos

  • upgrade @carbon/styles to latest
  • remove DatePicker size="xl" option
  • test ExpandableTile docs
  • Test Toggle and ToggleSkeleton
  • Test TreeView docs
  • Restore Truncate component
  • Regenerate CSS files
    • use --cds class prefix from flagship package instead of --bx
    • create truncate classes from mixins
    • include CSS in docs
  • Update Theme component to use new data- attributes
  • Ensure docs render nicely using v11 styles

Deferred todos:

  • Components with glaring issues (to be resolved later)
    • CodeSnippet component
    • Black 'search' component
    • Notification CSS
    • Tile
  • Test in a new local SvelteKit project to ensure modules can link
  • Identify which components are 'v11 ready' and which aren't in Carbon v11 style integration (component checklist) #1629

After merging todos

  • "squash and merge" this PR onto the next/v11-styles branch (and subsequent contributions); use 'breaking changes' message below in commit body
  • Rebase next/carbon-v11 onto master to get latest fixes and features
  • with next/carbon-v11 checked out, deploy package as 1.0.0-alpha.0 in package.json (v1.0.0-alpha.0 in git)
  • Include install and contribution instructions in release notes; update related issues and discussions; (remember to mention using npm)
  • Consider deploying docs based on changes in the next/carbon-v11 branch

👀 The following can go into the squashed commit message:

Breaking changes

Overall, this is a major style change the will impact the appearance and features of many components. Use caution when upgrading and test your applications.

Components

  • Button has new prop values for size and kind
  • Theme follows v11 conventions: g80 theme isn't supported, toggled themes adjust data-carbon-theme attribute in <html> tag (for now, tokens use bx prefix, but that may change)
  • Tabs has a contained prop instead of type
  • ContentSwitcher size prop no longer supports size="xl"; md is the new default
  • MultiSelect no longer supports xl size
  • OverflowMenu no longer supports xl size
  • Search no longer supports xl size
  • TreeView no longer supports compact size
  • UIShell has a different appearance per theme

CSS

  • Several class names have been changed due to the v11 overhaul. If you're targeting or overriding component classes, be sure to test your code
  • Many tokens and CSS variables have been renamed. Details: https://carbondesignsystem.com/migrating/guide/develop
  • Themes are applied to the <html> element as data-carbon-theme="g10" instead of theme="g10"
  • The g80 theme no longer exists

General

  • Codebase uses npm instead of yarn

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
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.
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
For better compatibility with existing code bases size `xl` is still supported.
Note that further work is needed here in order to make theming work again.
Also documentation needs updating.
For better compatibility with existing codebases size xl is still supported.
For better compatibility with existing codebases size xl is still supported.
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.
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 `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.
- Adapt documentation to new styles
- remove g80 theme option everywhere
- utilize new `data-carbon-theme` attribute when applying theme
- use cds instead of bx in places
gregorw added a commit to gregorw/carbon-components-svelte that referenced this pull request Jan 11, 2024
See upgrade guide here: https://carbondesignsystem.com/migrating/guide/develop

As proposed in carbon-design-system#1881 we can now start adopting v11 styles and merge incremental changes and fixes onto `next/v11-styles` branch. I would propose to merge small steps onto this new branch and discuss separte topics individually. This allows many contributors to propose small changes.

The v11 style adoption should be held as minimal as possible since many components already have some notable changes in Carbon v11.
gregorw added a commit to gregorw/carbon-components-svelte that referenced this pull request Jan 11, 2024
See upgrade guide here: https://carbondesignsystem.com/migrating/guide/develop

As proposed in carbon-design-system#1881 we can now start adopting v11 styles and merge incremental changes and fixes onto `next/v11-styles` branch. I would propose to merge small steps onto this new branch and discuss separte topics individually. This allows many contributors to propose small changes.

The v11 style adoption should be held as minimal as possible since many components already have some notable changes in Carbon v11.
@gregorw
Copy link
Contributor

gregorw commented Jan 11, 2024

@theetrain I’m glad to see activity towards a v11 styles adoption. What I observe is that this PR is already large and it’s growing. Decisions such as “switch to npm” should be discussed in entirely separate PRs and not mixed up with v11 styles. Also, I would abstain from switching all class prefixes from bx to cds. This introduces a lot of noise or churn within the PR which is unnecessary. I’d rather discuss this at a later stage in a separate PR.

What’s the minimal change that we can merge onto next/v11-styles branch? My worry is that this PR will be open for too long or introduce too many changes. Should we rather merge one component at a time? Let’s take small (but steady) steps: #1886

@theetrain
Copy link
Collaborator Author

theetrain commented Jan 11, 2024

Thanks for chiming in @gregorw; this week, I am working full-time on getting v11 styles in a prerelease and my goal is to get as much done before Friday so that contributors could have an easier time focusing on the components. You're right though, it's better to release early and often so I'll wrap this up today as best I can.

Decisions such as “switch to npm” should be discussed in entirely separate PRs and not mixed up with v11 styles.

Absolutely, though in this case I had hit a wall when running the docs due to cryptic node-gyp install errors. Since we employ npm provenance (#1842), I figured I could side-step the node-gyp errors and switch to npm for the next/v11-styles branch; we'll be switching to npm soon enough anyway.

Also, I would abstain from switching all class prefixes from bx to cds.

I'll switch back to bx then, with the intention to switch to cds in a future PR before completing the v11 style integration.

@theetrain theetrain marked this pull request as ready for review January 12, 2024 02:28
@theetrain
Copy link
Collaborator Author

theetrain commented Jan 12, 2024

Hi @metonym; please have a look at Gregor's comment above. In the PR body, have a read over the questions and 'after merging todos' to see if we can comfortably start a prerelease with these changes.

I understand the PR is huge with 188 file changes. After merging, we and the community can review components in #1629 until full coverage is attained; and it should be straightforward to review one component at a time given the new theme files are made and the theme toggle is functioning.

After your approval, and if you prefer, I can help merge and then rebase the next/v11-styles branch, and deploy the prerelease.

@metonym
Copy link
Collaborator

metonym commented Jan 12, 2024

Nice work @theetrain and @gregorw! It's shaping up very nicely.

Should we support deprecated property values such as ContentSwitcher's size="xl"? I think we shouldn't.

I agree. If it's no longer supported in v1, doesn't make much to sense to support it here.

Should default sizes be explicit strings such as size="md" instead of "size=undefined"? It may be better to use explicit values when writing a form generator, but they can always return size=null I suppose.

I think a prop like size should always be optional and have a consistent default value ("md" for example). We should reserve actual usage of required props where it actually makes sense (e.g., providing options for a dropdown).

@metonym
Copy link
Collaborator

metonym commented Jan 12, 2024

After your approval, and if you prefer, I can help merge and then rebase the next/v11-styles branch, and deploy the prerelease.

I did notice discrepancies in the docs site, and I see you've listed them as known issues. I assume these will be addressed before a pre-release? I would very much like to be able to compare next with the existing master side-by-side.

@theetrain
Copy link
Collaborator Author

I did notice discrepancies in the docs site, and I see you've listed them as known issues.

Yeah the obvious issues are with the Search, Tile, and CodeSnippet components. Their v11 classes have been changed a bit. I believe once those components have each had a thorough look, then they will appear correctly on the docs. Another example is InlineNotification not respecting dark themes.

Would you like to deploy a separate docs site for this branch? Up to you. I'll make the first pre-release tomorrow.

@metonym
Copy link
Collaborator

metonym commented Jan 12, 2024

@theetrain To clarify, do you mean to pre-release with the known bugs, and iterate on them in patches?

@theetrain
Copy link
Collaborator Author

@metonym yes, with the intent to follow up. I didn't yet go through testing every component, so it's more likely there are other issues - but that's ok. With the pre-releases, we can go through every component and make small PRs to fix what we see until eventually everything works with v11. At that point, we can merge next/v11-styles onto master.

@theetrain theetrain merged commit e71236c into next/v11-styles Jan 12, 2024
1 check passed
@theetrain theetrain deleted the init-v11-styles branch January 12, 2024 16:34
theetrain added a commit that referenced this pull request Jan 12, 2024
**carbon-components-svelte has unstable styles and interactions during this pre-release phase. See #1872 for details.**

Breaking changes

- Overall, this is a major style change the will impact the appearance and features of many components. Use caution when upgrading and test your applications.

Components

- Button has new prop values for size and kind
- Theme follows v11 conventions: g80 theme isn't supported, toggled themes adjust data-carbon-theme attribute in <html> tag (for now, tokens use bx prefix, but that may change)
- Tabs has a contained prop instead of type, and a new mobile appearance (scrolling tabs)
- ContentSwitcher size prop no longer supports size="xl"; md is the new default
- MultiSelect no longer supports xl size
- OverflowMenu no longer supports xl size
- Search no longer supports xl size
- TreeView no longer supports compact size
- UIShell has a new light theme

CSS

- Several class names have been changed due to the v11 overhaul. If you're targeting or overriding component classes, be sure to test your code
- Many tokens and CSS variables have been renamed. Details: https://carbondesignsystem.com/migrating/guide/develop
- Themes are applied to the <html> element as data-carbon-theme="g10" instead of theme="g10"
- The g80 theme no longer exists

General

- Codebase uses npm instead of yarn

--- Commit notes

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

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

* chore: use v11 styles for docs

* chore: stick to `bx` instead of `cds` class prefix

* chore: migrate layout spacing to v11

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

* chore: migrate type tokens to v11

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

Upgrading to css-grid should be separate.

* chore: v11 Tabs

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

* chore: v11 Button

* dependency: @carbon/styles update

* chore: v11 ComboBox

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

* chore: v11 ContentSwitcher

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

* chore: remove legacy v10 css files

Note that further work is needed here in order to make theming work again.
Also documentation needs updating.

* chore: v11 DatePicker

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

* chore: v11 Dropdown

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

* chore: v11 ExpandableTile

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

* chore: v11 FileUploader

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

* chore: v11 Toggle

This removes legacy `ToggleSkeleton`.

* chore: v11 MultiSelect

Size `xl` changed to `lg`.

* chore: v11 NumberInput

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

* chore: v11 OverflowMenu

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

* chore: v11 PasswordInput

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

* chore: v11 Search

* chore: v11 Select

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

* chore: v11 AspectRatio

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

* chore: v11 TextArea

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

* chore: v11 TextInput

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

* chore: v11 TimePicker

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

* chore: v11 TreeView

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

* chore: v11 UIShell

* chore: v11 Accordion

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

* tmp: v11 PopoverContent

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

This reverts commit 5833536.

* chore: use truncate mixins

* docs: add truncate mixins

* chore: use `cds` class prefix in v11 styles

* build: switch to npm

* chore: set up all component styles, fonts, and themes

- Adapt documentation to new styles

* chore: add individual theme css

* feat: migrate Theme component to v11

- remove g80 theme option everywhere
- utilize new `data-carbon-theme` attribute when applying theme
- use cds instead of bx in places

* chore: use bx css prefixes for now

* chore: resolve peerDependencies

- Leaving out latest prettier for now
- Ignoring Sveld warnings for now

* chore: fix type errors and tests

---------

Co-authored-by: Gregor Wassmann <[email protected]>
theetrain added a commit that referenced this pull request Jan 12, 2024
**carbon-components-svelte has unstable styles and interactions during this pre-release phase. See #1872 for details.**

Breaking changes

- Overall, this is a major style change the will impact the appearance and features of many components. Use caution when upgrading and test your applications.

Components

- Button has new prop values for size and kind
- Theme follows v11 conventions: g80 theme isn't supported, toggled themes adjust data-carbon-theme attribute in <html> tag (for now, tokens use bx prefix, but that may change)
- Tabs has a contained prop instead of type, and a new mobile appearance (scrolling tabs)
- ContentSwitcher size prop no longer supports size="xl"; md is the new default
- MultiSelect no longer supports xl size
- OverflowMenu no longer supports xl size
- Search no longer supports xl size
- TreeView no longer supports compact size
- UIShell has a new light theme

CSS

- Several class names have been changed due to the v11 overhaul. If you're targeting or overriding component classes, be sure to test your code
- Many tokens and CSS variables have been renamed. Details: https://carbondesignsystem.com/migrating/guide/develop
- Themes are applied to the <html> element as data-carbon-theme="g10" instead of theme="g10"
- The g80 theme no longer exists

General

- Codebase uses npm instead of yarn

--- Commit notes

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

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

* chore: use v11 styles for docs

* chore: stick to `bx` instead of `cds` class prefix

* chore: migrate layout spacing to v11

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

* chore: migrate type tokens to v11

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

Upgrading to css-grid should be separate.

* chore: v11 Tabs

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

* chore: v11 Button

* dependency: @carbon/styles update

* chore: v11 ComboBox

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

* chore: v11 ContentSwitcher

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

* chore: remove legacy v10 css files

Note that further work is needed here in order to make theming work again.
Also documentation needs updating.

* chore: v11 DatePicker

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

* chore: v11 Dropdown

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

* chore: v11 ExpandableTile

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

* chore: v11 FileUploader

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

* chore: v11 Toggle

This removes legacy `ToggleSkeleton`.

* chore: v11 MultiSelect

Size `xl` changed to `lg`.

* chore: v11 NumberInput

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

* chore: v11 OverflowMenu

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

* chore: v11 PasswordInput

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

* chore: v11 Search

* chore: v11 Select

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

* chore: v11 AspectRatio

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

* chore: v11 TextArea

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

* chore: v11 TextInput

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

* chore: v11 TimePicker

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

* chore: v11 TreeView

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

* chore: v11 UIShell

* chore: v11 Accordion

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

* tmp: v11 PopoverContent

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

This reverts commit 5833536.

* chore: use truncate mixins

* docs: add truncate mixins

* chore: use `cds` class prefix in v11 styles

* build: switch to npm

* chore: set up all component styles, fonts, and themes

- Adapt documentation to new styles

* chore: add individual theme css

* feat: migrate Theme component to v11

- remove g80 theme option everywhere
- utilize new `data-carbon-theme` attribute when applying theme
- use cds instead of bx in places

* chore: use bx css prefixes for now

* chore: resolve peerDependencies

- Leaving out latest prettier for now
- Ignoring Sveld warnings for now

* chore: fix type errors and tests

---------

Co-authored-by: Gregor Wassmann <[email protected]>
@theetrain
Copy link
Collaborator Author

First pre-release has been made: v1.0.0-next-0.

See #1872 for more details.

@theetrain theetrain mentioned this pull request Jan 12, 2024
96 tasks
metonym pushed a commit that referenced this pull request Mar 23, 2024
**carbon-components-svelte has unstable styles and interactions during this pre-release phase. See #1872 for details.**

Breaking changes

- Overall, this is a major style change the will impact the appearance and features of many components. Use caution when upgrading and test your applications.

Components

- Button has new prop values for size and kind
- Theme follows v11 conventions: g80 theme isn't supported, toggled themes adjust data-carbon-theme attribute in <html> tag (for now, tokens use bx prefix, but that may change)
- Tabs has a contained prop instead of type, and a new mobile appearance (scrolling tabs)
- ContentSwitcher size prop no longer supports size="xl"; md is the new default
- MultiSelect no longer supports xl size
- OverflowMenu no longer supports xl size
- Search no longer supports xl size
- TreeView no longer supports compact size
- UIShell has a new light theme

CSS

- Several class names have been changed due to the v11 overhaul. If you're targeting or overriding component classes, be sure to test your code
- Many tokens and CSS variables have been renamed. Details: https://carbondesignsystem.com/migrating/guide/develop
- Themes are applied to the <html> element as data-carbon-theme="g10" instead of theme="g10"
- The g80 theme no longer exists

General

- Codebase uses npm instead of yarn

--- Commit notes

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

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

* chore: use v11 styles for docs

* chore: stick to `bx` instead of `cds` class prefix

* chore: migrate layout spacing to v11

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

* chore: migrate type tokens to v11

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

Upgrading to css-grid should be separate.

* chore: v11 Tabs

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

* chore: v11 Button

* dependency: @carbon/styles update

* chore: v11 ComboBox

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

* chore: v11 ContentSwitcher

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

* chore: remove legacy v10 css files

Note that further work is needed here in order to make theming work again.
Also documentation needs updating.

* chore: v11 DatePicker

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

* chore: v11 Dropdown

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

* chore: v11 ExpandableTile

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

* chore: v11 FileUploader

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

* chore: v11 Toggle

This removes legacy `ToggleSkeleton`.

* chore: v11 MultiSelect

Size `xl` changed to `lg`.

* chore: v11 NumberInput

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

* chore: v11 OverflowMenu

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

* chore: v11 PasswordInput

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

* chore: v11 Search

* chore: v11 Select

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

* chore: v11 AspectRatio

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

* chore: v11 TextArea

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

* chore: v11 TextInput

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

* chore: v11 TimePicker

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

* chore: v11 TreeView

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

* chore: v11 UIShell

* chore: v11 Accordion

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

* tmp: v11 PopoverContent

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

This reverts commit 5833536.

* chore: use truncate mixins

* docs: add truncate mixins

* chore: use `cds` class prefix in v11 styles

* build: switch to npm

* chore: set up all component styles, fonts, and themes

- Adapt documentation to new styles

* chore: add individual theme css

* feat: migrate Theme component to v11

- remove g80 theme option everywhere
- utilize new `data-carbon-theme` attribute when applying theme
- use cds instead of bx in places

* chore: use bx css prefixes for now

* chore: resolve peerDependencies

- Leaving out latest prettier for now
- Ignoring Sveld warnings for now

* chore: fix type errors and tests

---------

Co-authored-by: Gregor Wassmann <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants