Skip to content

Commit

Permalink
refactor: running prettier (#3494)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mfranzke
mfranzke authored Nov 21, 2024
1 parent 6cbb208 commit 2839caa
Show file tree
Hide file tree
Showing 6 changed files with 39 additions and 35 deletions.
2 changes: 1 addition & 1 deletion .github/scripts/build-gh-page.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ if [[ $PRE_RELEASE == "true" || $RELEASE == "true" ]]; then
rm -rf ./public/version/"$NAME"
fi
if [[ $RELEASE == "true" ]]; then
if [[ -d ./public/version/latest ]]; then
if [[ -d ./public/version/latest ]]; then
echo " Remove dir ./public/version/latest"
rm -rf ./public/version/latest
fi
Expand Down
34 changes: 17 additions & 17 deletions docs/research/stack.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,23 @@

## Overview

| Design System | Component | Comment |
| --------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------ |
| [Atlassian Design System](https://bitbucket.org/atlassian/atlaskit/src/master/) | [stack](https://atlassian.design/components/primitives/stack/examples) | `display:flex` |
| [Bootstrap](https://github.com/twbs/bootstrap) | [flex](https://getbootstrap.com/docs/4.3/utilities/flex/) | `display:flex`, |
| [GitHub Primer](https://github.com/primer/css) | [stack](https://primer.style/components/stack) | `display:flex` |
| [GitLab Pajamas](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com) | ❌ | -- |
| [HP Enterprise Grommet](https://github.com/grommet/grommet) | [stack](https://v2.grommet.io/stack) | This `stack` is different to what we expect |
| [IBM Carbon](https://github.com/carbon-design-system/carbon) | ❌ | -- |
| [Material UI](https://github.com/mui/material-ui) | [stack](https://mui.com/material-ui/react-stack/) | `display:flex`, nice: [Dividers](https://mui.com/material-ui/react-stack/#dividers) |
| [MongoDB.design](https://github.com/mongodb/design) | ❌ | -- |
| [Porsche Design System](https://github.com/porsche-design-system/porsche-design-system) | [flex](https://designsystem.porsche.com/v3/components/flex/examples) | `display:flex`, deprecated |
| [SBB Lyne](https://github.com/lyne-design-system/lyne-components) | ❌ | -- |
| [Shopify Polaris](https://github.com/Shopify/polaris) | [block-stack](https://polaris.shopify.com/components/layout-and-structure/block-stack) & [inline-stack](https://polaris.shopify.com/components/layout-and-structure/inline-stack) | `display:flex`, split into 2 different components |
| [SNCF Design System](https://gitlab.com/SNCF/wcs) | [stack](https://designmetier-bootstrap.sncf.fr/docs/4.3/utilities/flex/) | `display:flex` |
| [Telefonica Mistica](https://github.com/Telefonica/mistica-web) | [stack](https://brandfactory.telefonica.com/d/iSp7b1DkYygv/n-a#/fundamentals/spacing:69673) | some pattern? |
| [Telekom Scale](https://github.com/telekom/scale) | ❌ | -- |
| [Washington Post Design System](https://build.washingtonpost.com/) | ❌ | -- |
| Design System | Component | Comment |
| --------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ----------------------------------------------------------------------------------- |
| [Atlassian Design System](https://bitbucket.org/atlassian/atlaskit/src/master/) | [stack](https://atlassian.design/components/primitives/stack/examples) | `display:flex` |
| [Bootstrap](https://github.com/twbs/bootstrap) | [flex](https://getbootstrap.com/docs/4.3/utilities/flex/) | `display:flex`, |
| [GitHub Primer](https://github.com/primer/css) | [stack](https://primer.style/components/stack) | `display:flex` |
| [GitLab Pajamas](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com) | ❌ | -- |
| [HP Enterprise Grommet](https://github.com/grommet/grommet) | [stack](https://v2.grommet.io/stack) | This `stack` is different to what we expect |
| [IBM Carbon](https://github.com/carbon-design-system/carbon) | ❌ | -- |
| [Material UI](https://github.com/mui/material-ui) | [stack](https://mui.com/material-ui/react-stack/) | `display:flex`, nice: [Dividers](https://mui.com/material-ui/react-stack/#dividers) |
| [MongoDB.design](https://github.com/mongodb/design) | ❌ | -- |
| [Porsche Design System](https://github.com/porsche-design-system/porsche-design-system) | [flex](https://designsystem.porsche.com/v3/components/flex/examples) | `display:flex`, deprecated |
| [SBB Lyne](https://github.com/lyne-design-system/lyne-components) | ❌ | -- |
| [Shopify Polaris](https://github.com/Shopify/polaris) | [block-stack](https://polaris.shopify.com/components/layout-and-structure/block-stack) & [inline-stack](https://polaris.shopify.com/components/layout-and-structure/inline-stack) | `display:flex`, split into 2 different components |
| [SNCF Design System](https://gitlab.com/SNCF/wcs) | [stack](https://designmetier-bootstrap.sncf.fr/docs/4.3/utilities/flex/) | `display:flex` |
| [Telefonica Mistica](https://github.com/Telefonica/mistica-web) | [stack](https://brandfactory.telefonica.com/d/iSp7b1DkYygv/n-a#/fundamentals/spacing:69673) | some pattern? |
| [Telekom Scale](https://github.com/telekom/scale) | ❌ | -- |
| [Washington Post Design System](https://build.washingtonpost.com/) | ❌ | -- |

## Conclusion

Expand Down
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,11 +86,11 @@
"validate-branch-name": "^1.3.1",
"xo": "^0.59.3"
},
"overrides": {
"cross-spawn": "~7.0.5"
},
"validate-branch-name": {
"pattern": "((dbux-3)|(dependabot-)|^((test|feat|fix|chore|docs|refactor|style|ci|perf|[0-9]+)\\-[a-zA-Z0-9\\-]+)$)",
"errorMsg": "There is something wrong with your branch name. You should rename your branch to a valid name and try again. See the Pattern below."
},
"overrides": {
"cross-spawn": "~7.0.5"
}
}
7 changes: 6 additions & 1 deletion packages/components/src/components/tag/tag.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,12 @@
display: none;
}

> :is([class="db-checkbox"], [class="db-radio"], [class="db-link"], [class="db-button"]) {
> :is(
[class="db-checkbox"],
[class="db-radio"],
[class="db-link"],
[class="db-button"]
) {
block-size: 100%;
}
}
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/shared/model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -522,7 +522,6 @@ export type ActiveProps = {
active?: boolean;
};


export type InputEvent<T> = Event;
export type InputEventProps<T> = {
input?: (event: InputEvent<T>) => void;
Expand Down
24 changes: 12 additions & 12 deletions packages/foundations/docs/IDESupport.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,9 @@ We try to support those IDEs:

Most use cases of the Design System might work in other IDEs as well.


## Autocomplete for CSS classes and CSS Custom Properties (Variables)


You can enable auto-complete of CSS classes (like e.g. `db-container-color-cyan`) for `HTML` or `JSX` and CSS Custom Properties (like e.g. `var(--db-bg-basic-level-1-default)`) in `.css` or `.scss` files by including `@db-ui/foundations/build/ide`.
You can enable auto-complete of CSS classes (like e.g. `db-container-color-cyan`) for `HTML` or `JSX` and CSS Custom Properties (like e.g. `var(--db-bg-basic-level-1-default)`) in `.css` or `.scss` files by including `@db-ui/foundations/build/ide`.

> **Note:** The contents of this directory shouldn't be included/referenced inside your app. It's only serving as a file containing declarations for autocompletion inside your IDE. All values for classes and properties don't reflect the real values, and neither does the CSS selector. The correct values my differ based on multiple circumstances like light-/dark-mode or screen-size etc. Therefore, there isn't a 1:1 mapping.
Expand All @@ -29,17 +27,19 @@ You can enable auto-complete of CSS classes (like e.g. `db-container-color-cyan`
1. Install [the CSS Variable Autocomplete extesion](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables).
2. If it doesn't exist, create a new file `.vscode/settings.json` in your project
3. Add this to `settings.json`:
````json settings.json

```json settings.json
{
"cssVariables.lookupFiles": [
"**/*.css",
"**/*.scss",
"**/*.sass",
"**/*.less",
"node_modules/@db-ui/foundations/build/ide/db.ide.css"
]
"cssVariables.lookupFiles": [
"**/*.css",
"**/*.scss",
"**/*.sass",
"**/*.less",
"node_modules/@db-ui/foundations/build/ide/db.ide.css"
]
}
````
```

4. Go to a `.css` file and write inside a selector `color: db-`. You should see the autocomplete for CSS Custom Properties. By pressing `ENTER` this will automatically add `var(--db-xxx)`.

> **Note:** We couldn't find a good extension to work properly with the classes you could try out [the SCSS Everywhere extension](https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion). But we encountered some issues with this one.

0 comments on commit 2839caa

Please sign in to comment.