diff --git a/README.md b/README.md index 2ee61d7..66daab0 100644 --- a/README.md +++ b/README.md @@ -110,6 +110,7 @@ With runtime options: - [Routes](docs/routes.md) - [Stimulus and AssetMapper integration](docs/stimulus-assetmapper.md) - [Table controls and interactions](docs/table-controls.md) +- [UI/UX rendering customization](docs/ui-ux-rendering.md) - [Column visibility and preferences](docs/preferences.md) - [User-facing filters](docs/filters.md) - [Server-side exports](docs/exports.md) diff --git a/docs/actions-and-cells.md b/docs/actions-and-cells.md index 3fd7aa6..2c3d266 100644 --- a/docs/actions-and-cells.md +++ b/docs/actions-and-cells.md @@ -645,6 +645,12 @@ $definition->setOption('rowActionDisplayMode', 'list'); This can be useful for custom layouts or narrow responsive displays. +## UI/UX rendering customization + +Action icons, row action display modes, boolean display modes and control layout options are documented in [`ui-ux-rendering.md`](ui-ux-rendering.md). + +This document is the recommended entry point for visual and ergonomic customization. + ## Recommended usage Use the current action system for simple back-office actions: diff --git a/docs/architecture.md b/docs/architecture.md index 8012fe6..eec7920 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -1258,6 +1258,22 @@ These options append classes and do not replace the bundle's default Bootstrap c This allows host applications to apply project-specific styling without overriding templates. +### UI/UX rendering customization + +UI/UX rendering customization is documented in `docs/ui-ux-rendering.md`. + +The documentation covers: + +- optional action icons; +- action icon position; +- row action display modes; +- boolean cell display modes; +- sortable header indicators; +- configurable control layout; +- additional root/wrapper/table CSS classes; +- Bootstrap table variants; +- current limitations. + ### Column header filter dropdown design Column header filter UI is designed in `docs/decisions/0006-column-header-filter-dropdowns.md`. diff --git a/docs/index.md b/docs/index.md index 3483035..97410a2 100644 --- a/docs/index.md +++ b/docs/index.md @@ -40,6 +40,7 @@ This bundle is a Symfony 8+ datatable bundle for Bootstrap-first business tables - [Cell template reference](cell-templates.md) - [Theming and rendering customization](theming.md) - [Optional icon rendering strategy](icons.md) +- [UI/UX rendering customization](ui-ux-rendering.md) ## Actions and security diff --git a/docs/roadmap.md b/docs/roadmap.md index 5c5a0ac..d211aed 100644 --- a/docs/roadmap.md +++ b/docs/roadmap.md @@ -475,26 +475,9 @@ Known limitations before first alpha: --- -# Next roadmap direction - -After milestone 0.14, the project enters a release preparation phase. - -## Recommended next step: first alpha preparation - -Before adding more features, the recommended next milestone is: - -```text -0.15 - First alpha preparation -``` - -Goal: - -```text -Validate the bundle in a fresh Symfony application and prepare the first public alpha tag. -``` - -Suggested work: +## 0.15 - First alpha preparation ✅ +Delivered: - run a fresh Symfony 8 smoke test; - install the bundle through a path repository; - test the minimal array datatable example; @@ -512,13 +495,47 @@ Suggested work: - prepare `CHANGELOG.md` for `v0.1.0-alpha.1`; - decide whether to publish to Packagist immediately or after smoke-test fixes. -## After alpha +`v0.1.0-alpha.1` is released. -After a first alpha exists, possible next feature milestones are: +--- -### 0.16 - Stabilization from smoke tests +## 0.16 - UI/UX rendering polish ✅ -Fix issues discovered during fresh-app integration. +Delivered: + +- Optional action icon rendering improvements. +- Action icon positioning. +- Row action display modes: + - inline; + - dropdown; + - list. +- Boolean cell display modes: + - badge; + - icon; + - switch; + - text. +- Polished sortable header rendering. +- Configurable datatable control layout. +- Additional root, wrapper and table CSS class options. +- Column header filter dropdown design decision. +- UI/UX rendering customization documentation. + +Main outcome: + +```text +The datatable UI is now more adaptable to real business application layouts while remaining Bootstrap-first and dependency-light. +``` + +Current limitations: + +- no icon provider abstraction; +- no icon-only action mode; +- no modal confirmation; +- no Tailwind theme; +- no column header filter implementation yet; +- no frontend automated test suite. + +--- ### 0.17 - Symfony Flex recipe decision diff --git a/docs/table-controls.md b/docs/table-controls.md index ae03126..ff58227 100644 --- a/docs/table-controls.md +++ b/docs/table-controls.md @@ -368,6 +368,10 @@ The design keeps filtering close to the column while avoiding a crowded toolbar. This feature is not implemented yet. It is documented as an upcoming UI pattern in [`decisions/0006-column-header-filter-dropdowns.md`](decisions/0006-column-header-filter-dropdowns.md). +## UI/UX rendering customization + +For a consolidated reference about table controls layout, sortable headers, boolean display modes and additional CSS classes, see [`ui-ux-rendering.md`](ui-ux-rendering.md). + ## Related documentation - [`stimulus-assetmapper.md`](stimulus-assetmapper.md) diff --git a/docs/theming.md b/docs/theming.md index 0a2d5fb..f8ccac7 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -321,6 +321,20 @@ For project-specific styling, applications can append CSS classes without overri The bundle keeps its default Bootstrap classes and appends the provided classes. +## UI/UX rendering customization + +The UI/UX customization options are summarized in [`ui-ux-rendering.md`](ui-ux-rendering.md). + +It covers: + +- action icons; +- action display modes; +- boolean display modes; +- sortable header indicators; +- control layout; +- additional CSS classes; +- Bootstrap table variants. + ## Future direction Potential future work: diff --git a/docs/ui-ux-rendering.md b/docs/ui-ux-rendering.md new file mode 100644 index 0000000..01a83c0 --- /dev/null +++ b/docs/ui-ux-rendering.md @@ -0,0 +1,392 @@ +# UI/UX rendering customization + +This document describes the current UI/UX customization options for `zhortein/datatable-bundle`. + +The bundle remains Bootstrap-first and Twig-first. + +The goal is to provide a professional business datatable UI while keeping customization predictable for host applications. + +## Status + +Implemented: + +- optional action icons; +- action icon position; +- row action display modes; +- boolean cell display modes; +- polished sortable headers; +- configurable control layout; +- additional CSS classes for root/wrapper/table; +- Bootstrap display variants; +- template overrides; +- custom column templates. + +Not implemented yet: + +- column header filter dropdowns; +- icon provider abstraction; +- SVG icon rendering; +- icon-only actions; +- modal confirmations; +- Tailwind theme; +- full theme registry. + +## Action icons + +Actions can render optional CSS-class icons. + +Example: + +```php +$definition->addRowAction( + name: 'view', + route: 'app_user_show', + label: 'View', + icon: 'bi bi-eye', + routeParameters: [ + 'id' => 'e.id', + ], +); +``` + +The bundle does not require a specific icon library. + +The host application must load the relevant CSS, for example: + +- Bootstrap Icons; +- FontAwesome; +- custom icon classes. + +## Action icon position + +Icons render before the label by default. + +To render the icon after the label: + +```php +use Zhortein\DatatableBundle\Enum\ActionIconPosition; + +$definition->addRowAction( + name: 'view', + route: 'app_user_show', + label: 'Open', + icon: 'bi bi-arrow-right', + iconPosition: ActionIconPosition::After, + routeParameters: [ + 'id' => 'e.id', + ], +); +``` + +Accessibility: + +- icon spans are decorative; +- labels remain visible; +- icon-only actions are not part of the current public API. + +## Row action display modes + +Row actions can be rendered with different display modes. + +Supported modes: + +```text +inline +dropdown +list +``` + +### Inline mode + +Inline mode is the default. + +It renders row actions as a compact Bootstrap button group. + +```php +$definition->setOption('rowActionDisplayMode', 'inline'); +``` + +### Dropdown mode + +Dropdown mode renders row actions inside a Bootstrap dropdown. + +```php +$definition->setOption('rowActionDisplayMode', 'dropdown'); +``` + +This is useful when a row has several actions. + +Bootstrap JavaScript must be loaded by the host application. + +### List mode + +List mode renders row actions vertically. + +```php +$definition->setOption('rowActionDisplayMode', 'list'); +``` + +This can be useful for custom layouts or narrow responsive displays. + +### Runtime override + +The display mode can also be passed at render time: + +```twig +{{ zhortein_datatable('users', { + rowActionDisplayMode: 'dropdown' +}) }} +``` + +Runtime options take precedence over definition options. + +## Boolean cell display modes + +Boolean cells support several display modes. + +Supported modes: + +```text +badge +icon +switch +text +``` + +### Badge mode + +Badge mode is the default. + +```twig +{{ zhortein_datatable('users', { + booleanDisplayMode: 'badge' +}) }} +``` + +It renders translated `Yes` / `No` labels as Bootstrap badges. + +### Icon mode + +Icon mode renders dependency-free check/cross characters with visually hidden translated labels. + +```twig +{{ zhortein_datatable('users', { + booleanDisplayMode: 'icon' +}) }} +``` + +No icon library is required. + +### Switch mode + +Switch mode renders a disabled Bootstrap switch. + +```twig +{{ zhortein_datatable('users', { + booleanDisplayMode: 'switch' +}) }} +``` + +This is display-only and does not update data. + +### Text mode + +Text mode renders translated text only. + +```twig +{{ zhortein_datatable('users', { + booleanDisplayMode: 'text' +}) }} +``` + +## Sortable header rendering + +Sortable headers render: + +- column label; +- neutral sort indicator; +- active sort indicator; +- accessible labels; +- `aria-sort` on the active column. + +Indicators: + +```text +↕ unsorted +↑ ascending +↓ descending +``` + +These indicators do not require an icon library. + +Example rendered behavior: + +```text +Email ↕ +Email ↑ +Email ↓ +``` + +## Control layout + +The datatable supports layout options for controls. + +Supported modes: + +```text +default +split +``` + +### Default layout + +Default layout keeps controls in the top toolbar. + +```twig +{{ zhortein_datatable('users', { + controlsLayout: 'default' +}) }} +``` + +### Split layout + +Split layout keeps search, filters, export and global actions near the top, and moves these below the table: + +- column visibility; +- page size selector; +- summary. + +```twig +{{ zhortein_datatable('users', { + controlsLayout: 'split' +}) }} +``` + +This reduces toolbar clutter for dense business tables. + +## Additional CSS classes + +Applications can append CSS classes without overriding templates. + +```twig +{{ zhortein_datatable('users', { + rootClass: 'datatable datatable-users', + tableWrapperClass: 'datatable-wrapper', + tableClass: 'datatable-table' +}) }} +``` + +Available options: + +| Option | Target | +|---|---| +| `rootClass` | Root datatable container | +| `tableWrapperClass` | Table responsive wrapper | +| `tableClass` | `` element | + +Classes are appended to existing Bootstrap classes. + +They do not replace the bundle defaults. + +## Bootstrap table variants + +Bootstrap table variants are available at runtime. + +```twig +{{ zhortein_datatable('users', { + tableStriped: true, + tableHover: true, + tableBordered: true, + tableSmall: true +}) }} +``` + +Supported options: + +```text +tableStriped +tableHover +tableBordered +tableBorderless +tableSmall +tableResponsive +``` + +Global defaults can be configured in `zhortein_datatable.bootstrap.table`. + +See [`configuration.md`](configuration.md). + +## Template overrides + +For layout customization beyond runtime options, use Twig template overrides. + +Example: + +```text +templates/bundles/ZhorteinDatatableBundle/bootstrap/_toolbar.html.twig +``` + +Prefer the smallest override possible: + +1. custom column template; +2. cell template; +3. action template; +4. toolbar partial; +5. full datatable shell. + +See [`templates.md`](templates.md) and [`template-context.md`](template-context.md). + +## Column header filters + +Column header filters are not implemented yet. + +A design decision exists for the upcoming implementation: + +```text +docs/decisions/0006-column-header-filter-dropdowns.md +``` + +The selected future approach is Bootstrap dropdowns rather than popovers. + +See [`filters.md`](filters.md) and [`table-controls.md`](table-controls.md). + +## Current limitations + +### No icon provider + +The bundle does not provide an icon abstraction yet. + +Icons are CSS-class based. + +### No icon-only actions + +Action labels remain visible. + +Icon-only actions require a dedicated accessibility design and are not implemented. + +### No modal confirmation + +Confirmation uses native `window.confirm()` for now. + +### Bootstrap only + +The only maintained theme is Bootstrap. + +### No column header filters yet + +Filter controls still render in the toolbar until the column header filter feature is implemented. + +### No frontend test suite yet + +The Stimulus controller is still tested through smoke tests, not automated JS tests. + +## Related documentation + +- [`actions-and-cells.md`](actions-and-cells.md) +- [`action-security.md`](action-security.md) +- [`cell-templates.md`](cell-templates.md) +- [`table-controls.md`](table-controls.md) +- [`templates.md`](templates.md) +- [`template-context.md`](template-context.md) +- [`theming.md`](theming.md) +- [`icons.md`](icons.md)