From ef7ef58ac39b5805030bee3c729c89755858abdd Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Fri, 20 Dec 2024 11:34:43 +0100 Subject: [PATCH] chore: update old references --- docs/how-to-develop-a-component.md | 8 +-- docs/migration/alpha-beta.md | 4 +- output/angular/README.md | 12 ++-- output/react/README.md | 12 ++-- output/stencil/README.md | 12 ++-- output/vue/README.md | 12 ++-- .../component/db-ui-components-angular.ejs.t | 6 -- .../new/component/db-ui-components-wc.ejs.t | 6 ++ .../new/component/db-ui-components.ejs.t | 4 +- .../mitosis/new/component/html.ejs.t | 2 +- packages/components/docs/getting-started.md | 4 +- packages/components/index.html | 2 +- packages/components/postcss.config.js | 7 ++- .../accordion-item/accordion-item.scss | 4 +- .../src/components/accordion-item/index.html | 2 +- .../src/components/accordion/accordion.scss | 2 +- .../src/components/accordion/index.html | 2 +- .../src/components/badge/badge.scss | 6 +- .../src/components/badge/index.html | 2 +- .../src/components/brand/index.html | 2 +- .../src/components/button/button.scss | 4 +- .../src/components/button/index.html | 2 +- .../components/src/components/card/card.scss | 2 +- .../components/src/components/card/index.html | 2 +- .../src/components/checkbox/checkbox.scss | 4 +- .../src/components/checkbox/index.html | 2 +- .../src/components/divider/index.html | 2 +- .../src/components/drawer/drawer.scss | 4 +- .../src/components/drawer/index.html | 2 +- .../src/components/header/header.scss | 2 +- .../src/components/header/index.html | 2 +- .../components/src/components/icon/index.html | 2 +- .../src/components/infotext/index.html | 2 +- .../src/components/input/docs/Angular.md | 2 +- .../src/components/input/docs/HTML.md | 2 +- .../src/components/input/docs/React.md | 2 +- .../src/components/input/docs/Vue.md | 2 +- .../src/components/input/index.html | 2 +- .../src/components/input/input.scss | 6 +- .../components/src/components/link/index.html | 2 +- .../components/src/components/link/link.scss | 2 +- .../navigation-item/navigation-item.scss | 4 +- .../src/components/navigation/navigation.scss | 6 +- .../src/components/notification/index.html | 2 +- .../components/notification/notification.scss | 4 +- .../src/components/popover/index.html | 2 +- .../src/components/popover/popover.scss | 4 +- .../src/components/radio/index.html | 2 +- .../src/components/radio/radio.scss | 2 +- .../src/components/section/index.html | 2 +- .../src/components/section/section.scss | 2 +- .../src/components/select/index.html | 2 +- .../src/components/select/select.scss | 4 +- .../src/components/stack/index.html | 2 +- .../src/components/stack/stack.scss | 2 +- .../src/components/switch/index.html | 2 +- .../src/components/switch/switch.scss | 2 +- .../src/components/tab-item/index.html | 2 +- .../src/components/tab-item/tab-item.scss | 6 +- .../src/components/tab-list/index.html | 2 +- .../src/components/tab-list/tab-list.scss | 2 +- .../src/components/tab-panel/index.html | 2 +- .../components/src/components/tabs/index.html | 2 +- .../components/src/components/tabs/tabs.scss | 4 +- .../components/src/components/tag/index.html | 2 +- .../components/src/components/tag/tag.scss | 8 +-- .../src/components/textarea/index.html | 2 +- .../src/components/textarea/textarea.scss | 6 +- .../src/components/tooltip/index.html | 2 +- .../src/components/tooltip/tooltip.scss | 4 +- packages/components/src/styles/index.scss | 15 ----- .../{ => internal}/_button-components.scss | 0 .../src/styles/{ => internal}/_component.scss | 0 .../{ => internal}/_custom-elements.scss | 2 +- .../src/styles/{ => internal}/_db-puls.scss | 0 .../{ => internal}/_form-components.scss | 2 +- .../styles/{ => internal}/_icon-passing.scss | 0 .../{ => internal}/_link-components.scss | 0 .../{ => internal}/_popover-component.scss | 0 .../src/styles/{ => internal}/_scrollbar.scss | 0 .../{ => internal}/_stack-components.scss | 0 .../{ => internal}/_tag-components.scss | 0 packages/components/src/styles/relative.scss | 8 ++- .../components/src/styles/wc-workarounds.scss | 12 ++++ .../test/import-styles/simple-button/main.js | 10 +-- .../test/import-styles/simple-button/test.css | 10 +-- .../test/playwright/boilerplate/index.ts | 4 +- packages/foundations/README.md | 58 ++++++++++------- packages/foundations/docs/Colors.md | 8 +-- packages/foundations/docs/FontsSizes.md | 4 +- packages/foundations/docs/Variables.md | 2 +- packages/foundations/index.html | 5 +- packages/foundations/package.json | 2 +- packages/foundations/postcss.config.cjs | 7 ++- .../scripts/local/generate-icon-overview.ts | 2 +- .../scss/_absolute.assets-paths.scss | 1 - .../scss/_default.assets-paths.scss | 1 - .../scss/_rollup.assets-paths.scss | 1 - .../scss/_webpack.assets-paths.scss | 1 - .../scss/{init => defaults}/default-code.scss | 0 .../{init => defaults}/default-elevation.scss | 0 .../{init => defaults}/default-fonts.scss | 0 .../scss/defaults/default-icons.scss | 57 +++++++++++++++++ .../default-required.scss} | 5 +- .../scss/{init => defaults}/default-root.scss | 7 +-- .../scss/{ => defaults}/default-theme.scss | 6 +- .../absolute.scss} | 2 +- .../fonts/{include.scss => relative.scss} | 0 .../include-rollup.scss => fonts/rollup.scss} | 2 +- .../webpack.scss} | 2 +- .../absolute.scss} | 2 +- .../icons/{include.scss => relative.scss} | 62 +------------------ .../include-rollup.scss => icons/rollup.scss} | 2 +- .../webpack.scss} | 2 +- packages/foundations/scss/index.scss | 7 ++- packages/foundations/scss/init/_index.scss | 5 -- packages/foundations/scss/relative.scss | 4 +- packages/foundations/src/colors.html | 5 +- packages/foundations/src/fonts.html | 5 +- packages/foundations/src/icons.html | 5 +- showcases/angular-showcase/src/styles.css | 8 +-- showcases/angular-ssr-showcase/src/styles.css | 3 +- showcases/next-showcase/styles/global.scss | 4 +- showcases/nuxt-showcase/app.vue | 3 +- .../patternhub/styles/decision-tree.scss | 2 +- showcases/patternhub/styles/globals.scss | 14 ++--- showcases/patternhub/styles/highlight.scss | 4 +- showcases/react-showcase/src/main.tsx | 2 +- showcases/stencil-showcase/src/styles.css | 3 +- showcases/vue-showcase/src/main.ts | 3 +- 130 files changed, 309 insertions(+), 323 deletions(-) delete mode 100644 packages/components/_templates/mitosis/new/component/db-ui-components-angular.ejs.t create mode 100644 packages/components/_templates/mitosis/new/component/db-ui-components-wc.ejs.t rename packages/components/src/styles/{ => internal}/_button-components.scss (100%) rename packages/components/src/styles/{ => internal}/_component.scss (100%) rename packages/components/src/styles/{ => internal}/_custom-elements.scss (91%) rename packages/components/src/styles/{ => internal}/_db-puls.scss (100%) rename packages/components/src/styles/{ => internal}/_form-components.scss (99%) rename packages/components/src/styles/{ => internal}/_icon-passing.scss (100%) rename packages/components/src/styles/{ => internal}/_link-components.scss (100%) rename packages/components/src/styles/{ => internal}/_popover-component.scss (100%) rename packages/components/src/styles/{ => internal}/_scrollbar.scss (100%) rename packages/components/src/styles/{ => internal}/_stack-components.scss (100%) rename packages/components/src/styles/{ => internal}/_tag-components.scss (100%) create mode 100644 packages/components/src/styles/wc-workarounds.scss rename packages/foundations/scss/{init => defaults}/default-code.scss (100%) rename packages/foundations/scss/{init => defaults}/default-elevation.scss (100%) rename packages/foundations/scss/{init => defaults}/default-fonts.scss (100%) create mode 100644 packages/foundations/scss/defaults/default-icons.scss rename packages/foundations/scss/{init/required.scss => defaults/default-required.scss} (97%) rename packages/foundations/scss/{init => defaults}/default-root.scss (61%) rename packages/foundations/scss/{ => defaults}/default-theme.scss (99%) rename packages/foundations/scss/{icons/include-absolute.scss => fonts/absolute.scss} (59%) rename packages/foundations/scss/fonts/{include.scss => relative.scss} (100%) rename packages/foundations/scss/{icons/include-rollup.scss => fonts/rollup.scss} (58%) rename packages/foundations/scss/{icons/include-webpack.scss => fonts/webpack.scss} (58%) rename packages/foundations/scss/{fonts/include-absolute.scss => icons/absolute.scss} (59%) rename packages/foundations/scss/icons/{include.scss => relative.scss} (50%) rename packages/foundations/scss/{fonts/include-rollup.scss => icons/rollup.scss} (58%) rename packages/foundations/scss/{fonts/include-webpack.scss => icons/webpack.scss} (58%) delete mode 100644 packages/foundations/scss/init/_index.scss diff --git a/docs/how-to-develop-a-component.md b/docs/how-to-develop-a-component.md index bfda20f12ef..cdf5ba17a93 100644 --- a/docs/how-to-develop-a-component.md +++ b/docs/how-to-develop-a-component.md @@ -21,11 +21,11 @@ Starting with `packages/components/src/components/my-awesome-component/my-awesome-component.scss` there are something you should know: -1. The most important dependency are the `variables` included via `@use "@db-ui/foundations/build/scss/variables";`. They enable you to use e.g. `$db-spacing-fixed-md` for paddings, margins etc. -2. A lot of times you have to force another `font-size` / `line-height`, you can do it with `@use "@db-ui/foundations/build/scss/density/font;` and the corresponding placeholder extend: `@extend %db-overwrite-font-size-sm;`. +1. The most important dependency are the `variables` included via `@use "@db-ui/foundations/build/styles/variables";`. They enable you to use e.g. `$db-spacing-fixed-md` for paddings, margins etc. +2. A lot of times you have to force another `font-size` / `line-height`, you can do it with `@use "@db-ui/foundations/build/styles/density/font;` and the corresponding placeholder extend: `@extend %db-overwrite-font-size-sm;`. 3. Some components have an 'adaptive' styling. We exclude it in an own file `@use "@db-ui/components/build/scss/styles/component";` so you might use this dependency. As a reference look at another component e.g. [`packages/components/src/components/button/button.scss`](../packages/components/src/components/button/button.scss). -4. If you have to set a specific color (informational, warning, etc.) directly you can use `@use "@db-ui/foundations/build/scss/colors";`. You can take a look at the `notification` component for an example `packages/components/src/components/notification/notification.scss` you might use the `@each` to reduce the amount of code for color-variants. -5. To set a fixed icon you might use `@use "@db-ui/foundations/build/scss/icon/icons.helpers" as icons;` as dependency and e.g. `@include icons.icon("arrow_forward"), "after");`. For a dynamic icon you could prefer integrating it in HTML code with the `data-icon` attribute. +4. If you have to set a specific color (informational, warning, etc.) directly you can use `@use "@db-ui/foundations/build/styles/colors";`. You can take a look at the `notification` component for an example `packages/components/src/components/notification/notification.scss` you might use the `@each` to reduce the amount of code for color-variants. +5. To set a fixed icon you might use `@use "@db-ui/foundations/build/styles/icon/icons.helpers" as icons;` as dependency and e.g. `@include icons.icon("arrow_forward"), "after");`. For a dynamic icon you could prefer integrating it in HTML code with the `data-icon` attribute. ### Component structure with HTML diff --git a/docs/migration/alpha-beta.md b/docs/migration/alpha-beta.md index 055330baca2..dfbd6ab4eea 100644 --- a/docs/migration/alpha-beta.md +++ b/docs/migration/alpha-beta.md @@ -9,7 +9,7 @@ | 🔄 renamed `Tonality` to `Density` | class names and data-attributes changed from
`.db-ui-#{$tonality},[data-tonality="#{$tonality}"] {` to
`.db-#{density},[data-density="#{density}"] {` | search `tonality` & replace with `density` | | ❌ removed `opacity` tokens | we use only 1 opacity (0.4) for all components | If you use some of the tokens like `--db-opacity-sm` you might run into issues with your layout | | 🔄 updated `border` tokens | we add all shirt-sizes `3xs`-`3xl` as tokens | If you use some of the tokens like `db-border-height-sm` you might run into issues with your layout, because the values behind it changed | -| 🔄 moved `_font-sizes.scss` | We moved the file to another folder to align the same structure as icons or colors. We add `css` classes, you can use them by importing `@db-ui/foundations/scss/fonts/classes/all.css` | If you use some placeholder like `%db-overwrite-font-size-sm` you might need to import the `_font-sizes.scss` like this: `@use "@db-ui/foundations/build/scss/fonts";` | +| 🔄 moved `_font-sizes.scss` | We moved the file to another folder to align the same structure as icons or colors. We add `css` classes, you can use them by importing `@db-ui/foundations/scss/fonts/classes/all.css` | If you use some placeholder like `%db-overwrite-font-size-sm` you might need to import the `_font-sizes.scss` like this: `@use "@db-ui/foundations/build/styles/fonts";` | | 🔄 ❗ refactored `colors` | All colors changed. We use color-palettes to generate speaking-names (check `@db-ui/foundations/scss/colors/_variables.scss` to see a list of available tokens). We removed `base` color, it was the same like `neutral`. Add different background level. | 1. Replace all `base` colors with `neutral`
2. If you use the color class replace `db-bg-x` with `db-x-bg-lvl-1`
3. Replace `border-strong`/ `border-weak` tokens with `contrast-high`/`contrast-low` | | 🔄 renamed timing variables | renamed `$db-transition-emotional-timing` to `$db-transition-timing-emotional` / `--db-transition-emotional-timing` to `--db-transition-timing-emotional` | Replace `transition-emotional-timing` by `transition-timing-emotional` | @@ -74,6 +74,6 @@ This is related to the following properties: ## Styling We add some more information about our styling and try to generate classes and data-attributes to use in the project, based on user-preferences. -Moreover, we add all optional styles to `db-ui-42` which may increase the size, but reduces the complexity for using the Design-System with all features. +Moreover, we add all optional styles to `relative` which may increase the size, but reduces the complexity for using the Design-System with all features. If you encounter performance issues try to reduce your loaded styles with this [documentation](https://github.com/db-ui/mono/blob/main/packages/components/README.md#optimize-dependencies) or by using a tool like [purgecss](https://purgecss.com/). diff --git a/output/angular/README.md b/output/angular/README.md index ff2721cc7da..fe934295117 100644 --- a/output/angular/README.md +++ b/output/angular/README.md @@ -21,16 +21,16 @@ npm i @db-ui/ngx-components Import the styles in `scss` or `css`. Based on your technology the file names could be different. -- Default (db-ui-42): points to `../assets` -- Rollup (db-ui-42-rollup): points to `@db-ui/foundations/assets` -- Webpack (db-ui-42-webpack): points to `~@db-ui/foundations/assets` +- Default (relative): points to `../assets` +- Rollup (rollup): points to `@db-ui/foundations/assets` +- Webpack (webpack): points to `~@db-ui/foundations/assets`
SCSS ```scss styles.scss // styles.scss -@forward "@db-ui/components/build/styles/db-ui-42-rollup"; +@forward "@db-ui/components/build/styles/rollup"; ```
@@ -39,12 +39,12 @@ Import the styles in `scss` or `css`. Based on your technology the file names co ```css styles.css /* styles.css */ -@import "@db-ui/components/build/styles/db-ui-42-rollup.css"; +@import "@db-ui/components/build/styles/rollup.css"; ``` -> **Note:** The `db-ui-42` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information. +> **Note:** The `relative` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information. ### Resolve assets diff --git a/output/react/README.md b/output/react/README.md index 051f18b744f..4b7d74e4fd5 100644 --- a/output/react/README.md +++ b/output/react/README.md @@ -21,16 +21,16 @@ npm i @db-ui/react-components Import the styles in scss or css. Based on your technology the file names could be different. -- Default (db-ui-42): points to `../assets` -- Rollup (db-ui-42-rollup): points to `@db-ui/foundations/assets` -- Webpack (db-ui-42-webpack): points to `~@db-ui/foundations/assets` +- Default (relative): points to `../assets` +- Rollup (rollup): points to `@db-ui/foundations/assets` +- Webpack (webpack): points to `~@db-ui/foundations/assets`
SCSS ```scss // index.scss -@forward "@db-ui/components/build/styles/db-ui-42-rollup"; +@forward "@db-ui/components/build/styles/rollup"; ```
@@ -39,12 +39,12 @@ Import the styles in scss or css. Based on your technology the file names could ```tsx // main.tsx -import "@db-ui/components/build/styles/db-ui-42-rollup.css"; +import "@db-ui/components/build/styles/rollup.css"; ``` -> **Note:** The `db-ui-42` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information. +> **Note:** The `relative` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information. ## Usage diff --git a/output/stencil/README.md b/output/stencil/README.md index 63526071d83..a3f4bdc1acb 100644 --- a/output/stencil/README.md +++ b/output/stencil/README.md @@ -19,16 +19,16 @@ npm i @db-ui/web-components Import the styles in scss or css. Based on your technology the file names could be different. -- Default (db-ui-42): points to `../assets` -- Rollup (db-ui-42-rollup): points to `@db-ui/foundations/assets` -- Webpack (db-ui-42-webpack): points to `~@db-ui/foundations/assets` +- Default (relative): points to `../assets` +- Rollup (rollup): points to `@db-ui/foundations/assets` +- Webpack (webpack): points to `~@db-ui/foundations/assets`
SCSS ```scss // index.scss -@forward "@db-ui/components/build/styles/db-ui-42-rollup"; +@forward "@db-ui/components/build/styles/rollup"; ```
@@ -37,12 +37,12 @@ Import the styles in scss or css. Based on your technology the file names could ```js // main.js -import "@db-ui/components/build/styles/db-ui-42-rollup.css"; +import "@db-ui/components/build/styles/rollup.css"; ``` -> **Note:** The `db-ui-42` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information. +> **Note:** The `relative` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information. ## Usage diff --git a/output/vue/README.md b/output/vue/README.md index c2036f0aa1a..76f7c630d71 100644 --- a/output/vue/README.md +++ b/output/vue/README.md @@ -21,16 +21,16 @@ npm i @db-ui/v-components Import the styles in scss or css. Based on your technology the file names could be different. -- Default (db-ui-42): points to `../assets` -- Rollup (db-ui-42-rollup): points to `@db-ui/foundations/assets` -- Webpack (db-ui-42-webpack): points to `~@db-ui/foundations/assets` +- Default (relative): points to `../assets` +- Rollup (rollup): points to `@db-ui/foundations/assets` +- Webpack (webpack): points to `~@db-ui/foundations/assets`
SCSS ```scss // style.scss -@forward "@db-ui/components/build/styles/db-ui-42-rollup"; +@forward "@db-ui/components/build/styles/rollup"; ``` ```ts @@ -44,12 +44,12 @@ import "./style.scss"; ```ts // main.ts -import "@db-ui/components/build/styles/db-ui-42-rollup.css"; +import "@db-ui/components/build/styles/rollup.css"; ```
-> **Note:** The `db-ui-42` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information. +> **Note:** The `relative` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information. ## Usage diff --git a/packages/components/_templates/mitosis/new/component/db-ui-components-angular.ejs.t b/packages/components/_templates/mitosis/new/component/db-ui-components-angular.ejs.t deleted file mode 100644 index 2d3eaee1e65..00000000000 --- a/packages/components/_templates/mitosis/new/component/db-ui-components-angular.ejs.t +++ /dev/null @@ -1,6 +0,0 @@ ---- -inject: true -to: src/styles/_custom-elements.scss -after: angular-workaround ---- -db-<%= name %>, diff --git a/packages/components/_templates/mitosis/new/component/db-ui-components-wc.ejs.t b/packages/components/_templates/mitosis/new/component/db-ui-components-wc.ejs.t new file mode 100644 index 00000000000..b31922ecc27 --- /dev/null +++ b/packages/components/_templates/mitosis/new/component/db-ui-components-wc.ejs.t @@ -0,0 +1,6 @@ +--- +inject: true +to: src/styles/internal/_custom-elements.scss +after: //hygen-insert +--- +db-<%= name %>, diff --git a/packages/components/_templates/mitosis/new/component/db-ui-components.ejs.t b/packages/components/_templates/mitosis/new/component/db-ui-components.ejs.t index dc44bfc2662..c49d4a0fc00 100644 --- a/packages/components/_templates/mitosis/new/component/db-ui-components.ejs.t +++ b/packages/components/_templates/mitosis/new/component/db-ui-components.ejs.t @@ -1,6 +1,6 @@ --- inject: true -to: src/styles/db-ui-components.scss -before: angular-workaround +to: src/styles/index.scss +append: true --- @forward "../components/<%= name %>/<%= name %>"; diff --git a/packages/components/_templates/mitosis/new/component/html.ejs.t b/packages/components/_templates/mitosis/new/component/html.ejs.t index cd372ada19b..688537b0b0f 100644 --- a/packages/components/_templates/mitosis/new/component/html.ejs.t +++ b/packages/components/_templates/mitosis/new/component/html.ejs.t @@ -6,7 +6,7 @@ to: src/components/<%= name %>/index.html DB<%= h.changeCase.pascal(name) %> - +
Test
diff --git a/packages/components/docs/getting-started.md b/packages/components/docs/getting-started.md index 4bf45bb6899..3bb70e42bf4 100644 --- a/packages/components/docs/getting-started.md +++ b/packages/components/docs/getting-started.md @@ -54,13 +54,13 @@ The integration depends on your tech stack and varies from copying the files fro #### Via HTML stylesheet include ```html - + ``` #### Via SCSS import ```scss -@use "@db-ui/components/build/styles/db-ui-42"; +@use "@db-ui/components/build/styles/relative"; ``` ### SCSS: node_modules include path / load path diff --git a/packages/components/index.html b/packages/components/index.html index e32ddf18f9d..ccea238f77b 100644 --- a/packages/components/index.html +++ b/packages/components/index.html @@ -4,7 +4,7 @@ Dev - +