From fe5b450bd660774b8764cfd57478e543edabe1ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Fern=C3=A1ndez=20de=20Alba?= Date: Sat, 14 Dec 2024 16:33:46 +0100 Subject: [PATCH] Apply suggestions from code review Co-authored-by: Steve Piercy --- docs/source/configuration/settings-reference.md | 2 +- packages/components/README.md | 4 ++-- packages/components/news/6539.bugfix | 2 +- packages/components/src/stories/Introduction.mdx | 10 +++++----- packages/types/news/6539.feature | 2 +- packages/volto/news/6539.feature | 2 +- 6 files changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/source/configuration/settings-reference.md b/docs/source/configuration/settings-reference.md index ae5e32cc76..0f156cf8a9 100644 --- a/docs/source/configuration/settings-reference.md +++ b/docs/source/configuration/settings-reference.md @@ -464,7 +464,7 @@ querystringSearchGet Please test this setting properly before enabling in a production site. cssLayers - If you want to use CSS layers in Volto styling, it's possible to define them making sure that they are defined and applied at the very top level of the page (head tag). + To use CSS layers when styling Volto, you can define and apply them at the very top level of the page, where they appear in the `` tag. By using this configuration, you can pass the layer list definition as an array: ```js diff --git a/packages/components/README.md b/packages/components/README.md index ba7a55d313..136e6b09c4 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -64,7 +64,7 @@ You can override them in your classes while maintaining them for others. ### CSS layers -This package use CSS layers to provide a way to style the components in a more flexible way. +This package uses CSS layers to style the components in a more flexible way. It uses the `plone-components` layer name to scope all the CSS declarations in the package. The basic styling uses the nested `plone-components.base` named layer. You can use the `plone-components` layer to override the basic styling, or use the `plone-components.base` layer to override the basic styling in a more specific way. @@ -72,7 +72,7 @@ You can use the `plone-components` layer to override the basic styling, or use t ### Quanta This package also features the Quanta components. -These components use the basic styling as a baseline, extending them to achieve Quanta look and feel. +These components use the basic styling as a baseline, extending them to achieve the Quanta look and feel. They also extend the basic React components in a composable way. The Quanta styling is scoped in the `plone-components.quanta` named layer. diff --git a/packages/components/news/6539.bugfix b/packages/components/news/6539.bugfix index 361d1622ce..b64e94c1ea 100644 --- a/packages/components/news/6539.bugfix +++ b/packages/components/news/6539.bugfix @@ -1 +1 @@ -Fixed precedence of the quanta layer by adding a base layer for all the basic components. @sneridagh +Fixed precedence of the Quanta layer by adding a base layer for all the basic components. @sneridagh diff --git a/packages/components/src/stories/Introduction.mdx b/packages/components/src/stories/Introduction.mdx index 8ddefc56b6..13c0095184 100644 --- a/packages/components/src/stories/Introduction.mdx +++ b/packages/components/src/stories/Introduction.mdx @@ -11,8 +11,8 @@ The purpose of this package is to provide an agnostic set of baseline components ## Usage -Using the package manager of your choice (npm, yarn, pnpm) to install the package in your app. -Use pnpm in case you are adding them a Volto add-on/workspace: +You can use your choice of package manager (npm, yarn, or pnpm) to install the package in your app. +If you add the components to a Volto add-on or workspace, use pnpm, as shown. ```shell pnpm add @plone/components @@ -56,15 +56,15 @@ import '@plone/components/src/styles/basic/TextField.css'; ### CSS layers -This package use CSS layers to provide a way to style the components in a more flexible way. +This package uses CSS layers to style the components in a more flexible way. It uses the `plone-components` layer name to scope all the CSS declarations in the package. The basic styling uses the nested `plone-components.base` named layer. You can use the `plone-components` layer to override the basic styling, or use the `plone-components.base` layer to override the basic styling in a more specific way. -## Quanta +### Quanta This package also features the Quanta components. -These components use the basic styling as a baseline, extending them to achieve Quanta look and feel. +These components use the basic styling as a baseline, extending them to achieve the Quanta look and feel. They also extend the basic React components in a composable way. The Quanta styling is scoped in the `plone-components.quanta` named layer. diff --git a/packages/types/news/6539.feature b/packages/types/news/6539.feature index 143b1dea15..4bad8ad4c9 100644 --- a/packages/types/news/6539.feature +++ b/packages/types/news/6539.feature @@ -1 +1 @@ -Added the type for a setting in config object for setting the site's CSS layers. @sneridagh +Added the typing for the new `cssLayers` configuration object setting. @sneridagh diff --git a/packages/volto/news/6539.feature b/packages/volto/news/6539.feature index af18c38ee5..1e91372fc7 100644 --- a/packages/volto/news/6539.feature +++ b/packages/volto/news/6539.feature @@ -1 +1 @@ -Added a setting in config object for setting the site's CSS layers, if required. @sneridagh +Added a setting in the `config` object to set the site's CSS layers, if required. @sneridagh