Skip to content

fix(docs): filenames #4702

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.

Sign up for GitHub

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

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
+30 −29
Open

fix(docs): filenames #4702

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f60495b
fix(docs): corrected several paths
mfranzke Aug 7, 2025
6b6581e
fix(docs): corrected several paths
mfranzke Aug 7, 2025
bd3ba97
Merge branch 'main' into fix-docs-filenames
mfranzke Aug 7, 2025
2b840ab
fix: corrected path
mfranzke Aug 7, 2025
fc52f85
refactor(test): making the path check part of the pipeline
mfranzke Aug 7, 2025
b252835
refactor: we need to ignore some migration documents
mfranzke Aug 7, 2025
56e5274
refactor: updated further path
mfranzke Aug 7, 2025
950f3b7
refactor: we'd have to run build previous to checking the docs path
mfranzke Aug 11, 2025
4b8de0d
Merge branch 'main' into fix-docs-filenames
mfranzke Aug 11, 2025
116770d
Merge branch 'main' into fix-docs-filenames
mfranzke Aug 11, 2025
e92c419
Merge branch 'main' into fix-docs-filenames
mfranzke Aug 12, 2025
73a02f8
Update scripts/check-docs.js
mfranzke Aug 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/how-to-develop-a-component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ Starting with `packages/components/src/components/my-awesome-component/my-awesom

1. The most important dependency are the `variables` included via `@use "@db-ux/core-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-ux/core-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-ux/core-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).
3. Some components have an 'adaptive' styling. We exclude it in an own file `@use "@db-ux/core-components/build/styles/internal/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-ux/core-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-ux/core-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.
5. To set a fixed icon you might use `@use "@db-ux/core-foundations/build/styles/icons/icon-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

Expand Down
1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@
"rm:builds": "npm run rm:builds --workspace=scripts",
"start": "npm run start --workspace=patternhub",
"test": "npm run test --workspace=scripts",
"test:docs-file-references": "node scripts/check-docs.js",
"test:react-core-components": "playwright test --config output/react/playwright.config.ts --ui",
"test:vue-components": "playwright test --config output/vue/playwright.config.ts --ui",
"update:dependency:playwright": "node scripts/github/update-playwright.js"
Expand Down
12 changes: 6 additions & 6 deletions packages/components/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,19 +71,19 @@ In the case you want to include only some components, and you could do it like t

```css
/* The theme contains all prop required for components like spacings, colors, ... */
@import "@db-ux/core-foundations/build/styles/default-theme.css";
@import "@db-ux/core-foundations/build/styles/defaults/default-theme.css";
/* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup) */
@import "@db-ux/core-foundations/build/styles/fonts/include-rollup.css";
@import "@db-ux/core-foundations/build/styles/fonts/rollup.css";
/* The required styles will normalize css and add focus and default font to body */
@import "@db-ux/core-foundations/build/styles/init/required.css";
/* The default root adds a default color space (neutral) and a density (regular) */
@import "@db-ux/core-foundations/build/styles/init/default-root.css";
@import "@db-ux/core-foundations/build/styles/defaults/default-required.css";
/* The default setting for :root, adds a color space (neutral-bg-basic-level-1) and a density (regular). */
@import "@db-ux/core-foundations/build/styles/defaults/default-root.css";

/* Optional: Add animations / transitions for components */
@import "@db-ux/core-components/build/styles/component-animations.css";

/* Optional: Add data-icon/data-icon-trailing to global attributes to enable icons for components */
@import "@db-ux/core-foundations/build/styles/icons/include-rollup.css";
@import "@db-ux/core-foundations/build/styles/icons/rollup.css";

/* Optional: Add components */
@import "@db-ux/core-components/build/components/button/button.css";
Expand Down
14 changes: 7 additions & 7 deletions packages/components/test/import-styles/simple-button/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
// The theme contains all prop required for components like spacings, colors, ...
import '@db-ux/core-foundations/build/styles/default-theme.css';
import '@db-ux/core-foundations/build/styles/defaults/default-theme.css';
// The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup)
import '@db-ux/core-foundations/build/styles/fonts/include-rollup.css';
// The required styles will normalize css and add focus and default font to body
import '@db-ux/core-foundations/build/styles/init/required.css';
// The default root adds a default color space (neutral) and a density (regular)
import '@db-ux/core-foundations/build/styles/init/default-root.css';
import '@db-ux/core-foundations/build/styles/fonts/rollup.css';
/* The required styles will normalize css and add focus and default font to body */
import '@db-ux/core-foundations/build/styles/defaults/default-required.css';
/* The default setting for :root, adds a color space (neutral-bg-basic-level-1) and a density (regular). */
import '@db-ux/core-foundations/build/styles/defaults/default-root.css';

// Optional: Add animations / transitions for components
import '@db-ux/core-components/build/styles/component-animations.css';
// Optional: Add data-icon/data-icon-trailing to global attributes to enable icons for components
import '@db-ux/core-foundations/build/styles/icons/include-rollup.css';
import '@db-ux/core-foundations/build/styles/icons/rollup.css';

// Optional: Add components
import '@db-ux/core-components/build/components/button/button.css';
Expand Down
12 changes: 6 additions & 6 deletions packages/components/test/import-styles/simple-button/test.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
/* The theme contains all prop required for components like spacings, colors, ... */
@import url("@db-ux/core-foundations/build/styles/default-theme.css");
@import url("@db-ux/core-foundations/build/styles/defaults/default-theme.css");

/* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup) */
@import url("@db-ux/core-foundations/build/styles/fonts/include-rollup.css");
@import url("@db-ux/core-foundations/build/styles/fonts/rollup.css");

/* The required styles will normalize css and add focus and default font to body */
@import url("@db-ux/core-foundations/build/styles/init/required.css");
@import url("@db-ux/core-foundations/build/styles/defaults/default-required.css");

/* The default root adds a default color space (neutral) and a density (regular) */
@import url("@db-ux/core-foundations/build/styles/init/default-root.css");
/* The default setting for :root, adds a color space (neutral-bg-basic-level-1) and a density (regular). */
@import url("@db-ux/core-foundations/build/styles/defaults/default-root.css");

/* Optional: Add animations / transitions for components */
@import url("@db-ux/core-components/build/styles/component-animations.css");

/* Optional: Add data-icon/data-icon-trailing to global attributes to enable icons for components */
@import url("@db-ux/core-foundations/build/styles/icons/include-rollup.css");
@import url("@db-ux/core-foundations/build/styles/icons/rollup.css");

/* Optional: Add components */
@import url("@db-ux/core-components/build/components/button/button.css");
Expand Down
2 changes: 1 addition & 1 deletion packages/foundations/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,7 @@ If you want to optimize the size of the loaded styles, you might want to skip lo

```css
/* The theme contains all prop required for components like spacings, colors, etc. You can replace it with your own theme. */
@import "@db-ux/core-foundations/build/styles/default-theme.css";
@import "@db-ux/core-foundations/build/styles/defaults/default-theme.css";
/* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup). You can replace it with your own fonts. */
@import "@db-ux/core-foundations/build/styles/fonts/relative.css";
/* The icon include uses default icons based on your bundling paths (relative, absolute, webpack, rollup). You can replace it with your own icons. */
Expand Down
6 changes: 3 additions & 3 deletions packages/foundations/docs/Colors.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@

