@brightspace-ui/core 3.196.0 → 3.197.0

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

@@ -100,6 +100,20 @@
 				<d2l-test-input-radio-label></d2l-test-input-radio-label>
 			</d2l-demo-snippet>
 
+			<h2>Horizontal Layout</h2>
+			<d2l-demo-snippet>
+				<d2l-input-radio-group horizontal label="Bread">
+					<d2l-input-radio label="Super long label that extends and forces wrapping"></d2l-input-radio>
+					<d2l-input-radio style="max-width: 200px;" label="Super long label that extends and forces wrapping with max width"></d2l-input-radio>
+					<d2l-input-radio label="Whole wheat"></d2l-input-radio>
+					<d2l-input-radio label="Baguette"></d2l-input-radio>
+					<d2l-input-radio label="Marble Rye"></d2l-input-radio>
+					<d2l-input-radio label="Other" checked supporting-hidden-when-unchecked>
+						<d2l-input-text label="Other" label-hidden value="Sourdough" slot="supporting"></d2l-input-text>
+					</d2l-input-radio>
+				</d2l-input-radio-group>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/inputs/docs/input-radio.md

@@ -52,6 +52,7 @@ When provided with a `name`, the group will participate in forms with the `value
 
 | Property | Type | Description |
 |---|---|---|
+| `horizontal` | Boolean | Display the radio buttons horizontally |
 | `label` | String, required | Label for the group of radio inputs |
 | `label-hidden` | Boolean | Hides the label visually |
 | `name` | String | Name of the form control. Submitted with the form as part of a name/value pair. |

package/components/inputs/input-radio-group.js

@@ -15,6 +15,11 @@ class InputRadioGroup extends PropertyRequiredMixin(SkeletonMixin(FormElementMix
 
 	static get properties() {
 		return {
+			/**
+			 * Display the radio buttons horizontally
+			 * @type {boolean}
+			 */
+			horizontal: { type: Boolean, reflect: true },
 			/**
 			 * REQUIRED: Label for the group of radio inputs
 			 * @type {string}
@@ -46,6 +51,11 @@ class InputRadioGroup extends PropertyRequiredMixin(SkeletonMixin(FormElementMix
 				flex-direction: column;
 				gap: 0.6rem;
 			}
+			:host([horizontal]) div[role="radiogroup"] {
+				flex-direction: row;
+				flex-wrap: wrap;
+			}
+
 			.d2l-input-label[hidden] {
 				display: none;
 			}
@@ -57,6 +67,7 @@ class InputRadioGroup extends PropertyRequiredMixin(SkeletonMixin(FormElementMix
 
 	constructor() {
 		super();
+		this.horizontal = false;
 		this.labelHidden = false;
 		this.required = false;
 		this.setFormValue('');
@@ -88,6 +99,10 @@ class InputRadioGroup extends PropertyRequiredMixin(SkeletonMixin(FormElementMix
 		if (changedProperties.has('required')) {
 			this.#recalculateState(true);
 		}
+		if (changedProperties.has('horizontal')) {
+			const radios = this.#getRadios();
+			radios.forEach(el => el._horizontal = this.horizontal);
+		}
 	}
 
 	focus() {
@@ -218,6 +233,7 @@ class InputRadioGroup extends PropertyRequiredMixin(SkeletonMixin(FormElementMix
 			if (el._checked) checkedRadios.push(el);
 			el._isInitFromGroup = true;
 			el._focusable = false;
+			el._horizontal = this.horizontal;
 		});
 
 		// only the last checked radio is actually checked

package/components/inputs/input-radio.js

@@ -8,6 +8,7 @@ import { InputInlineHelpMixin } from './input-inline-help.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 import { radioStyles } from './input-radio-styles.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 /**
  * A radio input within a <d2l-input-radio-group>.
@@ -56,6 +57,7 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
 			_checked: { state: true },
 			_focusable: { state: true },
 			_hasSupporting: { state: true },
+			_horizontal: { state: true },
 			_isHovered: { state: true },
 			_invalid: { state: true }
 		};
@@ -95,6 +97,7 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
 		this._checked = false;
 		this._focusable = false;
 		this._hasSupporting = false;
+		this._horizontal = false;
 		this._isHovered = false;
 		this._isInitFromGroup = false;
 		this._invalid = false;
@@ -126,6 +129,9 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
 
 	render() {
 		const allowFocus = !this.focusDisabled && this._focusable;
+		const labelStyles = {
+			alignItems: this._horizontal ? 'flex-start' : undefined
+		};
 		const labelClasses = {
 			'd2l-input-radio-label': true,
 			'd2l-input-radio-label-disabled': this.disabled && !this.skeleton,
@@ -147,7 +153,7 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
 			html`<d2l-tooltip align="start" class="vdiff-target" for="${this.#inputId}" ?force-show="${this._isHovered}" position="top">${this.disabledTooltip}</d2l-tooltip>` :
 			nothing;
 		return html`
-			<div class="${classMap(labelClasses)}" @mouseover="${this.#handleMouseOver}" @mouseout="${this.#handleMouseOut}">
+			<div class="${classMap(labelClasses)}" style="${styleMap(labelStyles)}" @mouseover="${this.#handleMouseOver}" @mouseout="${this.#handleMouseOut}">
 				<div
 					aria-checked="${this._checked}"
 					aria-describedby="${ifDefined(ariaDescribedByIds.length > 0 ? ariaDescribedByIds : undefined)}"

package/custom-elements.json

@@ -7084,6 +7084,12 @@
           "description": "REQUIRED: Label for the group of radio inputs",
           "type": "string"
         },
+        {
+          "name": "horizontal",
+          "description": "Display the radio buttons horizontally",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "label-hidden",
           "description": "Hides the label visually",
@@ -7114,6 +7120,13 @@
           "description": "REQUIRED: Label for the group of radio inputs",
           "type": "string"
         },
+        {
+          "name": "horizontal",
+          "attribute": "horizontal",
+          "description": "Display the radio buttons horizontally",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "labelHidden",
           "attribute": "label-hidden",

package/package.json

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