Refactored ButtonsWidget and AlignWidget. New blockWidth, blockAlignment and size widgets based on ButtonsWidget.

.readthedocs.yaml

@@ -32,5 +32,6 @@ build:
     - asdf reshim nodejs
     - pnpm install
     - pnpm build:registry
+    - pnpm build:components
     - (cd packages/volto && pnpm build-storybook -o ${READTHEDOCS_OUTPUT}/html/storybook)
     - make docs-rtd-pr-preview

Makefile

@@ -162,7 +162,7 @@ packages/helpers/dist: $(shell find packages/helpers/src -type f)
 	pnpm build:helpers
 
 .PHONY: build-deps
-build-deps: packages/registry/dist ## Build dependencies
+build-deps: packages/registry/dist packages/components/dist ## Build dependencies
 
 .PHONY: build-all-deps
 build-all-deps: packages/registry/dist packages/components/dist packages/client/dist packages/providers/dist packages/helpers/dist ## Build all dependencies

docs/source/index.md

@@ -72,6 +72,7 @@ contributing/index
 release-notes/index
 release-management-notes/index
 conceptual-guides/index
+reference/index
 ```
 
 % Only check change log entries in Volto documentation—not when it is included in the main Plone documentation—to ensure links work and do not redirect.

docs/source/reference/index.md

@@ -0,0 +1,18 @@
+---
+myst:
+  html_meta:
+    "description": "Volto reference guides"
+    "property=og:description": "Volto reference guides"
+    "property=og:title": "Volto reference guides"
+    "keywords": "Volto, user interface, frontend, Plone, reference guides"
+---
+
+# Reference guides
+
+This section of the documentation contains reference guides for various aspects of Volto.
+
+```{toctree}
+:maxdepth: 1
+
+widgets
+```

docs/source/reference/widgets.md

@@ -0,0 +1,124 @@
+---
+myst:
+  html_meta:
+    "description": "Volto widgets"
+    "property=og:description": "Volto widgets"
+    "property=og:title": "Volto widgets"
+    "keywords": "Plone, Volto, widgets"
+---
+
+# Widgets
+
+This chapter describes the set of widgets available in Volto.
+
+## `ButtonsWidget`
+
+`ButtonsWidget` is a helper component for building widgets that have a list of buttons which can be toggled, allowing the selection of a single value only.
+It's a minimal, extensible base widget used by other widgets.
+It renders a set of mutually exclusive toggle buttons, and functions similarly to a radio input.
+
+With `ButtonsWidget`, you can do the following things.
+
+-   Supply a configurable list of actions, including strings or style definitions.
+-   Customize a per-action icon and label via the `actionsInfoMap` prop.
+-   Filter out default actions with the `filterActions` prop.
+-   Provide default and current values via `default` and `value` props.
+-   Pass `disabled` or `isDisabled` props to prevent interaction.
+
+The following code example demonstrates the complete options for `ButtonsWidget`.
+
+```ts
+type ActionInfo = [React.ReactElement<any>, string] | [string, string];
+
+type ActionValue = string | Record<`--${string}`, string>;
+
+export type ButtonsWidgetProps = {
+  /**
+   * Unique identifier for the widget.
+   */
+  id: string;
+
+  /**
+   * Callback function to handle changes.
+   */
+  onChange: (id: string, value: ActionValue) => void;
+
+  /**
+   * List of actions available for the widget.
+   */
+  actions?: Array<StyleDefinition | string>;
+
+  /**
+   * Map containing additional the information (icon and i18n string) for each action.
+   */
+  actionsInfoMap?: Record<string, ActionInfo>;
+
+  /**
+   * List of actions to be filtered out. In case that we don't want the default ones
+   * we can filter them out.
+   */
+  filterActions?: string[];
+
+  /**
+   * Current value of the widget.
+   */
+  value?: ActionValue;
+
+  /**
+   * Default value of the widget.
+   */
+  default?: ActionValue;
+
+  /**
+   * Indicates if the widget is disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Indicates if the widget is disabled (alternative flag for compatibility reasons).
+   */
+  isDisabled?: boolean;
+};
+```
+
+## `blockWidth`
+
+`blockWidth` is a widget to select a width from the defined `config.blocks.widths`.
+It's based on the `ButtonsWidget`, so the actions and the styles to be applied are configurable.
+
+````{card}
+```{image} ../_static/blockWidth.png
+:alt: blockWidth
+:target: ../_static/blockWidth.png
+```
++++
+_`blockWidth`_
+````
+
+## `blockAlignment`
+
+`blockAlignment` is a widget to select the block alignment, one of either `left`, `right`, or `center`.
+It's based on the `ButtonsWidget`, so the actions and the styles to be applied are configurable.
+
+````{card}
+```{image} ../_static/blockAlignment.png
+:alt: blockAlignment
+:target: ../_static/blockAlignment.png
+```
++++
+_`blockAlignment`_
+````
+
+## `size`
+
+`size` is a widget to select the block size from a default list of values, one of either `small`, `medium`, or `large`.
+It's based on the `ButtonsWidget`, so the actions and the styles to be applied are configurable.
+
+````{card}
+```{image} ../_static/size.png
+:alt: size
+:target: ../_static/size.png
+```
++++
+_`size`_
+````

docs/source/upgrade-guide/index.md

@@ -176,6 +176,32 @@ Volto now uses pnpm 10.
 
 If you have packages that use lifecycle scripts (such as `preinstall` or `postinstall`) in {file}`package.json`, you must configure `pnpm`'s [`onlyBuiltDependencies` setting](https://pnpm.io/settings#onlybuiltdependencies) to allow them.
 
+### `AlignWidget` and `ButtonsWidget` are now Semantic UI-free
+```{versionadded} Volto 19.0.0-alpha.10
+```
+
+The `AlignWidget` and `ButtonsWidget` components have been refactored to remove their dependency on Semantic UI.
+They are now based on the `@plone/components` library and refactored into TypeScript.
+To differentiate them from the old Semantic UI-based widgets, they use different `classNames`, too.
+This allows you to continue using the old widgets in either a shadow or customized version, if needed, without CSS conflicts.
+
+### `Size`, `blockWidth`, and `blockAlignment` widgets added
+```{versionadded} Volto 19.0.0-alpha.10
+```
+
+Three new widgets have been added based on the `ButtonsWidget` from `@plone/components`:
+`size` widget
+:   For selecting size options of either `small`, `medium`, or `large`.
+
+`blockWidth` widget
+:   For selecting block width options of either `narrow`, `default`, `layout`, or `full`.
+
+`blockAlignment` widget
+:   For selecting block alignment options of either `left`, `center`, or `right`.
+
+They are available in the global widgets configuration and can be used in your add-ons.
+They all are meant to be used using the `StyleWrapper` with custom CSS properties.
+
 (upgrading-to-volto-18-x-x)=
 
 ## Upgrading to Volto 18.x.x

packages/components/news/7555.feature

@@ -0,0 +1 @@
+Added `Radio` component to basic set of components, proxied from RAC. @sneridagh

packages/components/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { RadioGroup } from './RadioGroup';
-import { Radio } from 'react-aria-components';
+import { Radio, RadioGroup } from './RadioGroup';
 
 import type { Meta, StoryObj } from '@storybook/react-vite';
 

packages/components/src/components/RadioGroup/RadioGroup.tsx

@@ -4,6 +4,7 @@ import {
   Label,
   RadioGroup as RACRadioGroup,
   type RadioGroupProps as RACRadioGroupProps,
+  Radio,
   Text,
   type ValidationResult,
 } from 'react-aria-components';
@@ -31,3 +32,5 @@ export function RadioGroup({
     </RACRadioGroup>
   );
 }
+
+export { Radio };

packages/components/src/index.ts

@@ -31,7 +31,7 @@ export { Modal } from './components/Modal/Modal';
 export { NumberField } from './components/NumberField/NumberField';
 export { Popover, type PopoverProps } from './components/Popover/Popover';
 export { ProgressBar } from './components/ProgressBar/ProgressBar';
-export { RadioGroup } from './components/RadioGroup/RadioGroup';
+export { Radio, RadioGroup } from './components/RadioGroup/RadioGroup';
 export { RangeCalendar } from './components/RangeCalendar/RangeCalendar';
 export { SearchField } from './components/SearchField/SearchField';
 export { Select, SelectItem } from './components/Select/Select';

packages/types/news/7555.feature

@@ -0,0 +1 @@
+Added new widgets config typings. @sneridagh

packages/types/src/config/Widgets.d.ts

@@ -49,7 +49,10 @@ export type WidgetByWidgetTypes =
   | 'static_text'
   | 'hidden'
   | 'radio_group'
-  | 'checkbox_group';
+  | 'checkbox_group'
+  | 'blockAlignment'
+  | 'blockWidth'
+  | 'size';
 
 export type WidgetsConfigByWidget<
   K extends WidgetByWidgetTypes = WidgetByWidgetTypes,

packages/volto/Makefile

@@ -79,7 +79,7 @@ cypress-install: ## Install Cypress for acceptance tests
 	(cd ../../ && pnpm build:components)
 
 .PHONY: build-deps
-build-deps: ../registry/dist ## Build dependencies
+build-deps: ../registry/dist ../components/dist ## Build dependencies
 
 .PHONY: i18n
 i18n: ## Extract and compile translations

packages/volto/cypress/tests/core/blocks/blocks-teaser.js

@@ -43,7 +43,9 @@ context('Blocks Acceptance Tests', () => {
     ).click();
     cy.get('[aria-label="Select Blue Orchids"]').dblclick();
     cy.wait(500);
-    cy.get('.align-buttons .ui.buttons button[aria-label="Center"]').click();
+    cy.get(
+      '[class*="field-wrapper-align-"] .buttons input[aria-label="Center"]',
+    ).click({ force: true });
     cy.get('#toolbar-save').click();
 
     // THEN I can see the Teaser block

packages/volto/locales/ca/LC_MESSAGES/volto.po

@@ -605,6 +605,7 @@ msgstr "Cel·la"
 #: components/manage/Blocks/Maps/Edit
 #: components/manage/Sidebar/AlignBlock
 #: components/manage/Widgets/AlignWidget
+#: components/manage/Widgets/BlockAlignment
 msgid "Center"
 msgstr "Centre"
 
@@ -1014,6 +1015,7 @@ msgstr "Data (el més nou primer)"
 #: components/manage/Controlpanels/UndoControlpanel
 #: components/manage/Preferences/ChangePassword
 #: components/manage/Preferences/PersonalPreferences
+#: components/manage/Widgets/BlockWidth
 #: components/manage/Widgets/SchemaWidget
 #: components/manage/Widgets/SelectWidget
 #: components/theme/Comments/CommentEditModal
@@ -1667,6 +1669,7 @@ msgstr "Des de"
 #: components/manage/Blocks/Maps/Edit
 #: components/manage/Sidebar/AlignBlock
 #: components/manage/Widgets/AlignWidget
+#: components/manage/Widgets/BlockWidth
 msgid "Full"
 msgstr "Complet"
 
@@ -2052,6 +2055,7 @@ msgstr ""
 
 #. Default: "Large"
 #: components/manage/Widgets/ImageSizeWidget
+#: components/manage/Widgets/Size
 msgid "Large"
 msgstr ""
 
@@ -2082,6 +2086,7 @@ msgstr "Última versió"
 
 #. Default: "Layout"
 #: components/manage/Controlpanels/ContentTypesActions
+#: components/manage/Widgets/BlockWidth
 msgid "Layout"
 msgstr "Disseny"
 
@@ -2094,6 +2099,7 @@ msgstr "Imatge Principal"
 #: components/manage/Blocks/Maps/Edit
 #: components/manage/Sidebar/AlignBlock
 #: components/manage/Widgets/AlignWidget
+#: components/manage/Widgets/BlockAlignment
 msgid "Left"
 msgstr "A l'esquerra"
 
@@ -2292,6 +2298,7 @@ msgstr "El valor màxim és {len}."
 
 #. Default: "Medium"
 #: components/manage/Widgets/ImageSizeWidget
+#: components/manage/Widgets/Size
 msgid "Medium"
 msgstr ""
 
@@ -2404,6 +2411,7 @@ msgstr "Nom"
 
 #. Default: "Narrow"
 #: components/manage/Widgets/AlignWidget
+#: components/manage/Widgets/BlockWidth
 msgid "Narrow"
 msgstr ""
 
@@ -3120,6 +3128,7 @@ msgstr "Text enriquit"
 #: components/manage/Blocks/Maps/Edit
 #: components/manage/Sidebar/AlignBlock
 #: components/manage/Widgets/AlignWidget
+#: components/manage/Widgets/BlockAlignment
 msgid "Right"
 msgstr "Dret"
 
@@ -3516,6 +3525,7 @@ msgstr "Mida: {size}"
 
 #. Default: "Small"
 #: components/manage/Widgets/ImageSizeWidget
+#: components/manage/Widgets/Size
 msgid "Small"
 msgstr ""