Skip to content

chore: remove as * from scss and documentation #1926

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

Merged
merged 2 commits into from
Nov 29, 2023
Merged

chore: remove as * from scss and documentation #1926

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9ad7002
chore: remove as * from scss and documentation
nmerget Nov 29, 2023
1f2be8e
Merge branch 'main' into chore-1687-remove-as-star
mfranzke Nov 29, 2023
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
6 changes: 3 additions & 3 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 @@ -19,12 +19,12 @@

### Styling with SCSS

Starting with `packages/components/src/components/my-awesome-component/my-awesome-component.scss` there are some thing you should know:
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.global` included via `@use "@db-ui/foundations/build/scss/variables.global" as *;`. They enable you to use e.g. `$db-spacing-fixed-md` for paddings, margins etc.
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/tonality/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/color-placeholder" as *;`, but we also provide a file to cover all variants with `@use "@db-ui/foundations/build/scss/color/color-variants" as *;`. You can take a look at the `alert` component for an example `packages/components/src/components/alert/alert.scss` you might use the `@each` to reduce the amount of code for color-variants.
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 `alert` component for an example `packages/components/src/components/alert/alert.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.

### Component structure with HTML
Expand Down
2 changes: 1 addition & 1 deletion output/angular/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Import the styles in scss or css. Based on your technology the file names could

```scss styles.scss
// styles.scss
@use "@db-ui/components/build/styles/db-ui-42-webpack" as *;
@forward "@db-ui/components/build/styles/db-ui-42-webpack";
```

</details>
Expand Down
2 changes: 1 addition & 1 deletion output/react/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Import the styles in scss or css. Based on your technology the file names could

```scss
// index.scss
@use "@db-ui/components/build/styles/db-ui-42-rollup" as *;
@forward "@db-ui/components/build/styles/db-ui-42-rollup";
```

</details>
Expand Down
2 changes: 1 addition & 1 deletion output/vue/vue3/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Import the styles in scss or css. Based on your technology the file names could

```scss
// style.scss
@use "@db-ui/components/build/styles/db-ui-42-rollup" as *;
@forward "@db-ui/components/build/styles/db-ui-42-rollup";
```

```ts
Expand Down
2 changes: 1 addition & 1 deletion packages/components/_templates/mitosis/new/component/db-ui-components.ejs.t
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@ inject: true
to: src/styles/db-ui-components.scss
before: angular-workaround
---
@use "../components/<%= name %>/<%= name %>" as *;
@forward "../components/<%= name %>/<%= name %>";
2 changes: 1 addition & 1 deletion packages/components/_templates/mitosis/new/db-ui-components-use.ejs.t
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ to: src/styles/db-ui-components.scss
prepend: true
skip_if: components/<%= name %>
---
@use "../components/<%= name %>/<%= name %>" as *;
@forward "../components/<%= name %>/<%= name %>";
2 changes: 1 addition & 1 deletion packages/components/src/components/input/docs/Angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
Load SCSS globally within `styles.scss` in your app:

```scss
@use "@db-ui/components/build/styles/db-ui-42-webpack" as *;
@forward "@db-ui/components/build/styles/db-ui-42-webpack";
```

Load component within `app.module.ts`:
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/input/docs/HTML.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
Load SCSS globally somewhere in your app:

```scss
@use "@db-ui/components/build/styles/db-ui-42" as *;
@forward "@db-ui/components/build/styles/db-ui-42";
```

Use it:
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/input/docs/React.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
Load SCSS globally in a `index.scss` file inside `main.tsx`/`main.jsx` within your app:

```scss
@use "@db-ui/components/build/styles/db-ui-42-rollup" as *;
@forward "@db-ui/components/build/styles/db-ui-42-rollup";
```

Import component:
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/input/docs/Vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
Load SCSS globally in a `index.scss` file and import it in your `main.ts`/`main.js` file in your app:

```scss
@use "@db-ui/components/build/styles/db-ui-42-rollup" as *;
@forward "@db-ui/components/build/styles/db-ui-42-rollup";
```

Use component:
Expand Down
3 changes: 0 additions & 3 deletions packages/components/src/components/input/input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
// TODO: Why do we need the default assets here?
@use "@db-ui/foundations/build/scss/default.assets-paths" as *;

@use "@db-ui/foundations/build/scss/variables";
@use "@db-ui/foundations/build/scss/icons";
@use "@db-ui/foundations/build/scss/tonality";
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/styles/db-ui-42-rollup.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* This is a predefined beginner friendly bundle for rollup apps */

@use "@db-ui/foundations/build/scss/rollup.assets-paths" as *;
@use "@db-ui/foundations/build/scss/rollup.assets-paths";
@forward "./db-ui-42";
2 changes: 1 addition & 1 deletion packages/components/src/styles/db-ui-42-webpack.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* This is a predefined beginner friendly bundle for webpack apps */

@use "@db-ui/foundations/build/scss/webpack.assets-paths" as *;
@use "@db-ui/foundations/build/scss/webpack.assets-paths";
@forward "./db-ui-42";
58 changes: 29 additions & 29 deletions packages/components/src/styles/db-ui-components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
@use "@db-ui/foundations/build/scss/db-ui-foundations" as *;
@use "../components/button/button" as *;
@use "../components/icon/icon" as *;
@use "../components/tab/tab" as *;
@use "../components/tab-bar/tab-bar" as *;
@use "../components/divider/divider" as *;
@use "../components/card/card" as *;
@use "../components/input/input" as *;
@use "../components/brand/brand" as *;
@use "../components/header/header" as *;
@use "../components/page/page" as *;
@use "../components/link/link" as *;
@use "../components/section/section" as *;
@use "../components/infotext/infotext" as *;
@use "../components/alert/alert" as *;
@use "../components/checkbox/checkbox" as *;
@use "../components/radio/radio" as *;
@use "../components/code-docs/code-docs" as *;
@use "../components/tag/tag" as *;
@use "../components/drawer/drawer" as *;
@use "../components/select/select" as *;
@use "../components/navigation-item/navigation-item" as *;
@use "../components/textarea/textarea" as *;
@use "../components/badge/badge" as *;
@forward "@db-ui/foundations/build/scss/db-ui-foundations";
@forward "../components/button/button";
@forward "../components/icon/icon";
@forward "../components/tab/tab";
@forward "../components/tab-bar/tab-bar";
@forward "../components/divider/divider";
@forward "../components/card/card";
@forward "../components/input/input";
@forward "../components/brand/brand";
@forward "../components/header/header";
@forward "../components/page/page";
@forward "../components/link/link";
@forward "../components/section/section";
@forward "../components/infotext/infotext";
@forward "../components/alert/alert";
@forward "../components/checkbox/checkbox";
@forward "../components/radio/radio";
@forward "../components/code-docs/code-docs";
@forward "../components/tag/tag";
@forward "../components/drawer/drawer";
@forward "../components/select/select";
@forward "../components/navigation-item/navigation-item";
@forward "../components/textarea/textarea";
@forward "../components/badge/badge";

@use "../components/accordion/accordion" as *;
@forward "../components/accordion/accordion";

@use "../components/accordion-item/accordion-item" as *;
@use "../components/main-navigation/main-navigation" as *;
@forward "../components/accordion-item/accordion-item";
@forward "../components/main-navigation/main-navigation";

@use "../components/popover/popover" as *;
@use "../components/tooltip/tooltip" as *;
@forward "../components/popover/popover";
@forward "../components/tooltip/tooltip";
@forward "dialog-init";

// angular-workaround
Expand Down