Updated dnn-select to use dnn-fieldset

packages/stencil-library/custom-elements.json

@@ -61,7 +61,7 @@
               "type": {
                 "text": "\"button\" | \"reset\" | \"submit\""
               },
-              "description": "Optional button type,\r\ncan be either submit, reset or button and defaults to button if not specified.\r\nWarning: DNN wraps the whole page in a form, only use this if you are handling\r\nform submission manually.",
+              "description": "Optional button type,\ncan be either submit, reset or button and defaults to button if not specified.\nWarning: DNN wraps the whole page in a form, only use this if you are handling\nform submission manually.",
               "default": "'button'",
               "required": false
             },
@@ -88,7 +88,7 @@
               "type": {
                 "text": "\"danger\" | \"primary\" | \"secondary\" | \"tertiary\""
               },
-              "description": "Optional button style,\r\ncan be either primary, secondary or tertiary or danger and defaults to primary if not specified",
+              "description": "Optional button style,\ncan be either primary, secondary or tertiary or danger and defaults to primary if not specified",
               "default": "'primary'",
               "required": false
             }
@@ -447,7 +447,7 @@
                 "text": "{ contrast: string; preview: string; cancel: string; confirm: string; normal: string; light: string; dark: string; }"
               },
               "description": "Can be used to customize the text language.",
-              "default": "{\r\n    contrast: \"Contrast\",\r\n    preview: \"Preview\",\r\n    cancel: \"Cancel\",\r\n    confirm: \"Confirm\",\r\n    normal: \"Normal\",\r\n    light: \"Light\",\r\n    dark: \"Dark\",\r\n  }",
+              "default": "{\n    contrast: \"Contrast\",\n    preview: \"Preview\",\n    cancel: \"Cancel\",\n    confirm: \"Confirm\",\n    normal: \"Normal\",\n    light: \"Light\",\n    dark: \"Dark\",\n  }",
               "required": false
             }
           ],
@@ -563,7 +563,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "If true, will allow the user to take a snapshot\r\nusing the device camera. (only works over https).",
+              "description": "If true, will allow the user to take a snapshot\nusing the device camera. (only works over https).",
               "default": "false",
               "required": false
             },
@@ -572,7 +572,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "Specifies the jpeg quality for when the device\r\ncamera is used to generate a picture.\r\nNeeds to be a number between 0 and 1 and defaults to 0.8",
+              "description": "Specifies the jpeg quality for when the device\ncamera is used to generate a picture.\nNeeds to be a number between 0 and 1 and defaults to 0.8",
               "default": "0.8",
               "required": false
             },
@@ -600,7 +600,7 @@
               "type": {
                 "text": "string[]"
               },
-              "description": "A list of allowed file extensions.\r\nIf not specified, any file is allowed.\r\nEx: [\"jpg\", \"jpeg\", \"gif\", \"png\"]",
+              "description": "A list of allowed file extensions.\nIf not specified, any file is allowed.\nEx: [\"jpg\", \"jpeg\", \"gif\", \"png\"]",
               "required": false
             },
             {
@@ -807,7 +807,7 @@
           "kind": "class",
           "name": "dnn-image-cropper.tsx",
           "tagName": "dnn-image-cropper",
-          "description": "Allows cropping an image in-browser with the option to enforce a specific final size.\r\nAll computation happens in the browser and the final image is emmited\r\nin an event that has a data-url of the image.",
+          "description": "Allows cropping an image in-browser with the option to enforce a specific final size.\nAll computation happens in the browser and the final image is emmited\nin an event that has a data-url of the image.",
           "attributes": [
             {
               "name": "height",
@@ -859,7 +859,7 @@
               "type": {
                 "text": "ImageCropperResx"
               },
-              "description": "Can be used to customize controls text.\r\nSome values support tokens, see default values for examples.",
+              "description": "Can be used to customize controls text.\nSome values support tokens, see default values for examples.",
               "required": false
             },
             {
@@ -916,7 +916,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "If true, the browser default validation message will be hidden.",
+              "description": "",
               "required": false
             },
             {
@@ -1135,7 +1135,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Optionally pass the aria-label text for the close button.\r\nDefaults to \"Close modal\" if not provided.",
+              "description": "Optionally pass the aria-label text for the close button.\nDefaults to \"Close modal\" if not provided.",
               "default": "\"Close modal\"",
               "required": false
             },
@@ -1153,7 +1153,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Optionally you can pass false to not show the close button.\r\nIf you decide to do so, you should either not also prevent dismissal by clicking the backdrop\r\nor provide your own dismissal logic in the modal content.",
+              "description": "Optionally you can pass false to not show the close button.\nIf you decide to do so, you should either not also prevent dismissal by clicking the backdrop\nor provide your own dismissal logic in the modal content.",
               "default": "true",
               "required": false
             },
@@ -1526,7 +1526,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Fires up each time the search query changes.\r\nThe data passed is the new query."
+              "description": "Fires up each time the search query changes.\nThe data passed is the new query."
             }
           ],
           "slots": [],
