@brightspace-ui/core 3.127.2 → 3.127.4

package/components/inputs/input-checkbox.js

@@ -1,18 +1,15 @@
 import '../colors/colors.js';
 import '../tooltip/tooltip.js';
-import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
-import { getFlag } from '../../helpers/flags.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { InputInlineHelpMixin } from './input-inline-help.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
-const inputStyleTweaksEnabled = getFlag('input-style-tweaks', true);
-
 export const cssSizes = {
 	inputBoxSize: 1.2,
 	checkboxMargin: 0.5,
@@ -132,7 +129,7 @@ class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(Ske
 			css`
 				:host {
 					display: block;
-					margin-block-end: ${unsafeCSS(inputStyleTweaksEnabled ? '0.6rem' : '0.9rem')}; /* stylelint-disable-line */
+					margin-block-end: 0.6rem;
 				}
 				:host([hidden]) {
 					display: none;
@@ -180,7 +177,7 @@ class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(Ske
 				}
 				.d2l-input-checkbox-supporting {
 					display: none;
-					margin-block-start: ${unsafeCSS(inputStyleTweaksEnabled ? '0.6rem' : '0.9rem')}; /* stylelint-disable-line */
+					margin-block-start: 0.6rem;
 				}
 				.d2l-input-checkbox-supporting-visible {
 					display: block;

package/components/inputs/input-label-styles.js

@@ -1,7 +1,4 @@
-import { css, unsafeCSS } from 'lit';
-import { getFlag } from '../../helpers/flags.js';
-
-const inputStyleTweaksEnabled = getFlag('input-style-tweaks', true);
+import { css } from 'lit';
 
 export const inputLabelStyles = css`
 	.d2l-input-label {
@@ -10,8 +7,8 @@ export const inputLabelStyles = css`
 		font-size: 0.7rem;
 		font-weight: 700;
 		letter-spacing: 0.2px;
-		line-height: ${unsafeCSS(inputStyleTweaksEnabled ? '0.9rem' : '1rem')}; /* stylelint-disable-line */
-		margin-block: 0 ${unsafeCSS(inputStyleTweaksEnabled ? '0.4rem' : '7px')}; /* stylelint-disable-line */
+		line-height: 0.9rem;
+		margin-block: 0 0.4rem;
 		margin-inline: 0;
 		padding: 0;
 	}

package/components/inputs/input-text.js

@@ -258,7 +258,7 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 					opacity: 0.5;
 				}
 				.d2l-input-text-invalid-icon {
-					background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0wIDBoMjJ2MjJIMHoiLz4KICAgIDxwYXRoIGQ9Ik0xOC44NjQgMTYuNDdMMTIuNjIzIDMuOTg5YTEuNzgzIDEuNzgzIDAgMDAtMy4xOTIgMEwzLjE4OSAxNi40N2ExLjc2MSAxLjc2MSAwIDAwLjA4IDEuNzNjLjMyNS41MjUuODk4Ljc5OCAxLjUxNi43OTloMTIuNDgzYy42MTggMCAxLjE5Mi0uMjczIDEuNTE2LS44LjIzNy0uMzM1LjI2NS0xLjM3LjA4LTEuNzN6IiBmaWxsPSIjQ0QyMDI2IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz4KICAgIDxwYXRoIGQ9Ik0xMS4wMjcgMTcuMjY0YTEuMzM3IDEuMzM3IDAgMTEwLTIuNjc1IDEuMzM3IDEuMzM3IDAgMDEwIDIuNjc1ek0xMS45IDEyLjk4YS44OTIuODkyIDAgMDEtMS43NDcgMEw5LjI3IDguNTJhLjg5Mi44OTIgMCAwMS44NzQtMS4wNjRoMS43NjhhLjg5Mi44OTIgMCAwMS44NzQgMS4wNjVsLS44ODYgNC40NTh6IiBmaWxsPSIjRkZGIi8+CiAgPC9nPgo8L3N2Zz4K");
+					background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxwYXRoIGQ9Ik0xOC44NjQgMTYuNDdMMTIuNjIzIDMuOTg5YTEuNzgzIDEuNzgzIDAgMDAtMy4xOTIgMEwzLjE4OSAxNi40N2ExLjc2MSAxLjc2MSAwIDAwLjA4IDEuNzNjLjMyNS41MjUuODk4Ljc5OCAxLjUxNi43OTloMTIuNDgzYy42MTggMCAxLjE5Mi0uMjczIDEuNTE2LS44LjIzNy0uMzM1LjI2NS0xLjM3LjA4LTEuNzN6IiBmaWxsPSIjQ0QyMDI2IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz4KICAgIDxwYXRoIGQ9Ik0xMS4wMjcgMTcuMjY0YTEuMzM3IDEuMzM3IDAgMTEwLTIuNjc1IDEuMzM3IDEuMzM3IDAgMDEwIDIuNjc1ek0xMS45IDEyLjk4YS44OTIuODkyIDAgMDEtMS43NDcgMEw5LjI3IDguNTJhLjg5Mi44OTIgMCAwMS44NzQtMS4wNjRoMS43NjhhLjg5Mi44OTIgMCAwMS44NzQgMS4wNjVsLS44ODYgNC40NTh6IiBmaWxsPSIjRkZGIi8+CiAgPC9nPgo8L3N2Zz4=");
 					display: flex;
 					height: 22px;
 					position: absolute;
@@ -437,6 +437,11 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 		const invalidIconStyles = {
 			[invalidIconSide]: `${invalidIconOffset}px`
 		};
+		const showInvalidIcon = !isValid && !this.hideInvalidIcon && !this._focused;
+		if (showInvalidIcon) {
+			const paddingProperty = invalidIconSide === 'left' ? 'paddingLeft' : 'paddingRight';
+			inputStyles[paddingProperty] = `${invalidIconOffset + 22 - (isFocusedOrHovered ? 1 : 0)}px`;
+		}
 
 		const unit = this.unit
 			? html`<span aria-hidden="true" class="d2l-input-unit" @click="${this._handleUnitClick}">${this.unit}</span>`
@@ -478,7 +483,7 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 						type="${this._getType()}">
 					<div class="d2l-input-inside-before" @keypress="${this._suppressEvent}">${this.dir === 'rtl' ? unit : ''}<slot name="${firstSlotName}" @slotchange="${this._handleSlotChange}"></slot></div>
 					<div class="d2l-input-inside-after" @keypress="${this._suppressEvent}">${this.dir !== 'rtl' ? unit : ''}<slot name="${lastSlotName}" @slotchange="${this._handleSlotChange}"></slot></div>
-					${ (!isValid && !this.hideInvalidIcon && !this._focused) ? html`<div class="d2l-input-text-invalid-icon" style="${styleMap(invalidIconStyles)}" @click="${this._handleInvalidIconClick}"></div>` : null}
+					${showInvalidIcon ? html`<div class="d2l-input-text-invalid-icon" style="${styleMap(invalidIconStyles)}" @click="${this._handleInvalidIconClick}"></div>` : null}
 				</div><div id="after-slot" class="d2l-skeletize" ?hidden="${!this._hasAfterContent}"><slot name="after" @slotchange="${this._handleAfterSlotChange}"></slot></div>
 			</div>
 			${this._renderInlineHelp(this._inlineHelpId)}

package/components/inputs/sass/label.scss

@@ -9,10 +9,6 @@
 	padding-block: 0 0.4rem;
 	padding-inline: 0;
 	width: 100%;
-	.d2l-typography.d2l-no-input-style-tweaks & {
-		line-height: 1rem;
-		padding-block-end: 7px;
-	}
 }
 
 @mixin d2l-input-label-required() {

package/components/tooltip/tooltip.js

@@ -1,19 +1,16 @@
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { cssEscape, elemIdListAdd, elemIdListRemove, getBoundingAncestor, getOffsetParent, isComposedAncestor } from '../../helpers/dom.js';
 import { getComposedActiveElement, isFocusable } from '../../helpers/focus.js';
 import { interactiveElements, interactiveRoles, isInteractive } from '../../helpers/interactive.js';
 import { announce } from '../../helpers/announce.js';
 import { bodySmallStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { getFlag } from '../../helpers/flags.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-const inputStyleTweaksEnabled = getFlag('input-style-tweaks', true);
-
 let logAccessibilityWarning = true;
 
 /* only one tooltip is to be shown at once - track the active tooltip so it can be hidden if necessary */
@@ -313,12 +310,12 @@ class Tooltip extends RtlMixin(LitElement) {
 				border-radius: ${contentBorderRadius}px;
 				box-sizing: border-box;
 				max-width: 17.5rem;
-				min-height: ${unsafeCSS(inputStyleTweaksEnabled ? '1.95rem' : '2.1rem')}; /* stylelint-disable-line */
+				min-height: 1.95rem;
 				min-width: 2.1rem;
 				outline: ${outlineSize}px solid var(--d2l-tooltip-outline-color);
 				overflow: hidden;
 				overflow-wrap: anywhere;
-				padding-block: ${(inputStyleTweaksEnabled ? 10 : 11) - contentBorderSize}px ${11 - contentBorderSize}px;
+				padding-block: ${10 - contentBorderSize}px ${11 - contentBorderSize}px;
 				padding-inline: ${contentHorizontalPadding - contentBorderSize}px;
 				position: absolute;
 			}

package/components/typography/styles.js

@@ -1,8 +1,5 @@
 import '../colors/colors.js';
 import { css, unsafeCSS } from 'lit';
-import { getFlag } from '../../helpers/flags.js';
-
-const inputStyleTweaksEnabled = getFlag('input-style-tweaks', true);
 
 export const _isValidCssSelector = (selector) => {
 	if (selector === ':host') return true;
@@ -115,7 +112,7 @@ export const _generateBodySmallStyles = (selector) => {
 			color: var(--d2l-color-tungsten);
 			font-size: 0.7rem;
 			font-weight: 400;
-			line-height: ${unsafeCSS(inputStyleTweaksEnabled ? '0.9rem' : '1rem')}; /* stylelint-disable-line */
+			line-height: 0.9rem;
 			margin: auto;
 		}
 		:host([skeleton]) ${selector}.d2l-skeletize::before {
@@ -132,7 +129,6 @@ export const _generateBodySmallStyles = (selector) => {
 			max-height: 5rem;
 		}
 		@media (max-width: 615px) {
-			${unsafeCSS(!inputStyleTweaksEnabled ? `${selector} { font-size: 0.6rem; line-height: 0.9rem; }` : '')}
 			:host([skeleton]) ${selector}.d2l-skeletize::before {
 				bottom: 0.25rem;
 				top: 0.2rem;
@@ -272,7 +268,7 @@ export const _generateLabelStyles = (selector) => {
 			font-size: 0.7rem;
 			font-weight: 700;
 			letter-spacing: 0.2px;
-			line-height: ${unsafeCSS(inputStyleTweaksEnabled ? '0.9rem' : '1rem')}; /* stylelint-disable-line */
+			line-height: 0.9rem;
 		}
 		:host([skeleton]) ${selector}.d2l-skeletize::before {
 			bottom: 0.25rem;

package/components/typography/typography.js

@@ -1,9 +1,7 @@
 import '../colors/colors.js';
 import { _generateBlockquoteStyles, fontFacesCss } from './styles.js';
-import { getFlag } from '../../helpers/flags.js';
 
 if (!document.head.querySelector('#d2l-typography-font-face')) {
-	const inputStyleTweaksEnabled = getFlag('input-style-tweaks', true);
 	const style = document.createElement('style');
 	style.id = 'd2l-typography-font-face';
 	style.textContent = `
@@ -45,13 +43,13 @@ if (!document.head.querySelector('#d2l-typography-font-face')) {
 			color: var(--d2l-color-tungsten);
 			font-size: 0.7rem;
 			font-weight: 400;
-			line-height: ${(inputStyleTweaksEnabled ? '0.9rem' : '1rem')};
+			line-height: 0.9rem;
 			margin: auto;
 		}
 
 		.d2l-typography .d2l-label-text {
 			font-size: 0.7rem;
-			line-height: ${(inputStyleTweaksEnabled ? '0.9rem' : '1rem')};
+			line-height: 0.9rem;
 			font-weight: 700;
 			letter-spacing: 0.2px;
 		}
@@ -117,11 +115,6 @@ if (!document.head.querySelector('#d2l-typography-font-face')) {
 				line-height: 1.2rem;
 			}
 
-			${!inputStyleTweaksEnabled ? `.d2l-typography .d2l-body-small {
-				font-size: 0.6rem;
-				line-height: 0.9rem;
-			}` : ''}
-
 			.d2l-typography .d2l-heading-1 {
 				font-size: 1.5rem;
 				line-height: 1.8rem;

package/components/typography/typography.scss

@@ -113,13 +113,6 @@
 	font-weight: 400;
 	line-height: 0.9rem;
 	margin: auto;
-	.d2l-typography.d2l-no-input-style-tweaks & {
-		line-height: 1rem;
-		@media (max-width: 615px) {
-			font-size: 0.6rem;
-			line-height: 0.9rem;
-		}
-	}
 }
 
 @mixin d2l-heading-1 {

package/package.json

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