@brightspace-ui/core 3.123.3 → 3.124.0

package/components/inputs/demo/input-group.html

@@ -26,20 +26,18 @@
 					<d2l-form>
 						<d2l-input-group>
 							<d2l-input-text label="Name" required></d2l-input-text>
-							<d2l-input-fieldset label="Options">
-								<d2l-input-checkbox-group>
-									<d2l-input-checkbox>Option 1</d2l-input-checkbox>
-									<d2l-input-checkbox checked>Option 2</d2l-input-checkbox>
-									<d2l-input-checkbox>Option 3</d2l-input-checkbox>
-								</d2l-input-checkbox-group>
-							</d2l-input-fieldset>
-							<d2l-input-fieldset label="Address" label-hidden>
+							<d2l-input-textarea label="Description" rows="3"></d2l-input-textarea>
+							<d2l-input-checkbox-group label="Options">
+								<d2l-input-checkbox>Option 1</d2l-input-checkbox>
+								<d2l-input-checkbox checked>Option 2</d2l-input-checkbox>
+								<d2l-input-checkbox>Option 3</d2l-input-checkbox>
+							</d2l-input-checkbox-group>
+							<d2l-input-fieldset label="Address" label-style="heading">
 								<d2l-input-group>
 									<d2l-input-text label="Street" required></d2l-input-text>
 									<d2l-input-text label="City" required></d2l-input-text>
 								</d2l-input-group>
 							</d2l-input-fieldset>
-							<d2l-input-textarea label="Description" rows="3"></d2l-input-textarea>
 						</d2l-input-group>
 					</d2l-form>
 					<d2l-floating-buttons>

package/components/inputs/input-fieldset.js

@@ -1,6 +1,7 @@
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
+import { heading4Styles } from '../typography/styles.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { InputInlineHelpMixin } from './input-inline-help.js';
 import { inputLabelStyles } from './input-label-styles.js';
@@ -26,6 +27,11 @@ class InputFieldset extends PropertyRequiredMixin(InputInlineHelpMixin(SkeletonM
 			 * @type {boolean}
 			 */
 			labelHidden: { type: Boolean, attribute: 'label-hidden', reflect: true },
+			/**
+			 * Style of the fieldset label
+			 * @type {'default'|'heading'}
+			 */
+			labelStyle: { type: String, attribute: 'label-style', reflect: true },
 			/**
 			 * Indicates that a value is required for inputs in the fieldset
 			 * @type {boolean}
@@ -35,7 +41,7 @@ class InputFieldset extends PropertyRequiredMixin(InputInlineHelpMixin(SkeletonM
 	}
 
 	static get styles() {
-		return [ super.styles, inputLabelStyles, offscreenStyles,
+		return [ super.styles, heading4Styles, inputLabelStyles, offscreenStyles,
 			css`
 				:host {
 					display: block;
@@ -43,6 +49,13 @@ class InputFieldset extends PropertyRequiredMixin(InputInlineHelpMixin(SkeletonM
 				:host([hidden]) {
 					display: none;
 				}
+				:host([label-style="heading"]:not([label-hidden])) {
+					margin-block-start: 0.3rem;
+				}
+				legend.d2l-heading-4 {
+					margin-block: 0 0.6rem;
+					padding: 0;
+				}
 			`
 		];
 	}
@@ -50,21 +63,22 @@ class InputFieldset extends PropertyRequiredMixin(InputInlineHelpMixin(SkeletonM
 	constructor() {
 		super();
 		this.labelHidden = false;
+		this.labelStyle = 'default';
 		this.required = false;
 		this._inlineHelpId = getUniqueId();
 	}
 
 	render() {
 		const legendClasses = {
-			'd2l-input-label': true,
+			'd2l-heading-4': this.labelStyle === 'heading',
+			'd2l-input-label': this.labelStyle !== 'heading',
 			'd2l-offscreen': this.labelHidden,
 			'd2l-skeletize': true
 		};
 		return html`
 			<fieldset
 				class="d2l-input-label-fieldset"
-				aria-describedby="${ifDefined(this._hasInlineHelp ? this._inlineHelpId : undefined)}"
-			>
+				aria-describedby="${ifDefined(this._hasInlineHelp ? this._inlineHelpId : undefined)}">
 				<legend class="${classMap(legendClasses)}">${this.label}</legend>
 				<slot></slot>
 				${this._renderInlineHelp(this._inlineHelpId)}

package/components/inputs/input-group.js

@@ -11,7 +11,7 @@ class InputGroup extends LitElement {
 			:host {
 				display: flex;
 				flex-direction: column;
-				gap: 1rem;
+				gap: 0.9rem;
 			}
 			:host([hidden]) {
 				display: none;

package/custom-elements.json

@@ -6406,6 +6406,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "label-style",
+          "description": "Style of the fieldset label",
+          "type": "'default'|'heading'",
+          "default": "\"default\""
+        },
         {
           "name": "required",
           "description": "Indicates that a value is required for inputs in the fieldset",
@@ -6432,6 +6438,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "labelStyle",
+          "attribute": "label-style",
+          "description": "Style of the fieldset label",
+          "type": "'default'|'heading'",
+          "default": "\"default\""
+        },
         {
           "name": "required",
           "attribute": "required",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.123.3",
+  "version": "3.124.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",