@@ -1550,7 +1550,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "If true, the browser default validation message will be hidden.",
+              "description": "",
               "required": false
             },
             {
@@ -1950,7 +1950,7 @@
           "kind": "class",
           "name": "dnn-vertical-splitview.tsx",
           "tagName": "dnn-vertical-splitview",
-          "description": "This allows splitting a UI into vertical adjustable panels, the splitter itself is not part of this component.\r\n- The content for the left part should be injected in the `left` slot.\r\n- The content for the right part should be injected in the `right` slot.\r\n- The content for the actual splitter should go in the default slot and other UI elements can be injected as long as you handle their behaviour, by default only the drag behavior is implemented in the component.",
+          "description": "This allows splitting a UI into vertical adjustable panels, the splitter itself is not part of this component.\n- The content for the left part should be injected in the `left` slot.\n- The content for the right part should be injected in the `right` slot.\n- The content for the actual splitter should go in the default slot and other UI elements can be injected as long as you handle their behaviour, by default only the drag behavior is implemented in the component.",
           "attributes": [
             {
               "name": "split-width-percentage",

packages/stencil-library/src/components.d.ts

@@ -507,7 +507,7 @@ export namespace Components {
     }
     interface DnnSelect {
         /**
-          * If true, the browser default validation message will be hidden.
+          * @deprecated This control has its own validatin reporting, will be removed in v0.25.0
          */
         "disableValidityReporting": boolean;
         /**
@@ -1607,7 +1607,7 @@ declare namespace LocalJSX {
     }
     interface DnnSelect {
         /**
-          * If true, the browser default validation message will be hidden.
+          * @deprecated This control has its own validatin reporting, will be removed in v0.25.0
          */
         "disableValidityReporting"?: boolean;
         /**

packages/stencil-library/src/components/dnn-color-input/readme.md

@@ -62,6 +62,7 @@ A custom input component that allows previewing and changing a color value.
 
 ### Depends on
 
+- [dnn-fieldset](../dnn-fieldset)
 - [dnn-modal](../dnn-modal)
 - [dnn-tabs](../dnn-tabs)
 - [dnn-tab](../dnn-tab)
@@ -71,6 +72,7 @@ A custom input component that allows previewing and changing a color value.
 ### Graph
 ```mermaid
 graph TD;
+  dnn-color-input --> dnn-fieldset
   dnn-color-input --> dnn-modal
   dnn-color-input --> dnn-tabs
   dnn-color-input --> dnn-tab

packages/stencil-library/src/components/dnn-fieldset/readme.md

@@ -124,12 +124,18 @@ Type: `Promise<void>`
 
 ### Used by
 
+ - [dnn-color-input](../dnn-color-input)
  - [dnn-example-form](../examples/dnn-example-form)
+ - [dnn-input](../dnn-input)
+ - [dnn-select](../dnn-select)
 
 ### Graph
 ```mermaid
 graph TD;
+  dnn-color-input --> dnn-fieldset
   dnn-example-form --> dnn-fieldset
+  dnn-input --> dnn-fieldset
+  dnn-select --> dnn-fieldset
   style dnn-fieldset fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

packages/stencil-library/src/components/dnn-input/readme.md

@@ -15,7 +15,7 @@ A custom input component that wraps the html input element is a mobile friendly
 | -------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ----------- |
 | `allowShowPassword`        | `allow-show-password`        | If true, enables users to switch between a password and a text field (to view their password).                                                                                                    | `boolean`                                                                                                           | `undefined` |
 | `autocomplete`             | `autocomplete`               | Defines the type of auto-completion to use for this field, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete.                                                         | `string`                                                                                                            | `"off"`     |
-| `disableValidityReporting` | `disable-validity-reporting` | If true, the browser default validation message will be hidden.                                                                                                                                   | `boolean`                                                                                                           | `undefined` |
+| `disableValidityReporting` | `disable-validity-reporting` | <span style="color:red">**[DEPRECATED]**</span> This control has it's own validation reporting, will be removed in v0.25.0<br/><br/>                                                              | `boolean`                                                                                                           | `undefined` |
 | `disabled`                 | `disabled`                   | Defines whether the field is disabled.                                                                                                                                                            | `boolean`                                                                                                           | `undefined` |
 | `helpText`                 | `help-text`                  | Defines the help label displayed under the field.                                                                                                                                                 | `string`                                                                                                            | `undefined` |
 | `label`                    | `label`                      | The label for this input.                                                                                                                                                                         | `string`                                                                                                            | `undefined` |
@@ -96,9 +96,14 @@ Type: `Promise<void>`
 
  - [dnn-example-form](../examples/dnn-example-form)
 
+### Depends on
+
+- [dnn-fieldset](../dnn-fieldset)
+
 ### Graph
 ```mermaid
 graph TD;
+  dnn-input --> dnn-fieldset
   dnn-example-form --> dnn-input
   style dnn-input fill:#f9f,stroke:#333,stroke-width:4px
 ```

packages/stencil-library/src/components/dnn-select/dnn-select.scss

@@ -20,77 +20,27 @@
   --input-text-align: left;
 }
 
-.container{
-  border: 1px solid var(--foreground, #000);
-  border-radius: var(--control-radius, 3px);
-  padding: 0.75em;
+dnn-fieldset{
+  width: 100%;
+}
+
+.inner-container{
   display: flex;
   justify-content: space-between;
-  gap: 0.1em;
   position: relative;
+  width: 100%;
   background-color: var(--background);
-  .inner-container{
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    width: 100%;
-    background-color: var(--background);
-  }
-  label{
-    display: inline-block;
-    position: absolute;
-    opacity: 0.6;
-    transition: all 150ms ease-in-out;
-    left: 0;
-    top: 0;
-    padding: 0 0.5em;
-    background-color: var(--background);
-    white-space: nowrap;
-    max-width: 100%;
-    border-radius: var(--control-radius);
-    font-size: 1em;
-  }
-  select{
-    border: none;
-    outline: none;
-    background-color: var(--background);
-    text-align: var(--input-text-align);
-    width: 100%;
-    cursor: pointer; 
-  }
-  label{
-    opacity: 1;
-    left: 0.5em;
-    top: -1.5em;
-  }
-  &.focused{
-    border: 1px solid var(--focus-color);
-    box-shadow: 0 0 0 1px var(--focus-color);
-    &.invalid{
-      border: 1px solid var(--danger-color);
-      box-shadow: 0 0 0 1px var(--danger-color);
-    }
-
-  }
-  &.disabled{
-    opacity: 0.5;
-  }
-  &.invalid{
-    border-color: var(--danger-color);
-  }
 }
 
-.help-text, .error-message{
-  font-style: italic;
-  opacity: 0.7;
-  font-size: 0.8em;
-  margin: 0.25em;
-}
-.error-message{
-  color: var(--danger-color);
-  font-style: normal;
-  font-weight: bold;
+select{
+  border: none;
+  outline: none;
+  background-color: var(--background);
+  text-align: var(--input-text-align);
+  width: 100%;
+  cursor: pointer; 
 }
+
 .prefix, .suffix{
   font-size: 0.8em;
 }

packages/stencil-library/src/components/dnn-select/dnn-select.tsx

@@ -24,13 +24,13 @@ export class DnnSelect {
   /** Defines whether the field is disabled. */
   @Prop() disabled: boolean;
 
-  /** If true, the browser default validation message will be hidden. */
+  /** @deprecated This control has its own validatin reporting, will be removed in v0.25.0 */
   @Prop() disableValidityReporting: boolean;
 
   /** The value of the input. */
   @Prop({mutable: true, reflect:true}) value: string;
 
-  @Element() el: HTMLElement;
+  @Element() el: HTMLDnnSelectElement;
 
   @State() focused: boolean = false;
   @State() valid = true;
@@ -67,6 +67,7 @@ export class DnnSelect {
     this.setFormValue();
   }
 
+  // eslint-disable-next-line @stencil-community/own-methods-must-be-private
   formResetCallback() {
     this.internals.setValidity({});
     this.value = this.originalValue;
@@ -85,38 +86,17 @@ export class DnnSelect {
   }
 
   private setFormValue(){
-    if (this.name){
+    if (this.name != undefined){
       var data = new FormData();
       data.append(this.name, this.value);
       this.internals.setFormValue(data);
     }
   }
 
-  private getContainerClasses() {
-    const classes = ["container"];
-
-    if (this.focused) {
-      classes.push("focused");
-    }
-
-    if (!this.valid){
-      classes.push("invalid");
-    }
-
-    if (this.disabled) {
-      classes.push("disabled");
-    }
-
-    return classes.join(" ");
-  }
-
   private handleChange(value: string) {
     this.value = value;
     var valid = this.select.checkValidity();
     this.valid = valid;
-    if (!this.disableValidityReporting) {
-      this.select.reportValidity();
-    }
     this.valueChange.emit(this.value);
     this.setFormValue();
   }
@@ -131,16 +111,15 @@ export class DnnSelect {
   render() {
     return (
       <Host>
-        <div
-          class={this.getContainerClasses()}
+        <dnn-fieldset
+          invalid={!this.valid}
+          focused={this.focused}
+          label={`${this.label ?? ""}${this.required ? " *" : ""}`}
+          helpText={this.helpText}
+          id={this.labelId}
           onClick={() => !this.focused && this.select.focus()}
         >
           <div class="inner-container">
-            {this.label &&
-              <label id={this.labelId}>
-                {`${this.label}${this.required ? " *" : ""}`}
-              </label>
-            }
             <select
               ref={el => this.select = el}
               onFocus={() => this.focused = true}
@@ -159,15 +138,7 @@ export class DnnSelect {
               </svg>
             }
           </div>
-        </div>
-        {!this.valid && this.customValidityMessage &&
-          <div class="error-message">
-            {this.customValidityMessage}
-          </div>
-        }
-        {this.valid &&
-          <div class="help-text">{this.helpText}</div>
-        }
+        </dnn-fieldset>
       </Host>
     );
   }