Merge pull request #225 from US-CBP/bugfix/check-radio

Bugfix/check radio

Author: dgibson666

packages/web-components/CHANGELOG.md

@@ -4,13 +4,17 @@ This CHANGELOG.md tracks the updates to the web components package of the CBP de
 
 The React components are wrappers generated from this package and will share the same changes.
 
+## [unpublished] TBD
+* Published the Change log to Storybook.
+* Published Stencil-generated component API docs to Storybook. We will continually revisit these for completion.
+
 ## [0.0.1-develop.16] 10-28-2024
 * First cut of `cbp-checkbox`.
 * First cut of `cbp-radio`.
 * First cut of `cbp-toast`.
 * Updated `cbp-form-field` with the ability to handle input groups (e.g., checklist, radio list, compound inputs) with more than a single input.
 * Updated Structured list with selectable functionality.
-* Fixed the issue with slotted Accordion title being hidden.
+* Fixed the issue with slotted Accordion Item title being hidden (the slot name was also updated to `cbp-accordion-item-title` to follow our naming conventions).
 
 ## [0.0.1-develop.15] 10-07-2024
 
@@ -90,7 +94,7 @@ The React components are wrappers generated from this package and will share the
 * Breaking: Deprecated/removed `cbp-visuallyhidden` since its functionality was included in cbp-hide.
 * First cut of `cbp-hide`, a component that allows content to be programmatically hidden (or visually hidden) based on property or media query.
 * Updated designs of `cbp-badge`, `cbp-chip`, and `cbp-tag` to use the correct design tokens.
-* Updated the cbp-chip component by adding `name` and `value` properties and updating the custom event.
+* Updated the `cbp-chip` component by adding `name` and `value` properties and updating the custom event.
 * Updated Template and Universal Header stories to use `cbp-hide` for responsiveness.
 * Updated the Template to wrap the Universal Header and Application Header in an HTML5 `header` landmark tag.
 

packages/web-components/src/components/cbp-checkbox/cbp-checkbox.scss

