Merge tag 'v2.27.2' into release/opensource

Author: Dottenpixel

RELEASENOTES.general.md

@@ -1,6 +1,7 @@
 <!-- Release notes authoring guidelines: http://keepachangelog.com/ -->
 <!-- On release, add general notes here. In time the legacy release notes will be add to this -->
 
+## 2.27.2 - June 25, 2025
 
 ## 2.27.1 - May 7, 2025
 

RELEASENOTES.md

@@ -1,6 +1,8 @@
 <!-- Release notes authoring guidelines: http://keepachangelog.com/ -->
 <!-- !!! THIS FILE IS AUTO-GENERATED !!! DO NOT EDIT THIS FILE MANUALLY !!! -->
 
+## Release 2.27.2 - June 25, 2025
+
 ## Release 2.27.1 - May 7, 2025
 
 ## Component Blueprints
@@ -182,10 +184,18 @@
 ## Release 2.26.2 - February 6, 2025
 
 ## Component Blueprints
+### [Combobox](https://www.lightningdesignsystem.com/components/combobox)
+#### Removed
+- In February 2025, we removed the `slds-truncate` class to address an issue with obscured text. The label text of list items can now wrap in combobox components.
+
 ### [Form Element](https://www.lightningdesignsystem.com/components/form-element)
 #### Fixed
 - Move clear fix from 2.26.1 to target specific selectors, use clearfix mixin to avoid more edge cases (e.g. background colors)
 
+### [Menus](https://www.lightningdesignsystem.com/components/menus)
+#### Removed
+- In February 2025, we removed the `slds-truncate` class to address an issue with obscured text. The label text of list items can now wrap in combobox components.
+
 ## Release 2.26.1 - January 30, 2025
 
 ## Updated

package-lock.json

@@ -8,7 +8,7 @@
     "CSS"
   ],
   "homepage": "https://lightningdesignsystem.com",
-  "version": "2.27.1",
+  "version": "2.27.2",
   "author": "Salesforce",
   "bugs": {
     "url": "https://github.com/salesforce-ux/design-system/issues"

package.json

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CodeView from './CodeView';
+
+const RequiredLabelExample = () => (
+  <CodeView exampleOnly demoStyles="2rem">
+    <label class="slds-form-element__label" for="">
+      <abbr class="slds-required" title="required" aria-hidden="true">* </abbr>denotes a required field
+    </label>
+  </CodeView>
+);
+
+RequiredLabelExample.propTypes = {
+  children: PropTypes.string,
+  title: PropTypes.string
+};
+
+export default RequiredLabelExample;

shared/components/RequiredLabelExample.jsx

@@ -9,7 +9,7 @@
 ///
 /// @type String
 /// @access private
-$app-version: "2.27.1";
+$app-version: "2.27.2";
 
 /// Debug mode (uncomment to activate)
 /// Turn on to output deprecation warnings during development

ui/_config.scss

@@ -2,6 +2,7 @@ import CodeView from '../../../shared/components/CodeView';
 import CodeBlock from '../../../shared/components/CodeBlock';
 import Blockquote from '../../../shared/components/Blockquote';
 import StylingHooksTable from '../../../shared/components/StylingHooksTable';
+import RequiredLabelExample from '../../../shared/components/RequiredLabelExample';
 import * as CheckboxExamples from './base/example';
 import * as CheckboxFormElementExamples from './form-element/example';
 import { getDisplayElementById } from '../../shared/helpers';
@@ -28,6 +29,9 @@ When a single checkbox is required, `<div class="slds-checkbox">` should get `<a
 
 When a checkbox group is required, the `<fieldset>` should receive the class `.slds-is-required`. The `<legend>` should then get `<abbr class="required" title="required" aria-hidden="true">*</abbr>` added to the DOM for visual indication that the checkbox group is required.
 
+Example:
+<RequiredLabelExample/>
+
 As SLDS checkboxes rely on the `:checked` pseudo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input.
 
 ### Mobile

ui/components/checkbox/docs.mdx

@@ -9,6 +9,12 @@
 
 - Fixed lookup variant focus style
 
+## 2.26.2
+
+### Removed
+
+- In February 2025, we removed the `slds-truncate` class to address an issue with obscured text. The label text of list items can now wrap in combobox components.
+
 ## 2.25.0
 
 ### Fixed
@@ -28,7 +34,7 @@
 - Updated Combobox disabled color
 
 ## 2.22.0
-### Added 
+### Added
 - Tooltip option provided for Date/DateTime pickers.
 - Updated from tabindex to tabIndex.
 ## 2.21.0

ui/components/combobox/RELEASENOTES.md

@@ -2,6 +2,7 @@ import CodeView from '../../../shared/components/CodeView';
 import DisplayColumn from '../../../shared/components/DisplayColumn';
 import DisplayGrid from '../../../shared/components/DisplayGrid';
 import Blockquote from '../../../shared/components/Blockquote';
+import RequiredLabelExample from '../../../shared/components/RequiredLabelExample';
 import { getDisplayElementById, getDemoStylesById } from '../../shared/helpers';
 import * as Base from './base/example';
 import * as Range from './range/example';
@@ -45,11 +46,16 @@ The datepicker has the following markup requirements:
 
 ### Accessibility
 
+To display the datepicker text input field and calendar date picker with maximum accessibility, datepicker should be empty to start. When a user begins typing, text input is activated, and the full date format for the user’s locale, such as text DD MM YYYY in the en_US_locale.
+
 #### Markup
 
 **Dialog:**
 
   - Should act as a focus trap so the user only cycles through the datepicker `dialog` when the datepicker is open
+  - A Date Format Visible variation displays a message about the expected date format. When the date field receives focus, a message appears under the field to show the expected date format. When focus is removed from the date field, the message is hidden and available as assistive text.
+  - All datepicker fields marked as required with an * must have an accompanying legend. Example:
+    <RequiredLabelExample/>
 
 **Grid:**
 

ui/components/datepickers/docs.mdx

@@ -1,5 +1,6 @@
 import CodeView from '../../../shared/components/CodeView';
 import Blockquote from '../../../shared/components/Blockquote';
+import RequiredLabelExample from '../../../shared/components/RequiredLabelExample';
 import * as DateTimeExamples from './base/example';
 import { getDisplayElementById } from '../../shared/helpers';
 
@@ -43,6 +44,18 @@ The datetime picker has the following markup requirements:
   - On the element with the class `slds-combobox`, please remove `role="combobox"`, `aria-expanded`, and `aria-haspopup`.
   - On the `input` that we just added `type="datetime-local"` to, please remove `aria-controls`, `aria-autocomplete`, and `role="textbox"`.
 
+### Accessibility
+
+To display the datetime picker with maximum accessibility, the datetime field should be empty to start. When a user clicks, text input is activated, and the full date or time selector displays.
+
+#### Markup
+
+**Dialog:**
+
+  - A Date Format Visible variation displays a message about the expected date format. When the date field receives focus, a message appears under the field to show the expected date format. When focus is removed from the date field, the message is hidden and available as assistive text.
+  - All datepicker fields marked as required with an * must have an accompanying legend. Example:
+    <RequiredLabelExample/>
+
 ## Base
 
 <CodeView demoStyles="height: 28rem;">