From 2c5f6b9ee0d6c8324f4d1fa8ad485d386314bf26 Mon Sep 17 00:00:00 2001 From: Richard Helm Date: Mon, 15 Dec 2025 04:21:40 +0000 Subject: [PATCH 1/4] Fix failing test --- libs/test-utils/playwright.config.ts | 2 +- libs/test-utils/src/actions.ts | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/libs/test-utils/playwright.config.ts b/libs/test-utils/playwright.config.ts index a0519db949..eb0673fbaf 100644 --- a/libs/test-utils/playwright.config.ts +++ b/libs/test-utils/playwright.config.ts @@ -4,7 +4,7 @@ const config: PlaywrightTestConfig = { testMatch: 'src/tests/**/*.pw.ts', timeout: 10000, use: { - actionTimeout: 2000, + actionTimeout: 5000, }, expect: { timeout: 3000, diff --git a/libs/test-utils/src/actions.ts b/libs/test-utils/src/actions.ts index c516393faf..5a3bf74d66 100644 --- a/libs/test-utils/src/actions.ts +++ b/libs/test-utils/src/actions.ts @@ -52,6 +52,13 @@ export function comboboxClear( this: ComboboxWrapper ): D['actionReturn'] { return runSequence([ + // Wait before clearing to ensure any previous operations have fully settled. + // This prevents a sporadic issue in Playwright Safari where the combobox will not clear + () => + this.ctx.driver.eval( + this.locator, + () => new Promise((resolve) => setTimeout(resolve, 200)) + ), () => this.ctx.driver.userClear(this.control()), () => this.ctx.driver.userBlur(this.control()), // Combobox only updates value on blur ]); From 7d1a0d9dfb6c2de57bc365053510f8073cf3ae6f Mon Sep 17 00:00:00 2001 From: Richard Helm Date: Thu, 11 Dec 2025 16:25:17 +0000 Subject: [PATCH 2/4] Export contextual help component and add vue examples --- libs/components/metadata.json | 63 +++++++++++++++++++ libs/components/src/lib/components.ts | 1 + .../src/lib/contextual-help/README.md | 24 +++++++ .../src/lib/contextual-help/VARIATIONS.md | 45 +++++++++++++ .../lib/contextual-help/contextual-help.ts | 1 + .../src/lib/contextual-help/definition.ts | 2 + libs/components/src/lib/tag-name-map.ts | 2 + 7 files changed, 138 insertions(+) diff --git a/libs/components/metadata.json b/libs/components/metadata.json index 73b6b56558..55c5ac7a1a 100644 --- a/libs/components/metadata.json +++ b/libs/components/metadata.json @@ -2515,6 +2515,69 @@ "refs": [{ "name": "control", "args": ["shadow", "input.control"] }] } }, + { + "name": "contextual-help", + "className": "ContextualHelp", + "registerFunctionName": "registerContextualHelp", + "description": "", + "props": [ + { + "name": "placement", + "description": "Placement of the toggletip", + "type": "'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'", + "attributeName": "placement", + "propertyName": "placement" + } + ], + "events": [ + { + "name": "blur", + "description": "Fires when the element loses focus.", + "type": "FocusEvent" + }, + { + "name": "click", + "description": "Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.", + "type": "MouseEvent" + }, + { + "name": "focus", + "description": "Fires when the element receives focus.", + "type": "FocusEvent" + }, + { + "name": "input", + "description": "Fires when the value of an element has been changed.", + "type": "Event" + }, + { + "name": "keydown", + "description": "Fires when a key is pressed.", + "type": "KeyboardEvent" + }, + { + "name": "keyup", + "description": "Fires when a key is released.", + "type": "KeyboardEvent" + } + ], + "vueModels": [], + "methods": [], + "slots": [ + { "name": "default", "description": "Default slot." }, + { "name": "icon", "description": "Custom icon slot (optional)." } + ], + "testUtils": { + "selectors": [{ "name": "byTestId", "args": ["byTestId"] }], + "actions": [ + { "name": "hover", "args": ["hover", "#locator"] }, + { "name": "focus", "args": ["focus", "#locator"] }, + { "name": "blur", "args": ["blur", "#locator"] } + ], + "queries": [], + "refs": [] + } + }, { "name": "data-grid", "className": "DataGrid", diff --git a/libs/components/src/lib/components.ts b/libs/components/src/lib/components.ts index c6944c9261..0063c31e9c 100644 --- a/libs/components/src/lib/components.ts +++ b/libs/components/src/lib/components.ts @@ -14,6 +14,7 @@ export * from './calendar/definition'; export * from './card/definition'; export * from './checkbox/definition'; export * from './color-picker/definition'; +export * from './contextual-help/definition'; export * from './combobox/definition'; export * from './data-grid/definition'; export * from './date-picker/definition'; diff --git a/libs/components/src/lib/contextual-help/README.md b/libs/components/src/lib/contextual-help/README.md index ece4f490bc..1ed4feabe5 100644 --- a/libs/components/src/lib/contextual-help/README.md +++ b/libs/components/src/lib/contextual-help/README.md @@ -4,6 +4,27 @@ Use the `icon` slot to customize default icon. + + + + +```vue preview + + + +``` + + + + + ```html preview This is an example contextual help @@ -11,6 +32,9 @@ Use the `icon` slot to customize default icon. ``` + + + ## API Reference ### Properties diff --git a/libs/components/src/lib/contextual-help/VARIATIONS.md b/libs/components/src/lib/contextual-help/VARIATIONS.md index 3a84ce9140..61bb952bb7 100644 --- a/libs/components/src/lib/contextual-help/VARIATIONS.md +++ b/libs/components/src/lib/contextual-help/VARIATIONS.md @@ -2,17 +2,62 @@ The Contextual Help component is a helper wrapper that contains a [Toggletip](/components/contextual-help/), a [Button](/components/button/), and a default [Icon](/components/icon/). It was introduced to simplify the integration of contextual help into existing components and to ensure consistency across Vivid. + + + + +```vue preview + + + +``` + + + + + ```html preview This is an example contextual help ``` + + + ## Custom Icon Default Icon can be overridden using the `icon` slot. + + + + +```vue preview + + + +``` + + + + + ```html preview This is an example contextual help ``` + + + diff --git a/libs/components/src/lib/contextual-help/contextual-help.ts b/libs/components/src/lib/contextual-help/contextual-help.ts index 868cff5f1a..8f5dd10ae0 100644 --- a/libs/components/src/lib/contextual-help/contextual-help.ts +++ b/libs/components/src/lib/contextual-help/contextual-help.ts @@ -3,6 +3,7 @@ import { attr } from '@microsoft/fast-element'; import { VividElement } from '../../shared/foundation/vivid-element/vivid-element'; /** + * @public * @component contextual-help * @slot - Default slot. * @slot icon - Custom icon slot (optional). diff --git a/libs/components/src/lib/contextual-help/definition.ts b/libs/components/src/lib/contextual-help/definition.ts index 0e7436d023..b3c0b26bac 100644 --- a/libs/components/src/lib/contextual-help/definition.ts +++ b/libs/components/src/lib/contextual-help/definition.ts @@ -27,3 +27,5 @@ export const contextualHelpDefinition = defineVividComponent( export const registerContextualHelp = createRegisterFunction( contextualHelpDefinition ); + +export { ContextualHelp as VwcContextualHelpElement }; diff --git a/libs/components/src/lib/tag-name-map.ts b/libs/components/src/lib/tag-name-map.ts index 91d8e55897..1d356fd337 100644 --- a/libs/components/src/lib/tag-name-map.ts +++ b/libs/components/src/lib/tag-name-map.ts @@ -16,6 +16,7 @@ import type { VwcCheckboxElement, VwcColorPickerElement, VwcComboboxElement, + VwcContextualHelpElement, VwcDataGridCellElement, VwcDataGridElement, VwcDataGridRowElement, @@ -86,6 +87,7 @@ type DefaultVividTagNameMap = { 'vwc-card': VwcCardElement; 'vwc-checkbox': VwcCheckboxElement; 'vwc-color-picker': VwcColorPickerElement; + 'vwc-contextual-help': VwcContextualHelpElement; 'vwc-combobox': VwcComboboxElement; 'vwc-data-grid-cell': VwcDataGridCellElement; 'vwc-data-grid': VwcDataGridElement; From 19da81fd912966ceaa3f9fd0b57fd4249cd57312 Mon Sep 17 00:00:00 2001 From: Richard Helm Date: Thu, 11 Dec 2025 17:03:25 +0000 Subject: [PATCH 3/4] Add vue examples for combobox --- apps/docs/eleventy.config.js | 12 +- libs/components/src/lib/combobox/README.md | 340 ++++++++++++++- .../components/src/lib/combobox/VARIATIONS.md | 388 ++++++++++++++++++ 3 files changed, 720 insertions(+), 20 deletions(-) diff --git a/apps/docs/eleventy.config.js b/apps/docs/eleventy.config.js index 3ed37f5c69..ec96486a91 100644 --- a/apps/docs/eleventy.config.js +++ b/apps/docs/eleventy.config.js @@ -53,7 +53,17 @@ module.exports = async (eleventyConfig) => { eleventyConfig.addPlugin(EleventyVitePlugin.default, { viteOptions: { - plugins: [vue()], + plugins: [ + vue({ + template: { + compilerOptions: { + // 'preserve' will keep all whitespace + // 'condense' (default) removes whitespace between tags + whitespace: 'preserve', + }, + }, + }), + ], build: { emptyOutDir: true, }, diff --git a/libs/components/src/lib/combobox/README.md b/libs/components/src/lib/combobox/README.md index 304db2ac4a..1ddc7962a6 100644 --- a/libs/components/src/lib/combobox/README.md +++ b/libs/components/src/lib/combobox/README.md @@ -1,6 +1,25 @@ ## Usage + + + +```vue preview 270px + + + +``` + + @@ -25,25 +44,6 @@ registerCombobox('your-prefix'); ``` - - - - -```vue preview - - - -``` - @@ -58,6 +58,35 @@ The `autocomplete` attribute controls the auto-complete behaviour. See [aria-autocomplete](https://www.w3.org/TR/wai-aria-1.2/#aria-autocomplete) for more information. + + + + +```vue preview 200px + + + +``` + + + + + ```html preview 200px @@ -73,12 +102,43 @@ See [aria-autocomplete](https://www.w3.org/TR/wai-aria-1.2/#aria-autocomplete) f ``` + + + ## Custom Width By default, the Combobox's `width` is `fit-content` and the same goes for the listbox containing the options. You can specify the `width` of the Combobox using CSS. + + + + +```vue preview 230px + + + + + +``` + + + + + ```html preview 230px @@ -93,10 +153,40 @@ You can specify the `width` of the Combobox using CSS. ``` + + + ## Fixed-Dropdown The `fixed-dropdown` attribute is useful for cases in which the dropdown is obstructed by other elements. + + + + +```vue preview 320px + + + +``` + + + + + ```html preview 320px
@@ -110,10 +200,34 @@ The `fixed-dropdown` attribute is useful for cases in which the dropdown is obst ``` + + + ## Open The `open` attribute allows the Combobox to be opened programmatically. + + + + +```vue preview 200px + + + +``` + + + + + ```html preview 200px @@ -121,11 +235,35 @@ The `open` attribute allows the Combobox to be opened programmatically. ``` + + + ## Value Set the `value` attribute to set the default value for the input field. Setting the property on the element will not change the default value, but will change the value shown in the view as well as the submitted value in a form (imitating the native behavior). + + + + +```vue preview 200px + + + +``` + + + + + ```html preview 200px @@ -133,12 +271,38 @@ Setting the property on the element will not change the default value, but will ``` + + + ## Slots ### Default Slot This is where you place the [Option](/components/option/) components to provide the option list. + + + + +```vue preview 270px + + + +``` + + + + + ```html preview 270px @@ -148,11 +312,36 @@ This is where you place the [Option](/components/option/) components to provide ``` + + + ### Icon Slot Set the `icon` slot to show an icon before the Combobox text. If set, the `icon` attribute is ignored. + + + + +```vue preview 180px + + + +``` + + + + + ```html preview 180px @@ -161,10 +350,35 @@ If set, the `icon` attribute is ignored. ``` + + + ### Meta Slot Set the `meta` slot to show meta information after the Combobox text. + + + + +```vue preview 180px + + + +``` + + + + + ```html preview 180px @@ -173,10 +387,38 @@ Set the `meta` slot to show meta information after the Combobox text. ``` + + + ### Helper Text Slot The `helper-text` slot allows you to use rich content as the select's helper text. + + + + +```vue preview 230px + + + +``` + + + + + ```html preview 230px Please select the type of your business. @@ -186,10 +428,38 @@ The `helper-text` slot allows you to use rich content as the select's helper tex ``` + + + ### Contextual Help Slot The `contextual-help` slot allows you to add the [Contextual Help](/components/contextual-help/) component next to the label. + + + + +```vue preview 230px + + + +``` + + + + + ```html preview 230px Please select the type of your business @@ -199,12 +469,41 @@ The `contextual-help` slot allows you to add the [Contextual Help](/components/c ``` + + + ## CSS Variables ### Dropdown Height Use `--combobox-height` to customize the `max-height` of the dropdown. + + + + +```vue preview 300px + + + +``` + + + + + ```html preview 300px @@ -223,6 +522,9 @@ Use `--combobox-height` to customize the `max-height` of the dropdown. ``` + + + ## API Reference ### Properties diff --git a/libs/components/src/lib/combobox/VARIATIONS.md b/libs/components/src/lib/combobox/VARIATIONS.md index d30fa83073..0814e1d60a 100644 --- a/libs/components/src/lib/combobox/VARIATIONS.md +++ b/libs/components/src/lib/combobox/VARIATIONS.md @@ -9,6 +9,27 @@ The `label` attribute provides a short description of the purpose of the Combobo

If a visible label can't be used, provide one using the aria-label attribute. This ensures screen readers announce the purpose of the element, making it accessible to all users.

+ + + + +```vue preview 270px + + + +``` + + + + + ```html preview 270px @@ -16,12 +37,45 @@ The `label` attribute provides a short description of the purpose of the Combobo ``` + + + ### Helper Text The `helper-text` attribute provides additional information about the purpose of the Combobox. To add HTML to the helper text, use the [helper-text slot](/components/combobox/code/#helper-text-slot). + + + + +```vue preview 320px + + + + + +``` + + + + + ```html preview 320px @@ -38,6 +92,9 @@ To add HTML to the helper text, use the [helper-text slot](/components/combobox/ ``` + + + ### Placeholder Text The `placeholder` attribute provides some text to be displayed when no option has been Combobox. @@ -49,6 +106,27 @@ The `placeholder` attribute provides some text to be displayed when no option ha + + + + +```vue preview 270px + + + +``` + + + + + ```html preview 270px @@ -56,10 +134,46 @@ The `placeholder` attribute provides some text to be displayed when no option ha ``` + + + ### Contextual Help You can add the [Contextual Help](/components/contextual-help/) component using the `contextual-help` slot. It will be displayed next to the label, providing users additional information. + + + + +```vue preview 320px + + + + + +``` + + + + + ```html preview 320px @@ -77,12 +191,44 @@ You can add the [Contextual Help](/components/contextual-help/) component using ``` + + + ## Validation Feedback ### Success Text The `success-text` attribute provides a custom success message. Any current error state will be overridden by `success-text`. + + + + +```vue preview 270px + + + + + +``` + + + + + ```html preview 270px @@ -98,10 +244,42 @@ The `success-text` attribute provides a custom success message. Any current erro ``` + + + ### Error Text The `error-text` attribute provides a custom error message. Any current error state will be overridden by `error-text`. + + + + +```vue preview 270px + + + + + +``` + + + + + ```html preview 270px @@ -117,6 +295,9 @@ The `error-text` attribute provides a custom error message. Any current error st ``` + + + ## Icon The `icon` attribute displays an icon from the icon library](/icons/icons-gallery/). @@ -130,6 +311,38 @@ The `icon` prop is deprecated (as of 05/25) and directly replaced with `icon` sl + + + + +```vue preview 270px + + + +``` + + + + + ```html preview 270px @@ -146,11 +359,53 @@ The `icon` prop is deprecated (as of 05/25) and directly replaced with `icon` sl ``` + + + ## Scale The `scale` attribute controls the combobox element display size. Use `condensed` in situations when space is limited, for example, inside a Data Grid cell. + + + + +```vue preview 270px + + + + + +``` + + + + + ```html preview 270px
@@ -176,6 +431,9 @@ Use `condensed` in situations when space is limited, for example, inside a Data ``` + + +

The reason for using scale for form elements and not size (as used in other components such as Button), is that size is a HTML attribute that can be used on input elements (and also Text Field) to control the width of the input.

@@ -185,6 +443,45 @@ Use `condensed` in situations when space is limited, for example, inside a Data The `shape` attribute controls the border radius of the Combobox input element. + + + + +```vue preview 270px + + + + + +``` + + + + + ```html preview 270px
@@ -210,11 +507,39 @@ The `shape` attribute controls the border radius of the Combobox input element. ``` + + + ## Appearance The `appearance` attribute controls the style of the Combobox element.
Use `ghost` in combination with a containing element which provides a border, for example when used inside the [leading action items slot of Text Field](/components/text-field/code/#leading-action-items-slot). + + + + +```vue preview 200px + + + +``` + + + + + ```html preview 200px @@ -226,11 +551,47 @@ Use `ghost` in combination with a containing element which provides a border, fo ``` + + + ## Placement Set the `placement` attribute to set the combobox's placement in accordance to its anchor. Placement options are: `top-start` , `top` , `top-end` , `bottom-start` (default) , `bottom` and `bottom-end`. + + + + +```vue preview + + + + + +``` + + + + + ```html preview
@@ -250,13 +611,40 @@ Placement options are: `top-start` , `top` , `top-end` , `bottom-start` (default ``` + + + ## Disabled The `disabled` attribute disables the Combobox element. + + + + +```vue preview + + + +``` + + + + + ```html preview ``` + + + From d8b66c6968e0cff49e9fb41bfebe83effbc0d3e9 Mon Sep 17 00:00:00 2001 From: Richard Helm Date: Thu, 11 Dec 2025 17:31:57 +0000 Subject: [PATCH 4/4] chore(data-grid): add vue examples (VIV-2920) --- libs/components/src/lib/data-grid/README.md | 534 +++++++++++++++++++- 1 file changed, 507 insertions(+), 27 deletions(-) diff --git a/libs/components/src/lib/data-grid/README.md b/libs/components/src/lib/data-grid/README.md index ca787fc094..da0dd01fa3 100644 --- a/libs/components/src/lib/data-grid/README.md +++ b/libs/components/src/lib/data-grid/README.md @@ -1,7 +1,36 @@ ## Usage - - + + + + +```vue preview + + +``` + + + ```js @@ -40,40 +69,76 @@ Data Grid Row and Data Grid Cell sub-components are registered automatically in ``` - + + +## Remove From Tab Order + +Use the `no-tabbing` attribute to remove the component from the tab order. + + + -```vue preview - +```vue preview 300px + + ``` - - -## Remove From Tab Order - -Use the `no-tabbing` attribute to remove the component from the tab order. + + ```html preview 300px @@ -125,12 +190,46 @@ Use the `no-tabbing` attribute to remove the component from the tab order. ``` + + + ## Setting Focus on a Cell Use the `focusRowIndex` and `focusColumnIndex` to determine which row or cell to set focus on when the Data Grid component receieves focus. In the example below, change the value of the row / column index and then tab into the Data Grid. + + + + +```vue preview + + + +``` + + + + + ```html preview @@ -159,12 +258,57 @@ In the example below, change the value of the row / column index and then tab in ``` + + + ## Cell Click Event The `cell-click` event is fired when a cell is clicked on or when the enter or space key is pressed on a focused cell. Event details: `{ cell, row, isHeaderCell, columnDataKey }` + + + + +```vue preview + + + +``` + + + + + ```html preview
@@ -193,6 +337,9 @@ Event details: `{ cell, row, isHeaderCell, columnDataKey }` ``` + + + ## Rows Data Use the `rowsData` property to provide the component with the data (an `array` or `objects`) to be displayed. @@ -207,6 +354,30 @@ However, we recommend using the [Data Grid Row](#data-grid-row) and [Data Grid C + + + + +```vue preview + + + +``` + + + + + ```html preview @@ -219,6 +390,9 @@ However, we recommend using the [Data Grid Row](#data-grid-row) and [Data Grid C ``` + + + ### Column Definitions Use the `columnDefinitions` property to programmatically configure the column headers that are generated when using `rows-data`. See the [ColumnDefinition interface](#data-grid) for more information. @@ -230,6 +404,40 @@ The sortable feature doesn't actually sort the data, it only changes the visual + + + + +```vue preview + + + +``` + + + + + ```html preview ``` + + + ### Generate Header Use the `generate-header` property to programmatically define the type of grid header that is generated when using `rows-data`. + + + + +```vue preview + + + + + +``` + + + + + ```html preview @@ -288,6 +541,9 @@ Use the `generate-header` property to programmatically define the type of grid h ``` + + + ### Row, Cell and Header Cell Templates The `ViewTemplate`s used to render rows, cells and header cells can be customised using the following properties: @@ -317,6 +573,30 @@ You need to use `html` from `fast-element`. Use the `rowElementTag` to set the element tag for header row cells. If not set, the default tag `vwc-data-grid-cell` will be used. + + + + +```vue preview + + + +``` + + + + + ```html preview ``` + + + ## CSS Variables ### Row Background @@ -336,6 +619,40 @@ Use the `rowElementTag` to set the element tag for header row cells. If not set, When Row is set to sticky there's a default canvas background-color. Use `--data-grid-row-background` to change the sticky row background-color. + + + + +```vue preview + + + + + +``` + + + + + ```html preview @@ -359,11 +676,97 @@ Use `--data-grid-row-background` to change the sticky row background-color. ``` + + + ### Cell Background When a grid has the `fixed-columns` attribute, fixed columns cells have a default canvas background-color. Use `--data-grid-cell-background` to overwrite the default background-color. + + + + +```vue preview + + + + + +``` + + + + + ```html preview @@ -437,12 +840,49 @@ Use `--data-grid-cell-background` to overwrite the default background-color. ``` + + + ### Block Size Use `--data-grid-cell-block-size` to change the cell's `block-size`. By default, header cells have a fixed height while data cells have a dynamic height based on content. + + + + +```vue preview + + + + + +``` + + + + + ```html preview @@ -463,12 +903,49 @@ By default, header cells have a fixed height while data cells have a dynamic hei ``` + + + ### White Space Use `--data-grid-cell-white-space` to change the cell's `white-space`. By default, header cells will not wrap text (`nowrap`), while data cells will wrap text (`normal`). + + + + +```vue preview + + + + + +``` + + + + + ```html preview @@ -489,6 +966,9 @@ By default, header cells will not wrap text (`nowrap`), while data cells will wr ``` + + + ## API Reference ### Data Grid