@@ -107,16 +107,18 @@ cbp-checkbox {
   position: relative;
 
   label {
-    display: flex;
+    display: grid;
+    grid-template-columns: var(--cbp-space-7x) 1fr;
     align-items: center;
+    gap: var(--cbp-space-2x);
     min-height: var(--cbp-checkbox-min-height);
     font-weight: var(--cbp-checkbox-font-weight-label);
     color: var(--cbp-checkbox-color-label);
   }
 
   input[type=checkbox] {
-    position: relative;
-    flex-shrink: 0;
+    display: grid;
+    place-content: center;
     appearance: none; // checkboxes do not accept styling per design specs
     color: var(--cbp-checkbox-color);
     background-color: var(--cbp-checkbox-color-bg);
@@ -127,21 +129,15 @@ cbp-checkbox {
     height: var(--cbp-space-6x);
     width: var(--cbp-space-6x);
     margin: 0;
-    margin-inline-end: var(--cbp-space-2x);
     outline: 0;
     box-shadow: 0 0 0 calc(var(--cbp-space-5x) / 2) var(--cbp-checkbox-color-halo);
     clip-path: circle(86%);
 
     // Check Mark/Dash
     &::before {
       content: '';
-      position: absolute;
-      margin: auto;
-      left: 0;
-      right: 0;
-      bottom: 0;
       overflow: hidden;
-      top: 0;
+      //transform: scale(0);
     }
 
     // Verified: only need to set the base variables with higher level tokens that are swapped for dark mode
@@ -176,22 +172,22 @@ cbp-checkbox {
     &:checked {
       // Check Mark
       &::before {
-        border-right: solid var(--cbp-border-size-lg) var(--cbp-checkbox-color);
-        border-bottom: solid var(--cbp-border-size-lg) var(--cbp-checkbox-color);
+        height: var(--cbp-space-4x);
+        width: var(--cbp-space-2x);
+        border-right: solid var(--cbp-border-size-xl) var(--cbp-checkbox-color);
+        border-bottom: solid var(--cbp-border-size-xl) var(--cbp-checkbox-color);
         //border-radius: 1px;
-        height: 70%;
-        width: 35%;
         transform: rotate(45deg) translateY(-10%) translateX(-10%);
       }
     }
 
     &:indeterminate {
       // Indeterminate dash
       &::before {
+        height: 0;
+        width: var(--cbp-space-4x);
         border: solid var(--cbp-border-size-md) var(--cbp-checkbox-color);
         border-radius: var(--cbp-border-radius-soft);
-        height: 0;
-        width: 60%;
       }
     }
 

packages/web-components/src/components/cbp-flex-item/cbp-flex-item.scss

@@ -1,4 +1,3 @@
 cbp-flex-item:not([hidden]) {
   display: block;
-  position: relative;
-}
+}

packages/web-components/src/components/cbp-flex-item/cbp-flex-item.tsx

@@ -1,42 +1,55 @@
 import { Component, Prop, Element, Host, h} from '@stencil/core';
 import { setCSSProps } from '../../utils/utils';
 
+/**
+ * @slot - Content slotted in the default slot may consist of any combination of text or DOM nodes.
+ */
 @Component({
-    tag: 'cbp-flex-item',
-    styleUrl: 'cbp-flex-item.scss',
+  tag: 'cbp-flex-item',
+  styleUrl: 'cbp-flex-item.scss',
 })
 export class CbpFlexItem {
 
-    @Element() host: HTMLElement;
+  @Element() host: HTMLElement;
 
-    @Prop() alignSelf: "auto" | "stretch" | "flex-start" | "flex-end" | "center" | "baseline";
-    @Prop() order: number;
-    @Prop() flexGrow: number;
-    @Prop() flexShrink: number;
-    @Prop() flexBasis: string;
-    /** Supports adding inline styles as an object */
-    @Prop() sx: any = {};
+  /** Specifies the alignment of the specific flex item along the cross-axis separate from the parent context. */
+  @Prop() alignSelf: "auto" | "stretch" | "flex-start" | "flex-end" | "center" | "baseline";
+    
+  /** Specifies an ordinal group value for sorting this flex item within its group. Defaults to zero, which renders the items in DOM order. */
+  @Prop() order: number;
+  
+  /** Specifies the growth factor the item will grow at relative to other items. Defaults to zero, as flex items do not grow by default. */
+  @Prop() flexGrow: number;
+  
+  /** Specifies the shrink factor the item will shrink at relative to other items. Defaults to 1, as flex items will shrink at an equal rate by default, taking content size into consideration. */
+  @Prop() flexShrink: number;
+  
+  /** Specifies a basis (in CSS units or content values) for calculating flex behavior different from the default of "auto" (which usually evaluates to "content"). */
+  @Prop() flexBasis: string;
 
+  /** 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, {
-            'align-self': this.alignSelf,
-            'order': this.order,
-            'flex-grow': this.flexGrow,
-            'flex-shrink': this.flexShrink,
-            'flex-basis': this.flexBasis,
-            ...this.sx
-        });
-    }
 
-    render() {
-        return (
-            <Host>
-                <slot />
-            </Host>
-        );
+  componentWillLoad() {
+    if (typeof this.sx == "string") {
+        this.sx = JSON.parse(this.sx) || {}
     }
+    setCSSProps(this.host, {
+        'align-self': this.alignSelf,
+        'order': this.order,
+        'flex-grow': this.flexGrow,
+        'flex-shrink': this.flexShrink,
+        'flex-basis': this.flexBasis,
+        ...this.sx
+    });
+  }
+
+  render() {
+    return (
+      <Host>
+        <slot />
+      </Host>
+    );
+  }
 }

packages/web-components/src/components/cbp-flex/cbp-flex.scss

@@ -1,7 +1,7 @@
 cbp-flex:not([hidden]) {
   display: flex;
 
-  &[display='inline-flex'] {
+  &[display="inline-flex"] {
     display: inline-flex;
   }
 }

packages/web-components/src/components/cbp-flex/cbp-flex.stories.tsx

@@ -91,3 +91,8 @@ const Template = ({ display, wrap, direction, alignItems, alignContent, justifyC
 
 export const Flex = Template.bind({});
 Flex.args = {};
+
+
+/* For testing of sx and setCSSProps()
+    sx='{"border":"var(--cbp-border-size-lg) solid var(--cbp-color-red-20)","height":"200px","border-top-width":"0px"}'
+*/

packages/web-components/src/components/cbp-flex/cbp-flex.tsx

@@ -1,22 +1,43 @@
 import { Component, Prop, Element, Host, h } from '@stencil/core';
 import { setCSSProps } from '../../utils/utils';
 
+/**
+ * @slot - DOM nodes placed in the default slot automatically become flex children. The use of `cbp-flex-item` is only required for granular control of individual flex item properties.
+ */
 @Component({
   tag: 'cbp-flex',
   styleUrl: 'cbp-flex.scss',
 })
 export class CbpFlex {
   @Element() host: HTMLElement;
 
+  /** Specifies the display mode. Defaults to "flex" */
   @Prop({ reflect: true }) display: 'flex' | 'inline-flex' = 'flex';
+  
+  /** Specifies the wrapping behavior of the flex children. Browser default behavior is "nowrap". */
   @Prop() wrap: 'nowrap' | 'wrap' | 'wrap-reverse';
+  
+  /** Specifies how flex items are placed in the flex container by setting the direction of the flex container’s main axis. Defaults to "row" for a horizontal flex context. */
   @Prop() direction: 'row' | 'row-reverse' | 'column' | 'column-reverse' = 'row';
+  
+  /** Specifies the alignment for all of the flex container’s items along the cross-axis. Defaults to "stretch". */
   @Prop() alignItems: 'auto' | 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline' = 'stretch';
+  
+  /** Specifies the alignment of a flex container's items within the flex container (only when there is extra space in the cross-axis). */
   @Prop() alignContent: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch' = 'stretch';
+  
+  /** Specifies the alignment of flex items along the main axis (of the current line) of the flex container. */
   @Prop() justifyContent: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' = 'flex-start';
+  
+  /** Specifies the gap between items in CSS units (preferably relative units such as rem). Accepts a single value for horizontal and vertical gap or two values representing column gap and row gap, respectively. */
   @Prop() gap: string;
+
+  /** Specifies the size at which the flex children are linearized, specified in CSS units (preferably relative units such as rem). */
   @Prop() breakpoint: string;
+
+  /** Not yet implemented */
   @Prop() contentBreakpoint: string;
+
   /** Supports adding inline styles as an object */
   @Prop() sx: any = {};
 

packages/web-components/src/components/cbp-form-field/api-docs.mdx

@@ -1,6 +1,6 @@
 import { Meta, Markdown } from "@storybook/blocks";
 import Docs from './readme.md?raw';
 
-<Meta title="Components/Form Field/API Docs" />
+<Meta title="Components/Form Fields/API Docs" />
 
 <Markdown>{Docs}</Markdown>

packages/web-components/src/components/cbp-radio/cbp-radio.scss

@@ -103,56 +103,43 @@
 }
 
 cbp-radio {
-  //display: block;
-  display: grid;
-  place-content: center;
+  display: block;
   margin: var(--cbp-radio-margin);
   position: relative;
 
   label {
-    display: flex;
+    display: grid;
+    grid-template-columns: var(--cbp-space-7x) 1fr;
     align-items: center;
+    gap: var(--cbp-space-2x);
     min-height: var(--cbp-radio-min-height);
     font-weight: var(--cbp-radio-font-weight-label);
     color: var(--cbp-radio-color-label);
   }
 
   input[type=radio] {
-    position: relative;
-    flex-shrink: 0;
+    display: grid;
+    place-content: center;
     appearance: none; // radios do not accept styling per design specs
-    //color: var(--cbp-radio-color);
     background-color: var(--cbp-radio-color-bg);
     border-color: var(--cbp-radio-color-border);
     border-style: solid;
     border-width: var(--cbp-border-size-md);
     border-radius: var(--cbp-border-radius-circle);
-    // TechDebt: Testing which one works: seeing different results on different computers/base font sizes
     height: var(--cbp-space-7x);
     width: var(--cbp-space-7x);
-    //height: calc(var(--cbp-space-7x) - 1px);
-    //width: calc(var(--cbp-space-7x) - 1px);
     margin: 0;
-    margin-inline-end: var(--cbp-space-2x);
     outline: 0;
     box-shadow: 0 0 0 calc(var(--cbp-space-5x) / 2) var(--cbp-radio-color-halo);
     clip-path: circle(80%); // verified
 
-    // Check Mark/Dash
+    // Radio marker
     &::before {
       content: '';
-      position: absolute;
-      margin: auto;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
       overflow: hidden;
       height: var(--cbp-space-4x);
       width: var(--cbp-space-4x);
       transform: scale(0);
-      //height: 0;
-      //width: 0;
       background-color: var(--cbp-radio-color-checked);
       border-radius: var(--cbp-border-radius-circle);
     }

packages/web-components/src/utils/utils.tsx

@@ -29,11 +29,12 @@ export const getFocusableElements = (scope: HTMLElement) => {
 export const setCSSProps = <T extends { [key: string]: any }>(host: HTMLElement, { ...props }: T): void => {
   Object.entries(props).forEach(([key, value]): void => {
     try {
-      //console.log('setCSSProps: ',{host},{key},{value}, typeof value);
-      // Any value other than undefined is coerced into a string?
-      //host.style.setProperty(key, value != undefined ? value : '');
+      // Still testing: Anything undefined should be skipped. Any other value is coerced into a string?
+      if (value != undefined) {
+        //console.log('setCSSProps: ', host, key, value, typeof value);
+        host.style.setProperty(key, value);
+      }
 
-      typeof value == 'string' ? host.style.setProperty(key, value) : host.style.setProperty(key, value != undefined ? `${value}` : '');
     } catch (e) {
       console.log('Error in setCSSProps: ', { host }, { key }, { value }, { e });
     }