-
Notifications
You must be signed in to change notification settings - Fork 35
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'release/2' into 6993_refactor-import-to-use
- Loading branch information
Showing
28 changed files
with
683 additions
and
105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,5 @@ | ||
| @use './@shared/mixins' as *; | ||
|
|
||
| /* | ||
| * This file contains all rules for accessibility. | ||
| */ | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
packages/components/src/components/popover-button/popover-button.e2e.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { expect } from '@playwright/test'; | ||
| import { test } from '@stencil/playwright'; | ||
|
|
||
| test.describe('kol-popover-button', () => { | ||
| test('should show and hide popover on click', async ({ page }) => { | ||
| await page.setContent(` | ||
| <kol-popover-button _label="Toggle popover"> | ||
| Popover content | ||
| </kol-popover-button> | ||
| `); | ||
|
|
||
| const button = page.getByTestId('popover-button'); | ||
| const popover = page.getByTestId('popover-content'); | ||
|
|
||
| // Initially hidden | ||
| await expect(popover).not.toBeVisible(); | ||
|
|
||
| // Show on click | ||
| await button.click(); | ||
| await expect(popover).toBeVisible(); | ||
|
|
||
| // Hide on second click | ||
| await button.click(); | ||
| await expect(popover).not.toBeVisible(); | ||
| }); | ||
|
|
||
| test('should handle disabled state', async ({ page }) => { | ||
| await page.setContent(` | ||
| <kol-popover-button _label="Open popover" _disabled> | ||
| Popover content | ||
| </kol-popover-button> | ||
| `); | ||
|
|
||
| const button = page.getByTestId('popover-button'); | ||
| const popover = page.getByTestId('popover-content'); | ||
|
|
||
| await button.click({ force: true }); | ||
| await expect(popover).not.toBeVisible(); | ||
| }); | ||
| }); |
37 changes: 37 additions & 0 deletions
37
packages/components/src/components/popover-button/readme.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| # kol-popover-button | ||
|
|
||
| <!-- Auto Generated Below --> | ||
|
|
||
| ## Properties | ||
|
|
||
| | Property | Attribute | Description | Type | Default | | ||
| | --------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | | ||
| | `_accessKey` | `_access-key` | Defines which key combination can be used to trigger or focus the interactive element of the component. | `string \| undefined` | `undefined` | | ||
| | `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \| undefined` | `undefined` | | ||
| | `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \| undefined` | `undefined` | | ||
| | `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \| undefined` | `undefined` | | ||
| | `_ariaSelected` | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \| undefined` | `undefined` | | ||
| | `_customClass` | `_custom-class` | Defines the custom class attribute if \_variant="custom" is set. | `string \| undefined` | `undefined` | | ||
| | `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \| undefined` | `false` | | ||
| | `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \| undefined` | `false` | | ||
| | `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \| string \| undefined` | `undefined` | | ||
| | `_id` | `_id` | Defines the internal ID of the primary component element. | `string \| undefined` | `undefined` | | ||
| | `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` | | ||
| | `_name` | `_name` | Defines the technical name of an input field. | `string \| undefined` | `undefined` | | ||
| | `_on` | -- | Defines the callback functions for button events. | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \| undefined; onMouseDown?: EventCallback<MouseEvent> \| undefined; }` | `undefined` | | ||
| | `_popoverAlign` | `_popover-align` | Defines where to show the Popover preferably: top, right, bottom or left. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'bottom'` | | ||
| | `_role` | `_role` | Defines the role of the components primary element. | `"button" \| "link" \| "tab" \| "treeitem" \| undefined` | `undefined` | | ||
| | `_shortKey` | `_short-key` | Adds a visual short key hint to the component. | `string \| undefined` | `undefined` | | ||
| | `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` | | ||
| | `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` | | ||
| | `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `"button" \| "reset" \| "submit" \| undefined` | `'button'` | | ||
| | `_value` | `_value` | Defines the value that the button emits on click. | `boolean \| null \| number \| object \| string \| undefined` | `undefined` | | ||
| | `_variant` | `_variant` | Defines which variant should be used for presentation. | `"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| "tertiary" \| undefined` | `'normal'` | | ||
|
|
||
| ## Slots | ||
|
|
||
| | Slot | Description | | ||
| | ---- | -------------------- | | ||
| | | The popover content. | | ||
|
|
||
| --- |
Oops, something went wrong.