@brightspace-ui/core 2.187.3 → 2.187.5

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

@@ -1,20 +1,34 @@
 import '../input-radio-spacer.js';
 import { html, LitElement } from 'lit';
+import { inlineHelpStyles } from '../input-inline-help.js';
 import { radioStyles } from '../input-radio-styles.js';
 
 class TestInputRadioSpacer extends LitElement {
 
 	static get styles() {
-		return radioStyles;
+		return [ radioStyles, inlineHelpStyles ];
 	}
 
 	render() {
 		return html`
-			<input type="radio" class="d2l-input-radio" aria-label="Option 1"> Option 1
-			<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>
+				<label class="d2l-input-radio-label">
+					<input type="radio" aria-describedby="desc1" name="myGroup" value="normal">
+					Option 1
+				</label>
+				<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" 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 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

@@ -116,28 +116,31 @@ If you'd like to manually link the radio input with a label, or use an ARIA labe
 
 ## Radio Spacer [d2l-input-radio-spacer]
 
-To align related content below radio buttons, the `d2l-input-radio-spacer` element can be used:
+To align related content below radio buttons, the `d2l-input-radio-spacer` element can be used in conjunction with the `d2l-input-radio-label` class:
 
 <!-- docs: demo code display:block -->
 ```html
 <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`
-      <input type="radio" class="d2l-input-radio" aria-label="Option 1"> Option 1
-      <d2l-input-radio-spacer>
-      Additional content can go here and will
-      line up nicely with the edge of the radio.
-      </d2l-input-radio-spacer>
+        <label class="d2l-input-radio-label">
+          <input type="radio" aria-describedby="desc1" value="normal" checked>
+          Option 1
+        </label>
+        <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.3",
+  "version": "2.187.5",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",