@brightspace-ui/core 2.187.4 → 2.188.0

package/components/collapsible-panel/collapsible-panel.js

@@ -168,15 +168,10 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 				top: 2px;
 			}
 			.d2l-collapsible-panel-title {
-				-webkit-box-orient: vertical;
-				display: -webkit-box;
 				flex: 1;
-				-webkit-line-clamp: 2;
 				margin: 0.3rem;
 				margin-inline-start: var(--d2l-collapsible-panel-spacing-inline);
 				overflow-wrap: anywhere;
-				overflow-x: hidden;
-				overflow-y: hidden;
 				user-select: none;
 			}
 			.d2l-collapsible-panel.has-before .d2l-collapsible-panel-title {
@@ -390,7 +385,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 
 	_handleExpandCollapse(e) {
 		const eventPromise = this.expanded ? e.detail.expandComplete : e.detail.collapseComplete;
-		const event = `d2l-collapsible-panel-${this.expanded ? 'expand' : 'collapse' }`;
+		const event = this.expanded ? 'd2l-collapsible-panel-expand' : 'd2l-collapsible-panel-collapse';
 
 		this.dispatchEvent(new CustomEvent(
 			event, { bubbles: false, composed: false, detail: { complete: eventPromise } }

package/components/inputs/demo/input-radio-spacer-test.js

@@ -1,41 +1,32 @@
 import '../input-radio-spacer.js';
 import { html, LitElement } from 'lit';
-import { bodySmallStyles } from '../../typography/styles.js';
+import { inlineHelpStyles } from '../input-inline-help.js';
 import { radioStyles } from '../input-radio-styles.js';
 
 class TestInputRadioSpacer extends LitElement {
 
 	static get styles() {
-		return [ radioStyles, bodySmallStyles ];
+		return [ radioStyles, inlineHelpStyles ];
 	}
 
 	render() {
 		return html`
 			<div>
 				<label class="d2l-input-radio-label">
-					<input type="radio" name="myGroup" value="normal" checked>
+					<input type="radio" aria-describedby="desc1" name="myGroup" value="normal">
 					Option 1
 				</label>
-				<d2l-input-radio-spacer>
+				<d2l-input-radio-spacer id="desc1" class="d2l-input-inline-help">
 					Additional content can go here and will line up nicely with the edge of the radio.
 				</d2l-input-radio-spacer>
 			</div>
 			<div>
 				<label class="d2l-input-radio-label">
-					<input type="radio" name="myGroup" value="normal">
-					Option 1 (A really really long label that will wrap to the next line where the indentation will be applied. All the text should align.)
+					<input type="radio" aria-describedby="desc2" name="myGroup" value="normal">
+					Option 1 (Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker.)
 				</label>
-				<d2l-input-radio-spacer>
-					Additional content can go here and will line up nicely with the edge of the radio.
-				</d2l-input-radio-spacer>
-			</div>
-			<div>
-				<label class="d2l-input-radio-label">
-					<input type="radio" name="myGroup" value="normal">
-					Option 1
-				</label>
-				<d2l-input-radio-spacer>
-					<div class="d2l-body-small">Additional content can go here and will line up nicely with the edge of the radio.</div>
+				<d2l-input-radio-spacer id="desc2" class="d2l-input-inline-help">
+					Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.
 				</d2l-input-radio-spacer>
 			</div>
 		`;

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

@@ -123,21 +123,22 @@ To align related content below radio buttons, the `d2l-input-radio-spacer` eleme
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-radio-spacer.js';
   import { html, LitElement } from 'lit';
+  import { inlineHelpStyles } from '@brightspace-ui/core/components/inputs/input-inline-help.js';
   import { radioStyles } from '@brightspace-ui/core/components/inputs/input-radio-styles.js';
 
   class MyRadioElem extends LitElement {
 
     static get styles() {
-      return radioStyles;
+      return [ radioStyles, inlineHelpStyles ];
     }
 
     render() {
       return html`
         <label class="d2l-input-radio-label">
-          <input type="radio" value="normal" checked>
+          <input type="radio" aria-describedby="desc1" value="normal" checked>
           Option 1
         </label>
-        <d2l-input-radio-spacer>
+        <d2l-input-radio-spacer id="desc1" class="d2l-input-inline-help">
           Additional content can go here and will line up nicely with the edge of the radio.
         </d2l-input-radio-spacer>
       `;

package/components/inputs/input-checkbox.js

@@ -4,7 +4,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { InputInlineHelpMixin } from './input-inline-help-mixin.js';
+import { InputInlineHelpMixin } from './input-inline-help.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';

package/components/inputs/input-color.js

@@ -10,7 +10,7 @@ import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { getValidHexColor } from '../../helpers/color.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { InputInlineHelpMixin } from './input-inline-help-mixin.js';
+import { InputInlineHelpMixin } from './input-inline-help.js';
 import { inputLabelStyles } from './input-label-styles.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';

package/components/inputs/input-fieldset.js

@@ -2,7 +2,7 @@ import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { InputInlineHelpMixin } from './input-inline-help-mixin.js';
+import { InputInlineHelpMixin } from './input-inline-help.js';
 import { inputLabelStyles } from './input-label-styles.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';

package/components/inputs/{input-inline-help-mixin.js → input-inline-help.js}

@@ -1,7 +1,17 @@
 import { css, html } from 'lit';
-import { bodySmallStyles } from '../typography/styles.js';
+import { _generateBodySmallStyles } from '../typography/styles.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
+export const inlineHelpStyles = [
+	_generateBodySmallStyles('.d2l-input-inline-help'),
+	css`
+		.d2l-input-inline-help {
+			margin-top: 0.3rem !important;
+			overflow-wrap: anywhere;
+		}
+	`
+];
+
 export const InputInlineHelpMixin = superclass => class extends SkeletonMixin(superclass) {
 
 	static get properties() {
@@ -11,14 +21,12 @@ export const InputInlineHelpMixin = superclass => class extends SkeletonMixin(su
 	}
 
 	static get styles() {
-		const styles = [ bodySmallStyles, css`
+		const styles = [ inlineHelpStyles, css`
 			:host([_has-inline-help]) .d2l-input-inline-help {
 				display: block;
 			}
 			.d2l-input-inline-help {
 				display: none;
-				margin-top: 0.3rem !important;
-				overflow-wrap: anywhere;
 			}
 		`];
 
@@ -38,7 +46,7 @@ export const InputInlineHelpMixin = superclass => class extends SkeletonMixin(su
 
 	_renderInlineHelp(id) {
 		return html`
-			<div id="${id}" class="d2l-body-small d2l-input-inline-help d2l-skeletize">
+			<div id="${id}" class="d2l-input-inline-help d2l-skeletize">
 				<slot name="inline-help" @slotchange="${this._handleInlineHelpSlotChange}"></slot>
 			</div>
 		`;

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

@@ -19,6 +19,9 @@ class InputRadioSpacer extends RtlMixin(LitElement) {
 					padding-left: 0;
 					padding-right: 1.7rem;
 				}
+				:host(.d2l-input-inline-help) {
+					margin-bottom: 0.9rem !important;
+				}
 			`;
 	}
 

package/components/inputs/input-text.js

@@ -7,7 +7,7 @@ import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { InputInlineHelpMixin } from './input-inline-help-mixin.js';
+import { InputInlineHelpMixin } from './input-inline-help.js';
 import { inputLabelStyles } from './input-label-styles.js';
 import { inputStyles } from './input-styles.js';
 import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';

package/components/inputs/input-textarea.js

@@ -6,7 +6,7 @@ import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { InputInlineHelpMixin } from './input-inline-help-mixin.js';
+import { InputInlineHelpMixin } from './input-inline-help.js';
 import { inputLabelStyles } from './input-label-styles.js';
 import { inputStyles } from './input-styles.js';
 import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';

package/components/inputs/input-time.js

@@ -11,7 +11,7 @@ import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { InputInlineHelpMixin } from './input-inline-help-mixin.js';
+import { InputInlineHelpMixin } from './input-inline-help.js';
 import { inputLabelStyles } from './input-label-styles.js';
 import { inputStyles } from './input-styles.js';
 import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';

package/components/typography/styles.js

@@ -79,47 +79,57 @@ export const _generateBodyCompactStyles = (selector) => {
 
 export const bodyCompactStyles = _generateBodyCompactStyles('.d2l-body-compact');
 
-export const bodySmallStyles = css`
-	.d2l-body-small {
-		color: var(--d2l-color-tungsten);
-		font-size: 0.7rem;
-		font-weight: 400;
-		line-height: 1rem;
-		margin: auto;
-	}
-	:host([skeleton]) .d2l-body-small.d2l-skeletize::before {
-		bottom: 0.25rem;
-		top: 0.2rem;
-	}
-	:host([skeleton]) .d2l-body-small.d2l-skeletize-paragraph-2 {
-		max-height: 2rem;
-	}
-	:host([skeleton]) .d2l-body-small.d2l-skeletize-paragraph-3 {
-		max-height: 3rem;
-	}
-	:host([skeleton]) .d2l-body-small.d2l-skeletize-paragraph-5 {
-		max-height: 5rem;
-	}
-	@media (max-width: 615px) {
-		.d2l-body-small {
-			font-size: 0.6rem;
-			line-height: 0.9rem;
+/**
+ * A private helper method that should not be used by general consumers
+ */
+export const _generateBodySmallStyles = (selector) => {
+	if (!_isValidCssSelector(selector)) return;
+
+	selector = unsafeCSS(selector);
+	return css`
+		${selector} {
+			color: var(--d2l-color-tungsten);
+			font-size: 0.7rem;
+			font-weight: 400;
+			line-height: 1rem;
+			margin: auto;
 		}
-		:host([skeleton]) .d2l-body-small.d2l-skeletize::before {
+		:host([skeleton]) ${selector}.d2l-skeletize::before {
 			bottom: 0.25rem;
 			top: 0.2rem;
 		}
-		:host([skeleton]) .d2l-body-small.d2l-skeletize-paragraph-2 {
-			max-height: 1.8rem;
+		:host([skeleton]) ${selector}.d2l-skeletize-paragraph-2 {
+			max-height: 2rem;
+		}
+		:host([skeleton]) ${selector}.d2l-skeletize-paragraph-3 {
+			max-height: 3rem;
 		}
-		:host([skeleton]) .d2l-body-small.d2l-skeletize-paragraph-3 {
-			max-height: 2.7rem;
+		:host([skeleton]) ${selector}.d2l-skeletize-paragraph-5 {
+			max-height: 5rem;
 		}
-		:host([skeleton]) .d2l-body-small.d2l-skeletize-paragraph-5 {
-			max-height: 4.5rem;
+		@media (max-width: 615px) {
+			${selector} {
+				font-size: 0.6rem;
+				line-height: 0.9rem;
+			}
+			:host([skeleton]) ${selector}.d2l-skeletize::before {
+				bottom: 0.25rem;
+				top: 0.2rem;
+			}
+			:host([skeleton]) ${selector}.d2l-skeletize-paragraph-2 {
+				max-height: 1.8rem;
+			}
+			:host([skeleton]) ${selector}.d2l-skeletize-paragraph-3 {
+				max-height: 2.7rem;
+			}
+			:host([skeleton]) ${selector}.d2l-skeletize-paragraph-5 {
+				max-height: 4.5rem;
+			}
 		}
-	}
-`;
+	`;
+};
+
+export const bodySmallStyles = _generateBodySmallStyles('.d2l-body-small');
 
 export const heading1Styles = css`
 	.d2l-heading-1 {

package/package.json

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