Skip to content

Commit c0d037d

Browse files
theetraingregorw
andcommitted
feat!: initial pre-release - Carbon v11 styles (#1881)
**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]>
1 parent f1cafd4 commit c0d037d

File tree

188 files changed

+7815
-5523
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

188 files changed

+7815
-5523
lines changed

.github/workflows/ci.yml

+6-6
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@ jobs:
99
steps:
1010
- uses: actions/checkout@v4
1111
- uses: actions/cache@v3
12-
id: yarn-cache
12+
id: npm-cache
1313
with:
1414
path: "**/node_modules"
15-
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
15+
key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}
1616

1717
- name: Install dependencies, build, test, and lint the codebase
1818
run: |
19-
yarn
20-
yarn build:lib
21-
yarn test:types
22-
yarn lint
19+
npm i
20+
npm run build:lib
21+
npm run test:types
22+
npm run lint
2323
2424
- name: Trigger deploy
2525
if: github.ref == 'refs/heads/master'

COMPONENT_INDEX.md

+74-87
Large diffs are not rendered by default.

CONTRIBUTING.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ Before submitting a pull request (PR), consider [filing an issue](https://github
1010
- [Component Format](#component-format)
1111
- [Editing a component](#editing-a-component)
1212
- [Creating a component](#creating-a-component)
13-
- [Run `yarn build:docs`](#run-yarn-builddocs)
13+
- [Run `npm run build:docs`](#run-npm-run-builddocs)
1414
- [Submit a Pull Request](#submit-a-pull-request)
1515
- [Sync Your Fork](#sync-your-fork)
1616
- [Submit a PR](#submit-a-pr)
1717

1818
## Prerequisites
1919

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

2323
## Project set-up
2424

@@ -43,7 +43,7 @@ Install the project dependencies:
4343

4444
```sh
4545
# carbon-components-svelte/
46-
yarn install
46+
npm install
4747
```
4848

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

5555
```sh
5656
# carbon-components-svelte/
57-
yarn link
57+
npm link
5858
```
5959

6060
Go into the `docs` folder:
@@ -66,8 +66,8 @@ cd docs
6666
Link `"carbon-components-svelte"`:
6767

6868
```sh
69-
yarn link "carbon-components-svelte"
70-
yarn install
69+
npm link "carbon-components-svelte"
70+
npm install
7171
```
7272

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

8989
```sh
90-
yarn dev
90+
npm run dev
9191
```
9292

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

137-
### Run `yarn build:docs`
137+
### Run `npm run build:docs`
138138

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

141141
```sh
142142
# carbon-components-svelte/
143-
yarn build:docs
143+
npm run build:docs
144144
```
145145

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

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

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

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

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

README.md

+2-7
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,10 @@ pnpm i -D carbon-components-svelte
4545

4646
### Styling
4747

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

5050
- **white.css**: Default Carbon theme (light)
5151
- **g10.css**: Gray 10 theme (light)
52-
- **g80.css**: Gray 80 theme (dark)
5352
- **g90.css**: Gray 90 theme (dark)
5453
- **g100.css**: Gray 100 theme (dark)
5554
- **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)
@@ -60,7 +59,6 @@ The compiled CSS is generated from the following `.scss` files:
6059

6160
- [css/white.scss](css/white.scss)
6261
- [css/g10.scss](css/g10.scss)
63-
- [css/g80.scss](css/g80.scss)
6462
- [css/g90.scss](css/g90.scss)
6563
- [css/g100.scss](css/g100.scss)
6664
- [css/all.scss](css/all.scss)
@@ -74,9 +72,6 @@ import "carbon-components-svelte/css/white.css";
7472
// Gray 10 theme
7573
import "carbon-components-svelte/css/g10.css";
7674

77-
// Gray 80 theme
78-
import "carbon-components-svelte/css/g80.css";
79-
8075
// Gray 90 theme
8176
import "carbon-components-svelte/css/g90.css";
8277

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

148143
```html
149144
<script>
150-
let theme = "white"; // "white" | "g10" | "g80" | "g90" | "g100"
145+
let theme = "white"; // "white" | "g10" | "g90" | "g100"
151146
152147
$: document.documentElement.setAttribute("theme", theme);
153148
</script>

0 commit comments

Comments
 (0)