@brightspace-ui/core 3.116.2 → 3.116.3

package/components/list/list-item-drag-image.js

@@ -84,7 +84,7 @@ class ListItemDragImage extends LocalizeCoreElement(SkeletonMixin(RtlMixin(LitEl
 				color: white;
 				left: 26px;
 				min-width: 1.4rem;
-				padding: 0.2rem 0.4rem;
+				padding: 0.25rem 0.4rem;
 				position: absolute;
 				text-align: center;
 				top: 30px;

package/components/tooltip/tooltip.js

@@ -1,16 +1,19 @@
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, unsafeCSS } 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 */
@@ -310,12 +313,13 @@ class Tooltip extends RtlMixin(LitElement) {
 				border-radius: ${contentBorderRadius}px;
 				box-sizing: border-box;
 				max-width: 17.5rem;
-				min-height: 2.1rem;
+				min-height: ${unsafeCSS(inputStyleTweaksEnabled ? '1.95rem' : '2.1rem')}; /* stylelint-disable-line */
 				min-width: 2.1rem;
 				outline: ${outlineSize}px solid var(--d2l-tooltip-outline-color);
 				overflow: hidden;
 				overflow-wrap: anywhere;
-				padding: ${11 - contentBorderSize}px ${contentHorizontalPadding - contentBorderSize}px;
+				padding-block: ${(inputStyleTweaksEnabled ? 10 : 11) - contentBorderSize}px ${11 - contentBorderSize}px;
+				padding-inline: ${contentHorizontalPadding - contentBorderSize}px;
 				position: absolute;
 			}
 

package/components/typography/styles.js

@@ -1,5 +1,8 @@
 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;
@@ -112,7 +115,7 @@ export const _generateBodySmallStyles = (selector) => {
 			color: var(--d2l-color-tungsten);
 			font-size: 0.7rem;
 			font-weight: 400;
-			line-height: 1rem;
+			line-height: ${unsafeCSS(inputStyleTweaksEnabled ? '0.9rem' : '1rem')}; /* stylelint-disable-line */
 			margin: auto;
 		}
 		:host([skeleton]) ${selector}.d2l-skeletize::before {
@@ -129,10 +132,7 @@ export const _generateBodySmallStyles = (selector) => {
 			max-height: 5rem;
 		}
 		@media (max-width: 615px) {
-			${selector} {
-				font-size: 0.6rem;
-				line-height: 0.9rem;
-			}
+			${unsafeCSS(!inputStyleTweaksEnabled ? `${selector} { font-size: 0.6rem; line-height: 0.9rem; }` : '')}
 			:host([skeleton]) ${selector}.d2l-skeletize::before {
 				bottom: 0.25rem;
 				top: 0.2rem;

package/components/typography/typography.js

@@ -1,7 +1,9 @@
 import '../colors/colors.js';
 import { 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 = `
@@ -43,7 +45,7 @@ if (!document.head.querySelector('#d2l-typography-font-face')) {
 			color: var(--d2l-color-tungsten);
 			font-size: 0.7rem;
 			font-weight: 400;
-			line-height: 1rem;
+			line-height: ${(inputStyleTweaksEnabled ? '0.9rem' : '1rem')};
 			margin: auto;
 		}
 
@@ -147,10 +149,10 @@ if (!document.head.querySelector('#d2l-typography-font-face')) {
 				line-height: 1.2rem;
 			}
 
-			.d2l-typography .d2l-body-small {
+			${!inputStyleTweaksEnabled ? `.d2l-typography .d2l-body-small {
 				font-size: 0.6rem;
 				line-height: 0.9rem;
-			}
+			}` : ''}
 
 			.d2l-typography .d2l-heading-1 {
 				font-size: 1.5rem;

package/components/typography/typography.scss

@@ -111,11 +111,14 @@
 	color: colors.$d2l-color-tungsten;
 	font-size: 0.7rem;
 	font-weight: 400;
-	line-height: 1rem;
+	line-height: 0.9rem;
 	margin: auto;
-	@media (max-width: 615px) {
-		font-size: 0.6rem;
-		line-height: 0.9rem;
+	.d2l-typography.d2l-no-input-style-tweaks & {
+		line-height: 1rem;
+		@media (max-width: 615px) {
+			font-size: 0.6rem;
+			line-height: 0.9rem;
+		}
 	}
 }
 

package/package.json

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