@brightspace-ui/core 3.195.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/components/list/demo/list-layout.html

@@ -426,6 +426,47 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Tile Breaks</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-toggle pressed>
+						<d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
+						<d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
+					</d2l-button-toggle>
+					<d2l-list layout="tiles">
+						<d2l-list-item label="item 1" key="1">
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
+							<d2l-list-item-content>
+								<div>Identify categories of physical activities</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation A1.2</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+						<div class="d2l-list-tile-break"></div>
+						<d2l-list-item label="item 2" key="2">
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
+							<d2l-list-item-content>
+								<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation B2.1</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item label="item 3" key="3">
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
+							<d2l-list-item-content>
+								<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation B2.2</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+					</d2l-list>
+					<script data-demo-hide>
+						(demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/list/list.js

@@ -146,6 +146,15 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 			:host([add-button]) ::slotted([slot="controls"]) {
 				margin-bottom: calc(6px + 0.4rem); /* controls section margin-bottom + spacing for add-button */
 			}
+
+			::slotted(.d2l-list-tile-break) {
+				display: none;
+			}
+			:host([layout="tiles"]) ::slotted(.d2l-list-tile-break) {
+				display: block;
+				flex-basis: 100%;
+				height: 0;
+			}
 		`;
 	}
 

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.195.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",