fix(ui5-file-uploader): adjust high contrast themes styles (#11927)

- High contrast themes styles adjusted
- Missing style overrides from the ui5-input styles added
- Explicit icon imports added
- Documentation review comments applied
- Since tag added to the new APIs

Author: unazko

packages/main/src/FileUploader.ts

@@ -211,6 +211,7 @@ class FileUploader extends UI5Element implements IFormInputElement {
 	 * Defines whether the component is required.
 	 * @default false
 	 * @public
+	 * @since 2.13.0
 	 */
 	@property({ type: Boolean })
 	required = false;
@@ -219,6 +220,7 @@ class FileUploader extends UI5Element implements IFormInputElement {
 	 * Defines the accessible ARIA name of the component.
 	 * @default undefined
 	 * @public
+	 * @since 2.13.0
 	 */
 	@property()
 	accessibleName?: string;
@@ -227,6 +229,7 @@ class FileUploader extends UI5Element implements IFormInputElement {
 	 * Receives id(or many ids) of the elements that label the input.
 	 * @default undefined
 	 * @public
+	 * @since 2.13.0
 	 */
 	@property()
 	accessibleNameRef?: string;
@@ -242,7 +245,7 @@ class FileUploader extends UI5Element implements IFormInputElement {
 	 *
 	 * **Note:** For best accessibility experience, set a `tabindex` of "-1" on your interactive element, or it will be set automatically.
 	 * This slot is intended for use cases where you want a button-only file uploader.
-	 * It is recommended to set the `hideInput` property to "true" when using this slot.
+	 * It is recommended to set `hideInput` property to "true" when using this slot.
 	 * Not setting `hideInput` may negatively impact the screen reader users.
 	 * @public
 	 */

packages/main/src/FileUploaderTemplate.tsx

@@ -1,4 +1,6 @@
 import Icon from "./Icon.js";
+import valueHelp from "@ui5/webcomponents-icons/dist/value-help.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import Tokenizer from "./Tokenizer.js";
 import Token from "./Token.js";
 import type FileUploader from "./FileUploader.js";
@@ -64,7 +66,7 @@ export default function FileUploaderTemplate(this: FileUploader) {
 										))}
 									</Tokenizer>
 									<Icon
-										name="decline"
+										name={decline}
 										class="ui5-file-uploader-clear-icon inputIcon"
 										onClick={this._onClearIconClick}
 										title={this.clearIconTitle}
@@ -83,7 +85,7 @@ export default function FileUploaderTemplate(this: FileUploader) {
 							)}
 
 							<Icon
-								name="value-help"
+								name={valueHelp}
 								class="ui5-file-uploader-value-help-icon inputIcon"
 								title={this.valueHelpTitle}
 							/>

packages/main/src/themes/FileUploader.css

@@ -53,14 +53,15 @@
 	flex: 1;
 	display: flex;
 	position: relative;
+	box-sizing: border-box;
 }
 
 .ui5-file-uploader-tokenizer,
 .ui5-file-uploader-display-input {
 	position: absolute;
 	top: 0;
 	inset-inline-start: 0;
-	height: inherit;
+	height: 100%;
 	border: none;
 	outline: none;
 	cursor: pointer;
@@ -91,22 +92,28 @@
 /* Input styles overrides */
 :host(:not([readonly])),
 :host([readonly][disabled]),
+:host([focused]:not([opened])),
 :host([value-state="None"]:not([readonly]):hover),
+:host([value-state="Negative"][focused]:not([opened]):not([readonly])),
 :host([value-state="Negative"]:not([readonly]):not([disabled])),
 :host([value-state="Negative"]:not([readonly])[focused][opened]:hover),
 :host([value-state="Negative"]:not([readonly]):not([focused]):hover),
+:host([value-state="Critical"][focused]:not([opened]):not([readonly])),
 :host([value-state="Critical"]:not([readonly]):not([disabled])),
 :host([value-state="Critical"]:not([readonly])[focused][opened]:hover),
 :host([value-state="Critical"]:not([readonly]):not([focused]):hover),
+:host([value-state="Positive"][focused]:not([opened]):not([readonly])),
 :host([value-state="Positive"]:not([readonly]):not([disabled])),
 :host([value-state="Positive"]:not([readonly])[focused][opened]:hover),
 :host([value-state="Positive"]:not([readonly]):not([focused]):hover),
+:host([value-state="Information"][focused]:not([opened]):not([readonly])),
 :host([value-state="Information"]:not([readonly]):not([disabled])),
 :host([value-state="Information"]:not([readonly])[focused][opened]:hover),
 :host([value-state="Information"]:not([readonly]):not([focused]):hover),
 :host(:not([value-state]):not([readonly]):hover) {
 	box-shadow: none;
 	background: none;
+	border: none;
 }
 
 :host(:not([readonly])) .ui5-file-uploader-display-elements,
@@ -115,6 +122,7 @@
 	border: var(--_ui5-input-border);
 	border-radius: var(--_ui5_input_border_radius);
 	background: var(--sapField_BackgroundStyle);
+	background-color: var(--_ui5_input_background_color);
 }
 
 /* Value state styles */
@@ -132,6 +140,7 @@
 :host(:not([value-state]):not([readonly]):hover) .ui5-file-uploader-display-elements {
 	box-shadow: var(--sapField_Hover_Shadow);
 	background: var(--sapField_Hover_BackgroundStyle);
+	background-color: var(--sapField_Hover_Background);
 }
 
 :host([value-state="Negative"]:not([readonly]):not([focused]):hover) .ui5-file-uploader-display-elements,

packages/main/src/themes/base/FileUploader-parameters.css

@@ -1,6 +1,4 @@
 :root {
-	--_ui5_file_uploader_hover_border: 1px solid var(--sapField_Hover_BorderColor);
-	--_ui5_file_uploader_value_state_error_hover_background_color: var(--sapField_Hover_Background);
 	--_ui5_file_uploader_display_input_width: calc(100% - var(--_ui5_input_icon_width));
 	--_ui5_file_uploader_tokenizer_width: calc(100% - 2 * var(--_ui5_input_icon_width) - var(--_ui5_input_inner_space_to_tokenizer));
 }

packages/main/src/themes/sap_horizon/FileUploader-parameters.css

@@ -1,5 +1 @@
 @import "../base/FileUploader-parameters.css";
-
-:root {
-	--_ui5_file_uploader_hover_border: none;
-}

packages/main/src/themes/sap_horizon_dark/FileUploader-parameters.css

@@ -1,5 +1 @@
 @import "../base/FileUploader-parameters.css";
-
-:root {
-	--_ui5_file_uploader_hover_border: none;
-}

packages/main/src/themes/sap_horizon_hcb/FileUploader-parameters.css

@@ -1,6 +1 @@
-@import "../base/FileUploader-parameters.css";
-
-:root {
-	--_ui5_file_uploader_hover_border: 2px solid var(--sapField_Hover_BorderColor);
-	--_ui5_file_uploader_value_state_error_hover_background_color: var(--sapField_InvalidBackground);
-}
+@import "../base/FileUploader-parameters.css";

packages/main/src/themes/sap_horizon_hcw/FileUploader-parameters.css

@@ -1,6 +1 @@
-@import "../base/FileUploader-parameters.css";
-
-:root {
-	--_ui5_file_uploader_hover_border: 2px solid var(--sapField_Hover_BorderColor);
-	--_ui5_file_uploader_value_state_error_hover_background_color: var(--sapField_InvalidBackground);
-}
+@import "../base/FileUploader-parameters.css";

packages/main/test/pages/FileUploader.html

@@ -13,7 +13,7 @@
 		// delete Document.prototype.adoptedStyleSheets
 	</script>
 </head>
-<body>
+<body class="fileuploader1auto">
 
 	<div>
 		<div>

packages/main/test/pages/styles/FileUploader.css

@@ -3,6 +3,5 @@ body > div {
 }
 
 .fileuploader1auto {
-    border: 1px solid black;
-    padding: 1rem;
+    background-color: var(--sapBackgroundColor);
 }