Skip to content

Commit

Permalink
feat!: initial pre-release - Carbon v11 styles (#1881)
Browse files Browse the repository at this point in the history 
**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 <gregor.wassmann@gmail.com>
  • Loading branch information
@theetrain @gregorw
theetrain and gregorw committed Jan 12, 2024
1 parent 3bd943d commit b807a34
Show file tree
Hide file tree
Showing 188 changed files with 7,815 additions and 5,523 deletions.
12 changes: 6 additions & 6 deletions .github/workflows/ci.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@ jobs:
steps:
- uses: actions/checkout@v4
- uses: actions/cache@v3
id: yarn-cache
id: npm-cache
with:
path: "**/node_modules"
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}

- name: Install dependencies, build, test, and lint the codebase
run: |
yarn
yarn build:lib
yarn test:types
yarn lint
npm i
npm run build:lib
npm run test:types
npm run lint
- name: Trigger deploy
if: github.ref == 'refs/heads/master'
Expand Down
161 changes: 74 additions & 87 deletions COMPONENT_INDEX.md
View file

Large diffs are not rendered by default.

24 changes: 12 additions & 12 deletions CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ Before submitting a pull request (PR), consider [filing an issue](https://github
- [Component Format](#component-format)
- [Editing a component](#editing-a-component)
- [Creating a component](#creating-a-component)
- [Run `yarn build:docs`](#run-yarn-builddocs)
- [Run `npm run build:docs`](#run-npm-run-builddocs)
- [Submit a Pull Request](#submit-a-pull-request)
- [Sync Your Fork](#sync-your-fork)
- [Submit a PR](#submit-a-pr)

## Prerequisites

- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=12)
- [Yarn](https://classic.yarnpkg.com/en/docs/install)
- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=18)
- [npm](https://docs.npmjs.com/cli) (bundled with Node.js)

## Project set-up

Expand All @@ -43,7 +43,7 @@ Install the project dependencies:

```sh
# carbon-components-svelte/
yarn install
npm install
```

## Documentation set-up
Expand All @@ -54,7 +54,7 @@ First, create a symbolic link at the root of the project folder:

```sh
# carbon-components-svelte/
yarn link
npm link
```

Go into the `docs` folder:
Expand All @@ -66,8 +66,8 @@ cd docs
Link `"carbon-components-svelte"`:

```sh
yarn link "carbon-components-svelte"
yarn install
npm link "carbon-components-svelte"
npm install
```

If linked correctly, any change to a component in the `src` folder should be reflected in the `docs` site.
Expand All @@ -87,7 +87,7 @@ Preview changes to components from the `src` folder in the documentation website
In the `docs` folder, run:

```sh
yarn dev
npm run dev
```

The site should be served at `http://localhost:3000/` (or the next available port).
Expand Down Expand Up @@ -134,13 +134,13 @@ export {
} from "./ComposedModal";
```

### Run `yarn build:docs`
### Run `npm run build:docs`

Run the following command to re-generate TypeScript definitions and documentation.

```sh
# carbon-components-svelte/
yarn build:docs
npm run build:docs
```

## Submit a Pull Request
Expand Down Expand Up @@ -171,11 +171,11 @@ The workflow is automatically triggered when pushing a tag that begins with `v`

However, maintainers must perform a few things in preparation for a release.

Locally, while on `master` and the branch is clean, run `yarn release`. This command will:
Locally, while on `master` and the branch is clean, run `npm run release`. This command will:

- Bump the semantic version in `package.json`
- Generate notes in `CHANGELOG.md`
- Run `yarn build:docs` to update the generated documentation
- Run `npm run build:docs` to update the generated documentation

This command will not create a commit nor tag. Afterwards, perform the following manually:

Expand Down
9 changes: 2 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,10 @@ pnpm i -D carbon-components-svelte

### Styling

Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports five themes (2 light, 3 dark).
Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports four themes (2 light, 2 dark).

- **white.css**: Default Carbon theme (light)
- **g10.css**: Gray 10 theme (light)
- **g80.css**: Gray 80 theme (dark)
- **g90.css**: Gray 90 theme (dark)
- **g100.css**: Gray 100 theme (dark)
- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
Expand All @@ -60,7 +59,6 @@ The compiled CSS is generated from the following `.scss` files:

- [css/white.scss](css/white.scss)
- [css/g10.scss](css/g10.scss)
- [css/g80.scss](css/g80.scss)
- [css/g90.scss](css/g90.scss)
- [css/g100.scss](css/g100.scss)
- [css/all.scss](css/all.scss)
Expand All @@ -74,9 +72,6 @@ import "carbon-components-svelte/css/white.css";
// Gray 10 theme
import "carbon-components-svelte/css/g10.css";

// Gray 80 theme
import "carbon-components-svelte/css/g80.css";

// Gray 90 theme
import "carbon-components-svelte/css/g90.css";

Expand Down Expand Up @@ -147,7 +142,7 @@ Programmatically switch between each of the five Carbon themes by setting the "t

```html
<script>
let theme = "white"; // "white" | "g10" | "g80" | "g90" | "g100"
let theme = "white"; // "white" | "g10" | "g90" | "g100"
$: document.documentElement.setAttribute("theme", theme);
</script>
Expand Down
Loading

0 comments on commit b807a34

Please sign in to comment.