## How to include colors

For **CSS** and **Tailwind** you need to use the import `@import "@db-ux/core-foundations/build/styles/color/classes/all.css";` in your root `.css` file.
Or if you only want a single variant e.g. **informational** you can import `@import "@db-ux/core-foundations/build/styles/color/classes/informational.css";`.
For **CSS** and **Tailwind** you need to use the import `@import "@db-ux/core-foundations/build/styles/colors/classes/all.css";` in your root `.css` file.
Or if you only want a single variant e.g. **informational** you can import `@import "@db-ux/core-foundations/build/styles/colors/classes/informational.css";`.

In case that you're either using a bundler (recommended) or importing the CSS within your JavaScript files, please adapt this `@import` syntax accordingly.

For **SCSS** you need to use the import `@use "@db-ux/core-foundations/build/styles/color/placeholder"` in your `.scss` file, where you need to reference the specific variable.
For **SCSS** you need to use the import `@use "@db-ux/core-foundations/build/styles/colors/placeholder"` in your `.scss` file, where you need to reference the specific variable.
Then you can use e.g. **informational** color by extending our SCSS placeholders like this: `@extend %db-informational-bg-1`.

## Dark- & Light-Mode
Expand Down
7 changes: 4 additions & 3 deletions scripts/check-docs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ const config = {
markdownExtensions: ['md', 'mdx'],
// NPM organization prefix to look for
orgPrefix: '@db-ux/',
// Root directory to search from
rootDir: process.cwd(),
// Root directory to search from – as this script is run from the scripts directory, we set it to one level up
rootDir: process.cwd() + '/../',
// Workspace packages directory (adjust if different)
packagesDir: 'packages',
// Debug mode - set to true to see all references found
Expand All @@ -21,7 +21,8 @@ const config = {
'node_modules/**',
'**/node_modules/**',
'.git/**',
'docs/migration/**'
'docs/migration/**',
'showcases/patternhub/public/docs/migration/**'
]
};

Expand Down
1 change: 1 addition & 0 deletions scripts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
"start-showcase:vue": "npm run dev --workspace=vue-showcase",
"start:foundations": "npm run start --workspace=@db-ux/core-foundations",
"test": "npm-run-all --parallel test:*",
"test:docs-file-references": "node check-docs.js",
"test:migration": "npm run test --workspace=@db-ux/core-migration",
"test:scripts": "vitest run --config vitest.config.ts",
"update:icon-fonts": "npm-run-all generate:icon-fonts generate:icon-types"
Expand Down
Loading