Merge branch 'develop' into feature/large-text

CHANGELOG.md

@@ -2,13 +2,29 @@
 
 The following is a curated list of changes in the Enact sandstone module, newest changes on the top.
 
-## [unreleased]
+## [2.9.0-alpha.1] - 2024-04-09
 
 ### Added
 
+- `sandstone/PageViews` component
 - `sandstone/Scroller.ContentContainerDecorator` to allow component to be a scroll target when its descendant is focused
 - `sandstone/VideoPlayer` prop `setPlaybackSpeed` to support playback speed adjustment
 
+### Changed
+
+- Popup family components to enhance contrast in high-contrast mode for improved visibility
+
+### Fixed
+
+- `sandstone/VirtualList` to show the focused item properly when switching from pointer mode to 5-way mode
+- `sandstone/VirtualList.VirtualGridList` to show the focused item fully when focus moves via 5-way keys inside a list
+
+## [2.7.15] - 2024-03-05
+
+### Added
+
+- `sandstone/Scroller.ContentContainerDecorator` to allow component to be a scroll target when its descendant is focused
+
 ### Fixed
 
 - `sandstone/VirtualList` to show the focused item properly when switching from pointer mode to 5-way mode
@@ -28,6 +44,10 @@ The following is a curated list of changes in the Enact sandstone module, newest
 
 - `sandstone/WizardPanels` to read out the correct step when using `current` prop
 
+## [2.7.14] - 2024-01-23
+
+No significant changes.
+
 ## [2.7.13] - 2023-12-08
 
 ### Changed

ContextualPopupDecorator/ContextualPopup.js

@@ -36,7 +36,7 @@ const ContextualPopupArrow = kind({
 
 	render: (props) => (
 		<svg {...props} viewBox="0 0 30 30">
-			<path d="M15 2 L0 20 L30 20 Z" className={css.arrowFill} />
+			<path d="M0 20 L15 2 L30 20" className={css.arrowFill} />
 		</svg>
 	)
 });
@@ -152,7 +152,8 @@ const ContextualPopupBase = kind({
 				fixedSize: direction === 'above' || direction === 'below'
 			},
 			direction.split(' '),
-			offset
+			offset,
+			css.outline
 		)
 	},
 

ContextualPopupDecorator/ContextualPopup.module.less

@@ -82,9 +82,19 @@
 		}
 
 		.arrow {
+			stroke: @sand-overlay-outline-color;
+			stroke-width: @sand-overlay-outline-width;
+
 			.arrowFill {
 				fill: @sand-contextualpopup-bg-color;
 			}
 		}
+
+		.outline {
+			outline-color: @sand-overlay-outline-color;
+			outline-style: @sand-overlay-outline-style;
+			outline-width: @sand-overlay-outline-width;
+			outline-offset: -@sand-overlay-outline-width;
+		}
 	});
 }

FlexiblePopupPanels/FlexiblePopupPanels.js

@@ -128,6 +128,7 @@ const FlexiblePopupPanels = PopupDecorator(
 		className: 'flexiblePopupPanels',
 		css,
 		noAlertRole: true,
+		noOutline: true,
 		panelArranger: FadeAndSlideArranger,
 		panelType: 'flexiblePopup'
 	},

FlexiblePopupPanels/FlexiblePopupPanels.module.less

@@ -78,6 +78,10 @@
 		.content {
 			border-radius: @sand-flexiblepopuppanels-panel-border-radius;
 			box-shadow: @sand-flexiblepopuppanels-panel-shadow;
+			outline-color: @sand-overlay-outline-color;
+			outline-style: @sand-overlay-outline-style;
+			outline-width: @sand-overlay-outline-width;
+			outline-offset: -@sand-overlay-outline-width;
 		}
 
 		&.scrimTranslucent {

PageViews/Page.js

@@ -0,0 +1,57 @@
+import kind from '@enact/core/kind';
+import PropTypes from 'prop-types';
+
+import css from './Page.module.less';
+
+/**
+ * Page for {@link sandstone/PageViews.PageViews|PageViews}.
+ *
+ * @class Page
+ * @memberof sandstone/PageViews
+ * @ui
+ * @public
+ */
+
+const Page = kind({
+	name: 'Page',
+	propTypes: /** @lends sandstone/PageViews.Page.prototype */ {
+		/**
+		 * Contents of the page.
+		 *
+		 * @type {Node}
+		 * @public
+		 */
+		children: PropTypes.node,
+
+		/**
+		 * Customizes the component by mapping the supplied collection of CSS class names to the
+		 * corresponding internal elements and states of this component.
+		 *
+		 * The following classes are supported:
+		 *
+		 * * `page` - The root component class
+		 *
+		 * @type {Object}
+		 * @public
+		 */
+		css: PropTypes.object
+	},
+	styles: {
+		css: css,
+		className: 'page',
+		publicClassNames: true
+	},
+	render: ({children, ...rest}) => {
+		return (
+			<div {...rest}>
+				{children}
+			</div>
+		);
+
+	}
+});
+
+export default Page;
+export {
+	Page
+};

PageViews/Page.module.less

@@ -0,0 +1,3 @@
+.page {
+    height: 100%;
+}