From 652f8d650bb3ddeb0d372dec5f952fcb3244f8fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20Martinez?= Date: Thu, 15 Feb 2024 05:20:51 +0100 Subject: [PATCH] fix(progress radial): zoom size, doc and aria attributes Author: remi-martinez Co-authored-by: Tawfik maalej --- CHANGELOG.md | 1 + custom-elements.json | 273 ++++++++---------- src/components.d.ts | 30 ++ .../progress-radial/progress-radial.scss | 5 + .../progress-radial/progress-radial.tsx | 53 +++- src/components/progress-radial/readme.md | 14 +- .../progress-radial.stories.ts | 34 ++- stories/documentation/generated/docs.json | 78 +---- 8 files changed, 250 insertions(+), 238 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 94e3ded6..10c4cb05 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -33,6 +33,7 @@ key down... to change the current selected option) - **doc**: improve `wcs-select`, `wcs-input` and `wcs-dropdown` documentation - **modal**: (accessibility) focus modal controls which served to open the modal on closure - **dropdown**: display empty container when no items with fixed width +- **progress-radial**: fix component computed size, documentation and aria attributes ### Security diff --git a/custom-elements.json b/custom-elements.json index dd12904c..1298786d 100644 --- a/custom-elements.json +++ b/custom-elements.json @@ -856,19 +856,19 @@ }, { "kind": "javascript-module", - "path": "components/accordion-header/accordion-header.tsx", + "path": "components/accordion-content/accordion-content.tsx", "declarations": [ { "kind": "class", "description": "", - "name": "AccordionHeader", + "name": "AccordionContent", "members": [ { "kind": "method", "name": "render" } ], - "tagName": "wcs-accordion-header", + "tagName": "wcs-accordion-content", "events": [], "customElement": true } @@ -876,37 +876,37 @@ "exports": [ { "kind": "js", - "name": "AccordionHeader", + "name": "AccordionContent", "declaration": { - "name": "AccordionHeader", - "module": "components/accordion-header/accordion-header.tsx" + "name": "AccordionContent", + "module": "components/accordion-content/accordion-content.tsx" } }, { "kind": "custom-element-definition", - "name": "wcs-accordion-header", + "name": "wcs-accordion-content", "declaration": { - "name": "AccordionHeader", - "module": "components/accordion-header/accordion-header.tsx" + "name": "AccordionContent", + "module": "components/accordion-content/accordion-content.tsx" } } ] }, { "kind": "javascript-module", - "path": "components/accordion-content/accordion-content.tsx", + "path": "components/accordion-header/accordion-header.tsx", "declarations": [ { "kind": "class", "description": "", - "name": "AccordionContent", + "name": "AccordionHeader", "members": [ { "kind": "method", "name": "render" } ], - "tagName": "wcs-accordion-content", + "tagName": "wcs-accordion-header", "events": [], "customElement": true } @@ -914,18 +914,18 @@ "exports": [ { "kind": "js", - "name": "AccordionContent", + "name": "AccordionHeader", "declaration": { - "name": "AccordionContent", - "module": "components/accordion-content/accordion-content.tsx" + "name": "AccordionHeader", + "module": "components/accordion-header/accordion-header.tsx" } }, { "kind": "custom-element-definition", - "name": "wcs-accordion-content", + "name": "wcs-accordion-header", "declaration": { - "name": "AccordionContent", - "module": "components/accordion-content/accordion-content.tsx" + "name": "AccordionHeader", + "module": "components/accordion-header/accordion-header.tsx" } } ] @@ -2733,18 +2733,8 @@ "declarations": [ { "kind": "class", - "description": "The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the\r\ndropdown.", + "description": "", "name": "Dropdown", - "slots": [ - { - "description": "The slot containing the placeholder displayed in button", - "name": "placeholder" - }, - { - "description": "The slot container the list of `wcs-dropdown-item` elements", - "name": "item" - } - ], "members": [ { "kind": "field", @@ -3008,7 +2998,7 @@ "declarations": [ { "kind": "class", - "description": "You can add a divider between groups of items", + "description": "", "name": "DropdownDivider", "members": [ { @@ -3046,14 +3036,8 @@ "declarations": [ { "kind": "class", - "description": "You can add `wcs-dropdown-header` before a group of items to describe it", + "description": "", "name": "DropdownHeader", - "slots": [ - { - "description": "the slot that contains the header's name", - "name": "" - } - ], "members": [ { "kind": "method", @@ -3090,14 +3074,8 @@ "declarations": [ { "kind": "class", - "description": "You must add `wcs-dropdown-item` to `wcs-dropdown`", + "description": "", "name": "DropdownItem", - "slots": [ - { - "description": "the slot that contains the item's name", - "name": "" - } - ], "members": [ { "kind": "method", @@ -3144,8 +3122,7 @@ "name": "wcsDropdownItemClick", "type": { "text": "EventEmitter" - }, - "description": "Event emitted when the dropdown item is clicked" + } } ], "customElement": true @@ -6782,16 +6759,6 @@ "kind": "class", "description": "The modal component (also named dialog or popup) is an interface element that appears on top of the page content.\r\nUse it to show a message, a confirmation dialog, or any other content like forms.\r\n\r\n
\r\n Accessibility guidelines 💡\r\n > - Modal element has `role=\"dialog\"` and `aria-modal=\"true\"`\r\n > - Keyboard navigation is trapped inside the modal\r\n > - It is mandatory to set the `modalTriggerControlsId` to the id of the element that opens the dialog, in order\r\n > to focus it upon dialog dismissal.\r\n > - The modal can be closed at any time by pressing the Escape key.\r\n >\r\n > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\r\n
", "name": "Modal", - "cssProperties": [ - { - "description": "Max height of the main container", - "name": "--wcs-modal-max-height" - }, - { - "description": "Overflow-y of the content", - "name": "--wcs-modal-overflow-y" - } - ], "slots": [ { "description": "Main container slot", @@ -7415,6 +7382,111 @@ } ] }, + { + "kind": "javascript-module", + "path": "components/progress-radial/progress-radial.tsx", + "declarations": [ + { + "kind": "class", + "description": "The progress-radial component is a circular progress bar that indicates the current completion of a task.", + "name": "ProgressRadial", + "members": [ + { + "kind": "field", + "name": "initialSize", + "type": { + "text": "number" + }, + "privacy": "private", + "default": "120" + }, + { + "kind": "field", + "name": "size", + "type": { + "text": "number" + }, + "default": "120", + "description": "The size of the progress radial (in px)" + }, + { + "kind": "field", + "name": "showLabel", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Whether the component should display the % label inside" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "number" + }, + "default": "0", + "description": "The value of the progress radial. Prefer values between 0 and 100." + }, + { + "kind": "method", + "name": "render" + }, + { + "kind": "method", + "name": "getSvgStyle" + }, + { + "kind": "method", + "name": "getSize" + } + ], + "attributes": [ + { + "name": "size", + "fieldName": "size", + "type": { + "text": "number" + } + }, + { + "name": "show-label", + "fieldName": "showLabel", + "type": { + "text": "boolean" + } + }, + { + "name": "value", + "fieldName": "value", + "type": { + "text": "number" + } + } + ], + "tagName": "wcs-progress-radial", + "events": [], + "customElement": true + } + ], + "exports": [ + { + "kind": "js", + "name": "ProgressRadial", + "declaration": { + "name": "ProgressRadial", + "module": "components/progress-radial/progress-radial.tsx" + } + }, + { + "kind": "custom-element-definition", + "name": "wcs-progress-radial", + "declaration": { + "name": "ProgressRadial", + "module": "components/progress-radial/progress-radial.tsx" + } + } + ] + }, { "kind": "javascript-module", "path": "components/radio/radio-interface.ts", @@ -7601,95 +7673,6 @@ } ] }, - { - "kind": "javascript-module", - "path": "components/progress-radial/progress-radial.tsx", - "declarations": [ - { - "kind": "class", - "description": "", - "name": "ProgressRadial", - "members": [ - { - "kind": "field", - "name": "size", - "type": { - "text": "number" - }, - "default": "120" - }, - { - "kind": "field", - "name": "showLabel", - "type": { - "text": "boolean" - }, - "default": "false" - }, - { - "kind": "field", - "name": "value", - "type": { - "text": "number" - }, - "default": "0" - }, - { - "kind": "method", - "name": "render" - }, - { - "kind": "method", - "name": "getSvgStyle" - } - ], - "attributes": [ - { - "name": "size", - "fieldName": "size", - "type": { - "text": "number" - } - }, - { - "name": "show-label", - "fieldName": "showLabel", - "type": { - "text": "boolean" - } - }, - { - "name": "value", - "fieldName": "value", - "type": { - "text": "number" - } - } - ], - "tagName": "wcs-progress-radial", - "events": [], - "customElement": true - } - ], - "exports": [ - { - "kind": "js", - "name": "ProgressRadial", - "declaration": { - "name": "ProgressRadial", - "module": "components/progress-radial/progress-radial.tsx" - } - }, - { - "kind": "custom-element-definition", - "name": "wcs-progress-radial", - "declaration": { - "name": "ProgressRadial", - "module": "components/progress-radial/progress-radial.tsx" - } - } - ] - }, { "kind": "javascript-module", "path": "components/radio-group/radio-group-interface.ts", diff --git a/src/components.d.ts b/src/components.d.ts index 1e7f186d..ac4aafee 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -780,9 +780,21 @@ export namespace Components { */ "value": number; } + /** + * The progress-radial component is a circular progress bar that indicates the current completion of a task. + */ interface WcsProgressRadial { + /** + * Whether the component should display the % label inside + */ "showLabel": boolean; + /** + * The size of the progress radial (in px) + */ "size": number; + /** + * The value of the progress radial. Prefer values between 0 and 100. + */ "value": number; } interface WcsRadio { @@ -1651,6 +1663,9 @@ declare global { prototype: HTMLWcsProgressBarElement; new (): HTMLWcsProgressBarElement; }; + /** + * The progress-radial component is a circular progress bar that indicates the current completion of a task. + */ interface HTMLWcsProgressRadialElement extends Components.WcsProgressRadial, HTMLStencilElement { } var HTMLWcsProgressRadialElement: { @@ -2606,9 +2621,21 @@ declare namespace LocalJSX { */ "value"?: number; } + /** + * The progress-radial component is a circular progress bar that indicates the current completion of a task. + */ interface WcsProgressRadial { + /** + * Whether the component should display the % label inside + */ "showLabel"?: boolean; + /** + * The size of the progress radial (in px) + */ "size"?: number; + /** + * The value of the progress radial. Prefer values between 0 and 100. + */ "value"?: number; } interface WcsRadio { @@ -3228,6 +3255,9 @@ declare module "@stencil/core" { * Component displaying progress as a bar. */ "wcs-progress-bar": LocalJSX.WcsProgressBar & JSXBase.HTMLAttributes; + /** + * The progress-radial component is a circular progress bar that indicates the current completion of a task. + */ "wcs-progress-radial": LocalJSX.WcsProgressRadial & JSXBase.HTMLAttributes; "wcs-radio": LocalJSX.WcsRadio & JSXBase.HTMLAttributes; "wcs-radio-group": LocalJSX.WcsRadioGroup & JSXBase.HTMLAttributes; diff --git a/src/components/progress-radial/progress-radial.scss b/src/components/progress-radial/progress-radial.scss index bc1314a4..a713081c 100644 --- a/src/components/progress-radial/progress-radial.scss +++ b/src/components/progress-radial/progress-radial.scss @@ -1,3 +1,7 @@ +:host { + display: inline-flex; +} + .progress-circle { position: relative; display: inline-block; @@ -7,6 +11,7 @@ } .progress-circle-figure { + position: absolute; transform: rotate(-90deg); transition: stroke-dashoffset 0.375s ease-out; } diff --git a/src/components/progress-radial/progress-radial.tsx b/src/components/progress-radial/progress-radial.tsx index 97decb7a..522cc0a8 100644 --- a/src/components/progress-radial/progress-radial.tsx +++ b/src/components/progress-radial/progress-radial.tsx @@ -1,33 +1,51 @@ import { Component, Prop, ComponentInterface, h } from '@stencil/core'; +/** + * The progress-radial component is a circular progress bar that indicates the current completion of a task. + */ @Component({ tag: 'wcs-progress-radial', styleUrl: 'progress-radial.scss', shadow: true }) export class ProgressRadial implements ComponentInterface { + /** The initial background image size (120x120) as specified in the background-image css property of .progress-circle */ + private backgroundImageSize: number = 120; + + /** The size of the progress radial (in px) */ @Prop() size: number = 120; + /** Whether the component should display the % label inside */ @Prop() showLabel: boolean = false; + /** The value of the progress radial. Prefer values between 0 and 100. */ @Prop() value: number = 0; render() { - const { size, halfSize } = { size: this.size, halfSize: this.size / 2 }; + const { backgroundImageSize, halfSize } = { backgroundImageSize: this.backgroundImageSize, halfSize: this.backgroundImageSize / 2 }; return ( -
- - - +
+ + + {this.showLabel && -
{this.value}%
+
+ + {this.value}% + +
} - +
); } @@ -35,7 +53,14 @@ export class ProgressRadial implements ComponentInterface { getSvgStyle() { return { 'stroke-dasharray': '339.292', - 'stroke-dashoffset': `${339.292 - (this.value / 100) * 339.292}` + 'stroke-dashoffset': `${339.292 - (this.value / 100) * 339.292}`, + }; + } + + getSize() { + return { + 'width': `${(this.size)}px`, + 'height': `${(this.size)}px`, }; } } diff --git a/src/components/progress-radial/readme.md b/src/components/progress-radial/readme.md index 1b2999ce..c01ea461 100644 --- a/src/components/progress-radial/readme.md +++ b/src/components/progress-radial/readme.md @@ -3,13 +3,17 @@ +## Overview + +The progress-radial component is a circular progress bar that indicates the current completion of a task. + ## Properties -| Property | Attribute | Description | Type | Default | -| ----------- | ------------ | ----------- | --------- | ------- | -| `showLabel` | `show-label` | | `boolean` | `false` | -| `size` | `size` | | `number` | `120` | -| `value` | `value` | | `number` | `0` | +| Property | Attribute | Description | Type | Default | +| ----------- | ------------ | ------------------------------------------------------------------ | --------- | ------- | +| `showLabel` | `show-label` | Whether the component should display the % label inside | `boolean` | `false` | +| `size` | `size` | The size of the progress radial (in px) | `number` | `120` | +| `value` | `value` | The value of the progress radial. Prefer values between 0 and 100. | `number` | `0` | ---------------------------------------------- diff --git a/stories/components/progress-radial/progress-radial.stories.ts b/stories/components/progress-radial/progress-radial.stories.ts index f2c644fc..02cd95ab 100644 --- a/stories/components/progress-radial/progress-radial.stories.ts +++ b/stories/components/progress-radial/progress-radial.stories.ts @@ -1,4 +1,4 @@ -import { Meta, StoryFn } from '@storybook/web-components'; +import { Meta, StoryFn, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; import { getComponentArgs } from '../../utils/args-generation'; @@ -9,22 +9,32 @@ const meta: Meta = { }; export default meta; -const Template: StoryFn> = (args) => html` +type ProgressRadialArgs = { + size: number; + showLabel: boolean; + value: number; +} + +const Template: StoryFn> = (args) => html` `; -export const Default = Template.bind({}); -Default.args = { - size: 120, - value: 25 +export const Default: StoryObj = { + render: (args: ProgressRadialArgs) => Template(args, this), + args: { + size: 120, + value: 25 + }, }; -export const WithLabel = Template.bind({}); -WithLabel.args = { - size: 120, - value: 25, - showLabel: true -}; +export const WithLabel: StoryObj = { + render: (args: ProgressRadialArgs) => Template(args, this), + args: { + size: 120, + value: 25, + showLabel: true + } +} \ No newline at end of file diff --git a/stories/documentation/generated/docs.json b/stories/documentation/generated/docs.json index bef6484f..ee37a0c9 100644 --- a/stories/documentation/generated/docs.json +++ b/stories/documentation/generated/docs.json @@ -1,5 +1,5 @@ { - "timestamp": "2024-02-15T15:40:44", + "timestamp": "2024-02-28T09:15:49", "compiler": { "name": "@stencil/core", "version": "3.0.0", @@ -1237,17 +1237,8 @@ "encapsulation": "shadow", "tag": "wcs-dropdown", "readme": "# Dropdown\r\n\r", - "docs": "The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the\r\ndropdown.", - "docsTags": [ - { - "name": "slot", - "text": "placeholder - The slot containing the placeholder displayed in button" - }, - { - "name": "slot", - "text": "item - The slot container the list of `wcs-dropdown-item` elements" - } - ], + "docs": "", + "docsTags": [], "usage": {}, "props": [ { @@ -1432,16 +1423,7 @@ } ], "styles": [], - "slots": [ - { - "name": "item", - "docs": "The slot container the list of `wcs-dropdown-item` elements" - }, - { - "name": "placeholder", - "docs": "The slot containing the placeholder displayed in button" - } - ], + "slots": [], "parts": [], "dependents": [], "dependencies": [ @@ -1461,7 +1443,7 @@ "encapsulation": "shadow", "tag": "wcs-dropdown-divider", "readme": "# wcs-dropdown-divider\r\n\r\n\r\n\r", - "docs": "You can add a divider between groups of items", + "docs": "", "docsTags": [], "usage": {}, "props": [], @@ -1480,25 +1462,15 @@ "encapsulation": "shadow", "tag": "wcs-dropdown-header", "readme": "# wcs-dropdown-header\r\n\r\n\r\n\r", - "docs": "You can add `wcs-dropdown-header` before a group of items to describe it", - "docsTags": [ - { - "name": "slot", - "text": " the slot that contains the header's name" - } - ], + "docs": "", + "docsTags": [], "usage": {}, "props": [], "methods": [], "events": [], "listeners": [], "styles": [], - "slots": [ - { - "name": " the slot that contains the header's name", - "docs": "" - } - ], + "slots": [], "parts": [], "dependents": [], "dependencies": [], @@ -1509,13 +1481,8 @@ "encapsulation": "none", "tag": "wcs-dropdown-item", "readme": "# wcs-dropdown-item\r\n\r\n\r\n\r", - "docs": "You must add `wcs-dropdown-item` to `wcs-dropdown`", - "docsTags": [ - { - "name": "slot", - "text": " the slot that contains the item's name" - } - ], + "docs": "", + "docsTags": [], "usage": {}, "props": [], "methods": [], @@ -1526,7 +1493,7 @@ "bubbles": true, "cancelable": true, "composed": true, - "docs": "Event emitted when the dropdown item is clicked", + "docs": "", "docsTags": [] } ], @@ -1543,12 +1510,7 @@ } ], "styles": [], - "slots": [ - { - "name": " the slot that contains the item's name", - "docs": "" - } - ], + "slots": [], "parts": [], "dependents": [], "dependencies": [], @@ -4137,14 +4099,6 @@ "readme": "# Modal\r\n\r\n## Modal without backdrop\r\n\r\n```html\r\n\r\n
Modal title
\r\n Voulez-vous quittez la page ? \r\n
\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a cursus mi. Nullam et sem mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sollicitudin pellentesque libero nec elementum.\r\n
\r\n C'est non\r\n J'accepte\r\n
\r\n\r\n```\r\n\r\n\r\n Afficher la boîte de dialogue\r\n\r\n\r", "docs": "The modal component (also named dialog or popup) is an interface element that appears on top of the page content.\r\nUse it to show a message, a confirmation dialog, or any other content like forms.\r\n\r\n
\r\n Accessibility guidelines 💡\r\n > - Modal element has `role=\"dialog\"` and `aria-modal=\"true\"`\r\n > - Keyboard navigation is trapped inside the modal\r\n > - It is mandatory to set the `modalTriggerControlsId` to the id of the element that opens the dialog, in order\r\n > to focus it upon dialog dismissal.\r\n > - The modal can be closed at any time by pressing the Escape key.\r\n >\r\n > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\r\n
", "docsTags": [ - { - "name": "cssprop", - "text": "--wcs-modal-max-height - Max height of the main container" - }, - { - "name": "cssprop", - "text": "--wcs-modal-overflow-y - Overflow-y of the content" - }, { "name": "slot", "text": " Main container slot" @@ -4544,7 +4498,7 @@ "encapsulation": "shadow", "tag": "wcs-progress-radial", "readme": "# Progress radial\r\n\r", - "docs": "", + "docs": "The progress-radial component is a circular progress bar that indicates the current completion of a task.", "docsTags": [], "usage": {}, "props": [ @@ -4554,7 +4508,7 @@ "mutable": false, "attr": "show-label", "reflectToAttr": false, - "docs": "", + "docs": "Whether the component should display the % label inside", "docsTags": [], "default": "false", "values": [ @@ -4571,7 +4525,7 @@ "mutable": false, "attr": "size", "reflectToAttr": false, - "docs": "", + "docs": "The size of the progress radial (in px)", "docsTags": [], "default": "120", "values": [ @@ -4588,7 +4542,7 @@ "mutable": false, "attr": "value", "reflectToAttr": false, - "docs": "", + "docs": "The value of the progress radial. Prefer values between 0 and 100.", "docsTags": [], "default": "0", "values": [ -- GitLab