@brightspace-ui/core 3.98.3 → 3.99.0

package/components/inputs/demo/input-time.html

@@ -40,6 +40,13 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Hidden Timezone</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-time label="Start Time" timezone-hidden></d2l-input-time>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>Custom Interval</h2>
 			<d2l-demo-snippet>
 				<template>

package/components/inputs/docs/input-date-time.md

@@ -137,6 +137,7 @@ Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and
 | `labelled-by` | String | HTML id of an element in the same shadow root which acts as the input's label |
 | `opened` | Boolean | Indicates if the dropdown is open |
 | `required` | Boolean | Indicates that a value is required |
+| `timezone-hidden` | Boolean | Hides the timezone inside the selection dropdown. Should only be used when the input uses a different timezone than the document's settings |
 | `time-interval` | String, default: `thirty` | Number of minutes between times shown in dropdown. Valid values include `five`, `ten`, `fifteen`, `twenty`, `thirty`, and `sixty`. |
 | `value` | String, default `''` | Value of the input. This should be in ISO 8601 time format (`hh:mm:ss`) and should be [localized to the user's timezone](#timezone) (if applicable). |
 
@@ -276,7 +277,7 @@ Note: All `*value` properties should be in ISO 8601 combined date and time forma
 
 ## Accessibility
 
-The date and time components generally follow the W3C's best practice recommendations for a [Date picker dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/). For details on the accessibility of the calendar within the date input components, see [Calendar Accessibility](../calendar#accessibility). 
+The date and time components generally follow the W3C's best practice recommendations for a [Date picker dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/). For details on the accessibility of the calendar within the date input components, see [Calendar Accessibility](../calendar#accessibility).
 
 A few notable accessibility-related features of these components are:
 

package/components/inputs/input-time.js

@@ -3,7 +3,7 @@ import '../dropdown/dropdown-menu.js';
 import '../menu/menu.js';
 import '../menu/menu-item-radio.js';
 
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { formatDateInISOTime, getDateFromISOTime, getToday } from '../../helpers/dateTime.js';
 import { formatTime, parseTime } from '@brightspace-ui/intl/lib/dateTime.js';
 import { bodySmallStyles } from '../typography/styles.js';
@@ -164,6 +164,11 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 			 * @type {'five'|'ten'|'fifteen'|'twenty'|'thirty'|'sixty'}
 			 */
 			timeInterval: { type: String, attribute: 'time-interval' },
+			/**
+			 * Hides the timezone inside the selection dropdown. Should only be used when the input uses a different timezone than the document's settings
+			 * @type {Boolean}
+			 */
+			timezoneHidden: { type: Boolean, attribute: 'timezone-hidden' },
 			/**
 			 * Value of the input
 			 * @type {string}
@@ -226,6 +231,7 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 		this.opened = false;
 		this.required = false;
 		this.timeInterval = 'thirty';
+		this.timezoneHidden = false;
 		this._dropdownFirstOpened = false;
 		this._dropdownId = getUniqueId();
 		this._hiddenContentWidth = '6rem';
@@ -371,7 +377,9 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 						root-view>
 						${menuItems}
 					</d2l-menu>
-					<div class="d2l-input-time-timezone d2l-body-small" id="${dropdownIdTimezone}" slot="footer">${this._timezone}</div>
+					${!this.timezoneHidden ? html`
+						<div class="d2l-input-time-timezone d2l-body-small" id="${dropdownIdTimezone}" slot="footer">${this._timezone}</div>
+					` : nothing}
 				</d2l-dropdown-menu>
 			</d2l-dropdown>
 			${this._renderInlineHelp(this._inlineHelpId)}

package/custom-elements.json

@@ -7724,6 +7724,12 @@
           "type": "'five'|'ten'|'fifteen'|'twenty'|'thirty'|'sixty'",
           "default": "\"thirty\""
         },
+        {
+          "name": "timezone-hidden",
+          "description": "Hides the timezone inside the selection dropdown. Should only be used when the input uses a different timezone than the document's settings",
+          "type": "Boolean",
+          "default": "false"
+        },
         {
           "name": "labelled-by",
           "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
@@ -7806,6 +7812,13 @@
           "type": "'five'|'ten'|'fifteen'|'twenty'|'thirty'|'sixty'",
           "default": "\"thirty\""
         },
+        {
+          "name": "timezoneHidden",
+          "attribute": "timezone-hidden",
+          "description": "Hides the timezone inside the selection dropdown. Should only be used when the input uses a different timezone than the document's settings",
+          "type": "Boolean",
+          "default": "false"
+        },
         {
           "name": "labelledBy",
           "attribute": "labelled-by",

package/package.json

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