From 9f9c794e5d65f663622e81b1a1e37b53a8074963 Mon Sep 17 00:00:00 2001 From: Barrett Grubbs Date: Thu, 12 Dec 2024 16:00:52 -0500 Subject: [PATCH 1/3] Requirements PR --- .../src/components/cbp-toggle/cbp-toggle.scss | 17 +++++ .../cbp-toggle/cbp-toggle.specs.mdx | 39 ++++++++++++ .../src/components/cbp-toggle/cbp-toggle.tsx | 62 +++++++++++++++++++ 3 files changed, 118 insertions(+) create mode 100644 packages/web-components/src/components/cbp-toggle/cbp-toggle.scss create mode 100644 packages/web-components/src/components/cbp-toggle/cbp-toggle.specs.mdx create mode 100644 packages/web-components/src/components/cbp-toggle/cbp-toggle.tsx diff --git a/packages/web-components/src/components/cbp-toggle/cbp-toggle.scss b/packages/web-components/src/components/cbp-toggle/cbp-toggle.scss new file mode 100644 index 00000000..48a4f98b --- /dev/null +++ b/packages/web-components/src/components/cbp-toggle/cbp-toggle.scss @@ -0,0 +1,17 @@ +/** + * @Prop --cbp-toggle-XXX + */ + +// :root{ +// --cbp-toggle-XXX: red; +// } + +// [data-cbp-theme=light] cbp-toggle[context*=dark]:not([context=light-always]), +// [data-cbp-theme=dark] cbp-toggle:not([context=dark-inverts]):not([context=light-always]) { + +// // --cbp-tooltip-color-bg: var(--cbp-tooltip-color-bg-dark); +// } + +cbp-toggle { + border: 1px solid red; //TODO: local testing, remove before push +} diff --git a/packages/web-components/src/components/cbp-toggle/cbp-toggle.specs.mdx b/packages/web-components/src/components/cbp-toggle/cbp-toggle.specs.mdx new file mode 100644 index 00000000..313358dc --- /dev/null +++ b/packages/web-components/src/components/cbp-toggle/cbp-toggle.specs.mdx @@ -0,0 +1,39 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# cbp-toggle + +## Purpose + +* The toggle is a control used for binary selections with a label to describe the control + +## Functional Requirements + +* Toggles require the label prop for description of the control & populate the accessibility values +* The Toggle component provides cross-browser styling for the control in its various states: including hover, focus, & disabled for both the states of the toggle + +## Technical Specifications + +* Variant property is used to specify the display of the toggle, acceptible values of 'boolean' or 'transform' +* Width property is used to specifiy the width of the control for 'stacked' vertical display +* Gap property is used to specifiy the gap property of the control + +### User Interactions + +* The user interactions are that of a native checkbox (`input type="checkbox"`) element: + * Clicking anywhere on the form control or label text will place focus on the control and toggle its state. + * Toggle are keyboard accessible by tabbing onto them in either direction, placing focus onto the native form control. + * Pressing the spacebar will toggle the focused checkbox state, also emitting a custom event. + +### Responsiveness + +* TODO: need valid samples to display use of the width & gap props to see any Responsiveness concerns + +### Accessibility + +* TODO: supporting native checkbox Accessibility, currently unclear of other Accessibility concerns + +### Additional Notes and Considerations + +* TODO: 'Special toggles' not currently included, seems to need support for custom sliders/icons \ No newline at end of file diff --git a/packages/web-components/src/components/cbp-toggle/cbp-toggle.tsx b/packages/web-components/src/components/cbp-toggle/cbp-toggle.tsx new file mode 100644 index 00000000..a8e94e6c --- /dev/null +++ b/packages/web-components/src/components/cbp-toggle/cbp-toggle.tsx @@ -0,0 +1,62 @@ +import { Component, Element, Prop, Host, h } from '@stencil/core'; +import { setCSSProps } from '../../utils/utils'; + +@Component({ + tag: 'cbp-toggle', + styleUrl: 'cbp-toggle.scss', +}) +export class CbpToggle { + + @Element() host: HTMLElement; + + /** Specifies if the toggle is enabled*/ + @Prop({ reflect: true}) selected: boolean; + + /** Specifies the label of the toggle */ + @Prop() label!: string; + + /** Specifies the variant of the toggle*/ + @Prop() variant: 'boolean' | 'transform'; + + /** Specifies width of toggle, meant for 'stacked' displays*/ + @Prop() width: CSSPropertyRule; + + /** Specifies the gap property of the toggle*/ + @Prop() gap: CSSPropertyRule; + + /** Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified. */ + @Prop({ reflect: true }) context: "light-inverts" | "light-always" | "dark-inverts" | "dark-always"; + + /** Supports adding inline styles as an object */ + @Prop() sx: any = {}; + + componentWillLoad() { + if (typeof this.sx == 'string') { + this.sx = JSON.parse(this.sx) || {}; + } + setCSSProps(this.host, { + ...this.sx, + }); + } + + /** Event: toggles the control true/false & updates DOM accordingly*/ + toggleEvent(){ + //TODO: logic here + } + + render() { + /**boilerplate HTML. TODO: review if cbp-typography && \ || cbp-checkbox is a better fit here. + * .slider is copied from vanilla code, used for styling. might be replacable with a ::before + */ + return ( + + + + + + ); + } + +} From b17d41d3885ea02e4cad356b2258f720c6279750 Mon Sep 17 00:00:00 2001 From: Doug Gibson Date: Fri, 13 Dec 2024 10:13:10 -0500 Subject: [PATCH 2/3] added my input to toggle reqs --- .../cbp-toggle/cbp-toggle.specs.mdx | 26 ++++++++++++------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/web-components/src/components/cbp-toggle/cbp-toggle.specs.mdx b/packages/web-components/src/components/cbp-toggle/cbp-toggle.specs.mdx index 313358dc..481f1ccd 100644 --- a/packages/web-components/src/components/cbp-toggle/cbp-toggle.specs.mdx +++ b/packages/web-components/src/components/cbp-toggle/cbp-toggle.specs.mdx @@ -6,33 +6,39 @@ import { Meta } from '@storybook/addon-docs'; ## Purpose -* The toggle is a control used for binary selections with a label to describe the control +* The toggle is a visual variant of a Boolean selection form control, representing an on/off toggle switch. ## Functional Requirements -* Toggles require the label prop for description of the control & populate the accessibility values -* The Toggle component provides cross-browser styling for the control in its various states: including hover, focus, & disabled for both the states of the toggle +* The Toggle component provides visual styling for a checkbox form control to appear as a toggle switch, including its various states, including hover, focus, disabled, and checked states. +* The Toggle component is a native HTML `input type="checkbox"` under the hood, which is slotted. +* The Toggle component places the label to the left of the control, unlike the Checkbox component. +* The Toggle component requires a label for an accessible name for form control. +* A Toggle may be used individually as a standalone toggle or within a list (in a `cbp-form-field` group). +* An optional text display of the toggle status may be shown next to the control to reduce ambiguity. ## Technical Specifications -* Variant property is used to specify the display of the toggle, acceptible values of 'boolean' or 'transform' -* Width property is used to specifiy the width of the control for 'stacked' vertical display -* Gap property is used to specifiy the gap property of the control +* Variant property is used to specify the display of the toggle, acceptable values of 'boolean' or 'transform' +* Width property is used to specify the width of the control for 'stacked' vertical display +* Gap property is used to specify the gap property of the control ### User Interactions * The user interactions are that of a native checkbox (`input type="checkbox"`) element: * Clicking anywhere on the form control or label text will place focus on the control and toggle its state. - * Toggle are keyboard accessible by tabbing onto them in either direction, placing focus onto the native form control. - * Pressing the spacebar will toggle the focused checkbox state, also emitting a custom event. + * Toggle are keyboard accessible by tabbing onto them in either direction, placing focus onto the native form control (*not really native form control). + * Pressing the Spacebar will toggle the focused checkbox state, also emitting a custom event. ### Responsiveness -* TODO: need valid samples to display use of the width & gap props to see any Responsiveness concerns +* The Toggle label will wrap as needed. +* The Toggle control is sized in relative units and will respond to changes in the user's default text size. ### Accessibility -* TODO: supporting native checkbox Accessibility, currently unclear of other Accessibility concerns +* The native checkbox (`input type="checkbox"`) element and label text are wrapped within a `label` tag, forming an implicit label association (no `id` needed). +* Full keyboard navigation is supported, as detailed under "User Interactions" above. ### Additional Notes and Considerations From b64f560b9413bc5c4181b54f5cb286862b30fcba Mon Sep 17 00:00:00 2001 From: Barrett Grubbs Date: Fri, 13 Dec 2024 11:01:56 -0500 Subject: [PATCH 3/3] updates from review --- .../cbp-toggle/cbp-toggle.specs.mdx | 13 +++++--- .../src/components/cbp-toggle/cbp-toggle.tsx | 32 ++++++++----------- 2 files changed, 22 insertions(+), 23 deletions(-) diff --git a/packages/web-components/src/components/cbp-toggle/cbp-toggle.specs.mdx b/packages/web-components/src/components/cbp-toggle/cbp-toggle.specs.mdx index 481f1ccd..8bebbb81 100644 --- a/packages/web-components/src/components/cbp-toggle/cbp-toggle.specs.mdx +++ b/packages/web-components/src/components/cbp-toggle/cbp-toggle.specs.mdx @@ -19,10 +19,15 @@ import { Meta } from '@storybook/addon-docs'; ## Technical Specifications -* Variant property is used to specify the display of the toggle, acceptable values of 'boolean' or 'transform' -* Width property is used to specify the width of the control for 'stacked' vertical display -* Gap property is used to specify the gap property of the control - +* disabled property is used to functionally & visual disable the control. +* hideStatus boolean property is used to specify the display of the toggle status text + * interacts with the statusTextOn & statusTextOff label display +* statusTextOn is used to determine the text value of the helper text of a toggle. default value is 'on' +* statusTextOff is used to determine the text value of the helper text of a toggle. default value is 'off' +* Width css property is used to specify the width of the control for 'stacked' vertical display + *TODO: might be managable via sx prop. possible this may not be needed, need to build it first to tell +* Gap css property is used to specify the gap property of the control + ### User Interactions * The user interactions are that of a native checkbox (`input type="checkbox"`) element: diff --git a/packages/web-components/src/components/cbp-toggle/cbp-toggle.tsx b/packages/web-components/src/components/cbp-toggle/cbp-toggle.tsx index a8e94e6c..34747a2e 100644 --- a/packages/web-components/src/components/cbp-toggle/cbp-toggle.tsx +++ b/packages/web-components/src/components/cbp-toggle/cbp-toggle.tsx @@ -9,20 +9,20 @@ export class CbpToggle { @Element() host: HTMLElement; - /** Specifies if the toggle is enabled*/ - @Prop({ reflect: true}) selected: boolean; + /** Marks the toggle as checked by default when specified. */ + @Prop() checked: boolean; - /** Specifies the label of the toggle */ - @Prop() label!: string; + /** Marks the toggle in a disabled state when specified. */ + @Prop() disabled: boolean; - /** Specifies the variant of the toggle*/ - @Prop() variant: 'boolean' | 'transform'; - - /** Specifies width of toggle, meant for 'stacked' displays*/ - @Prop() width: CSSPropertyRule; + /** Determines if the status text is visible for the render*/ + @Prop() hideStatus: boolean = true; + + /** Determines the status text for the true toggle*/ + @Prop() statusTextOn: string = 'on'; - /** Specifies the gap property of the toggle*/ - @Prop() gap: CSSPropertyRule; + /** Determines the status text for the false toggle*/ + @Prop() statusTextOff: string = 'off'; /** Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified. */ @Prop({ reflect: true }) context: "light-inverts" | "light-always" | "dark-inverts" | "dark-always"; @@ -45,16 +45,10 @@ export class CbpToggle { } render() { - /**boilerplate HTML. TODO: review if cbp-typography && \ || cbp-checkbox is a better fit here. - * .slider is copied from vanilla code, used for styling. might be replacable with a ::before - */ + /**boilerplate HTML */ return ( - - - + ); }