From 2a24bb475ff8cfbd0ee1632ecfb482219bd53204 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Thu, 16 May 2024 19:58:22 +0300 Subject: [PATCH 1/2] refactor: component generator refactoring --- .stylelintignore | 2 ++ README.md | 9 ++++----- component-generator/constants.js | 4 ---- component-generator/templates/_variables.scss | 2 -- component-generator/templates/index.scss | 5 ++--- www/src/pages/tools/component-generator.mdx | 9 ++++----- 6 files changed, 12 insertions(+), 19 deletions(-) create mode 100644 .stylelintignore delete mode 100644 component-generator/templates/_variables.scss diff --git a/.stylelintignore b/.stylelintignore new file mode 100644 index 0000000000..beccdbbe83 --- /dev/null +++ b/.stylelintignore @@ -0,0 +1,2 @@ +component-generator/** +example/** diff --git a/README.md b/README.md index 95f7d78473..6890c6d03c 100644 --- a/README.md +++ b/README.md @@ -274,8 +274,7 @@ This will create a directory in `/src/` that will contain templates for all nece MyComponent ├── index.jsx ├── README.md -├── MyComponent.scss -├── _variables.scss +├── index.scss └── MyComponent.test.jsx ``` @@ -314,10 +313,10 @@ export default MyComponent; ##### 4. (Optional) Add styles to your component. If your component requires additional styling (which most likely is the case), edit created SCSS style sheet in your -component's directory `/src/MyComponent/MyComponent.scss` which by default contains an empty class for your component. +component's directory `/src/MyComponent/index.scss` which by default contains an empty class for your component. -If you wish to use SASS variables (which is the preferred way of styling the components since values can be -easily overridden and customized by the consumers of Paragon), add them in `/src/MyComponent/_variables.scss` (this file should contain all variables specific to your component). +If you wish to use CSS variables (which is the preferred way of styling the components since values can be +easily overridden and customized by the consumers of Paragon), create specific design tokens in `tokens` directory (in the `core` and `themes` directories) and then generate (`npm run build-tokens`) CSS variables for your component. This way the variables will also get automatically picked up by documentation site and displayed on your component's page. **Please note that you need to follow [Paragon's CSS styling conventions](docs/decisions/0012-css-styling-conventions).** diff --git a/component-generator/constants.js b/component-generator/constants.js index 4c6b3158b7..22a81a1dda 100644 --- a/component-generator/constants.js +++ b/component-generator/constants.js @@ -14,10 +14,6 @@ exports.COMPONENT_FILES = [ targetPath: path.resolve(__dirname, '../src/componentName/index.jsx'), templatePath: path.resolve(__dirname, './templates/index.jsx'), }, - { - targetPath: path.resolve(__dirname, '../src/componentName/_variables.scss'), - templatePath: path.resolve(__dirname, './templates/_variables.scss'), - }, { targetPath: path.resolve(__dirname, '../src/componentName/README.md'), templatePath: path.resolve(__dirname, './templates/README.md'), diff --git a/component-generator/templates/_variables.scss b/component-generator/templates/_variables.scss deleted file mode 100644 index da27744c34..0000000000 --- a/component-generator/templates/_variables.scss +++ /dev/null @@ -1,2 +0,0 @@ -// Put SASS variables related to your component here, -// you can safely delete this file if you do not intend to use any variables diff --git a/component-generator/templates/index.scss b/component-generator/templates/index.scss index ed35fec762..bf5fbbb705 100644 --- a/component-generator/templates/index.scss +++ b/component-generator/templates/index.scss @@ -1,6 +1,5 @@ -// Put styles related to your component here - -@import "variables"; +// Put design tokens in `tokens` directory if you need to create variables related to your component, +// you can safely delete this file if you do not intend to use any styles .pgn__css-class { diff --git a/www/src/pages/tools/component-generator.mdx b/www/src/pages/tools/component-generator.mdx index 8248c47cdc..6f9e1731d5 100644 --- a/www/src/pages/tools/component-generator.mdx +++ b/www/src/pages/tools/component-generator.mdx @@ -30,8 +30,7 @@ This will create a directory in `/src/` that will contain templates for all nece MyComponent ├── index.jsx ├── README.md -├── MyComponent.scss -├── _variables.scss +├── index.scss └── MyComponent.test.jsx ``` @@ -70,10 +69,10 @@ export default MyComponent; ## 4. (Optional) Add styles to your component. If your component requires additional styling (which most likely is the case), edit created SCSS style sheet in your -component's directory `/src/MyComponent/MyComponent.scss` which by default contains an empty class for your component. +component's directory `/src/MyComponent/index.scss` which by default contains an empty class for your component. -If you wish to use SASS variables (which is the preferred way of styling the components since values can be -easily overridden and customized by the consumers of Paragon), add them in `/src/MyComponent/_variables.scss` (this file should contain all variables specific to your component). +If you wish to use CSS variables (which is the preferred way of styling the components since values can be +easily overridden and customized by the consumers of Paragon), create specific design tokens in `tokens` directory (in the `core` and `themes` directories) and then generate (`npm run build-tokens`) CSS variables for your component. This way the variables will also get automatically picked up by documentation site and displayed on your component's page. **Please note that you need to follow [Paragon's CSS styling conventions](https://github.com/openedx/paragon/blob/master/docs/decisions/0012-css-styling-conventions).** From 9e347cb565a3603e4b8cc4e867120b1b5fe38acb Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Wed, 22 May 2024 11:15:03 +0300 Subject: [PATCH 2/2] refactor: after review --- README.md | 3 +-- tokens/README.md | 3 +-- www/src/pages/tools/component-generator.mdx | 3 +-- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 6890c6d03c..54cf6a060d 100644 --- a/README.md +++ b/README.md @@ -316,8 +316,7 @@ If your component requires additional styling (which most likely is the case), e component's directory `/src/MyComponent/index.scss` which by default contains an empty class for your component. If you wish to use CSS variables (which is the preferred way of styling the components since values can be -easily overridden and customized by the consumers of Paragon), create specific design tokens in `tokens` directory (in the `core` and `themes` directories) and then generate (`npm run build-tokens`) CSS variables for your component. -This way the variables will also get automatically picked up by documentation site and displayed on your component's page. +easily overridden and customized by the consumers of Paragon), you can do so by utilizing [design tokens](/tokens). **Please note that you need to follow [Paragon's CSS styling conventions](docs/decisions/0012-css-styling-conventions).** diff --git a/tokens/README.md b/tokens/README.md index 8beb998d7d..f93e56f49b 100644 --- a/tokens/README.md +++ b/tokens/README.md @@ -1,7 +1,6 @@ # Design Tokens -This module is responsible for handling design tokens in Paragon, for rationale behind design tokens see [Scaling Paragon's styles architecture with design tokens](https://openedx.atlassian.net/wiki/spaces/BPL/pages/3630923811/Scaling+Paragon+s+styles+architecture+with+design+tokens) -and relevant ADR(TODO: add link when we merge an ADR). +This module is responsible for handling design tokens in Paragon, for rationale behind design tokens see [Scaling Paragon's styles architecture with design tokens](https://openedx.atlassian.net/wiki/spaces/BPL/pages/3630923811/Scaling+Paragon+s+styles+architecture+with+design+tokens). ## Overview diff --git a/www/src/pages/tools/component-generator.mdx b/www/src/pages/tools/component-generator.mdx index 6f9e1731d5..89a4365b27 100644 --- a/www/src/pages/tools/component-generator.mdx +++ b/www/src/pages/tools/component-generator.mdx @@ -72,8 +72,7 @@ If your component requires additional styling (which most likely is the case), e component's directory `/src/MyComponent/index.scss` which by default contains an empty class for your component. If you wish to use CSS variables (which is the preferred way of styling the components since values can be -easily overridden and customized by the consumers of Paragon), create specific design tokens in `tokens` directory (in the `core` and `themes` directories) and then generate (`npm run build-tokens`) CSS variables for your component. -This way the variables will also get automatically picked up by documentation site and displayed on your component's page. +easily overridden and customized by the consumers of Paragon), you can do so by utilizing [design tokens](/tokens). **Please note that you need to follow [Paragon's CSS styling conventions](https://github.com/openedx/paragon/blob/master/docs/decisions/0012-css-styling-conventions).**