fix(ui5-shellbar): add missing icon dependency (#9618)

An icon used by the shellbar template was not imported as dependecy. Additionally the FCL's sample was also using some icons that were not imported in the JS file. Closes: #9580, #9534
SAP · Aug 2, 2024 · 4ee7d40 · 4ee7d40
1 parent c208132
commit 4ee7d40
Show file tree

Hide file tree

Showing 21 changed files with 743 additions and 0 deletions.
diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
@@ -27,6 +27,7 @@ import "@ui5/webcomponents-icons/dist/search.js";
 import "@ui5/webcomponents-icons/dist/bell.js";
 import "@ui5/webcomponents-icons/dist/overflow.js";
 import "@ui5/webcomponents-icons/dist/grid.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import type { Timeout, ClassMap } from "@ui5/webcomponents-base/dist/types.js";
 import type ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
 import type ShellBarItem from "./ShellBarItem.js";

diff --git a/packages/website/docs/_samples/fiori/FlexibleColumnLayout/Basic/main.js b/packages/website/docs/_samples/fiori/FlexibleColumnLayout/Basic/main.js
@@ -24,6 +24,8 @@ import "@ui5/webcomponents-icons/dist/ipad.js";
 import "@ui5/webcomponents-icons/dist/menu2.js";
 import "@ui5/webcomponents-icons/dist/menu.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import "@ui5/webcomponents-icons/dist/full-screen.js";
+import "@ui5/webcomponents-icons/dist/add.js";
 
 let midFullScreen = false;
 let endFullScreen = false;

diff --git a/packages/website/docs/components/ai/Button/Button.mdx b/packages/website/docs/components/ai/Button/Button.mdx
@@ -0,0 +1,81 @@
+---
+slug: ../Button
+sidebar_class_name: newComponentBadge expComponentBadge
+ui5_tag_name: ui5-ai-button
+ui5_since: 2.0.0
+---
+
+import ButtonMenu from "../../../_samples/ai/Button/ButtonMenu/ButtonMenu.md";
+import IconOnlyButton from "../../../_samples/ai/Button/IconOnlyButton/IconOnlyButton.md";
+
+:::info
+The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change.
+:::
+
+
+
+The `ui5-ai-button` component represents a button used in AI-related scenarios.
+It enables users to trigger actions by clicking or tapping the `ui5-ai-button`, or by pressing
+certain keyboard keys, such as Enter.
+
+### Usage
+
+For the `ui5-ai-button` UI, you can define one or more states of the button by placing `ai-button-state` components in its default slot.
+Each state have a name that identifies it and can have text, icon and end icon defined (in any combination) depending on the state purpose.
+
+You can choose from a set of predefined designs (the same as for regular `ui5-button` component) that allow different styling to correspond to the triggered action.
+
+`ui5-ai-button` can be activated by clicking or tapping it. The state can be changed in `click` event handler.
+
+### ES6 Module Import
+
+`import "@ui5/webcomponents-ai/dist/Button.js";`
+
+## AI Button with Menu in one of the states
+<ButtonMenu />
+
+## Properties
+### design
+|             |   |
+|-------------|---|
+| Description | Defines the component design. |
+| Type        | `"Default" \| "Positive" \| "Negative" \| "Transparent" \| "Emphasized" \| "Attention" \| undefined`               |
+| Default     | "Default"                         |
+### disabled
+|             |   |
+|-------------|---|
+| Description | Defines whether the component is disabled. A disabled component can't be pressed or focused, and it is not in the tab chain. |
+| Type        | `boolean`               |
+| Default     | false                         |
+### state
+|             |   |
+|-------------|---|
+| Description | Defines the current state of the component. |
+| Type        | `string \| undefined`               |
+| Default     | undefined                         |
+
+## Slots
+### default
+|             |   |
+|-------------|---|
+| Description | Defines the available states of the component. **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use `ui5-ai-button-state` components in order to preserve the intended design. |
+| Type        | `Array<ButtonState>` |
+
+## Events
+### click
+|             |   |
+|-------------|---|
+| Description | Fired when the component is activated either with a mouse/tap or by using the Enter or Space key. |
+| Type | `CustomEvent` |
+
+## Methods
+No methods available for this component.
+
+## CSS Parts
+No CSS parts available for this component.
+
+## More Samples
+
+### Icon-only AI Button with Menu in one of the states
+
+<IconOnlyButton />
diff --git a/packages/website/docs/components/ai/Button/ButtonState.mdx b/packages/website/docs/components/ai/Button/ButtonState.mdx
@@ -0,0 +1,61 @@
+---
+slug: ../ButtonState
+sidebar_class_name: newComponentBadge expComponentBadge
+ui5_tag_name: ui5-ai-button-state
+ui5_since: 2.0.0
+---
+
+:::info
+The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change.
+:::
+
+
+
+`ui5-ai-button-state` is the item to use for defining states of `ui5-ai-button` components.
+
+### Usage
+
+`ui5-si-button-state` is an abstract element, representing a state of `ui5-ai-button`. It is meant to be used in the `states` slot
+of `ui5-ai-button` and should be used as standalone component.
+
+### ES6 Module Import
+
+`import "@ui5/webcomponents/dist/AiButtonState.js";`
+
+## Properties
+### name
+|             |   |
+|-------------|---|
+| Description | Defines the name of the button state. |
+| Type        | `string \| undefined`               |
+| Default     | undefined                         |
+### text
+|             |   |
+|-------------|---|
+| Description | Defines the text of the button in this state. |
+| Type        | `string \| undefined`               |
+| Default     | undefined                         |
+### icon
+|             |   |
+|-------------|---|
+| Description | Defines the icon to be displayed as graphical element within the component before the text. The SAP-icons font provides numerous options.<br />**Example:**<br />See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html). |
+| Type        | `string \| undefined`               |
+| Default     | undefined                         |
+### endIcon
+|             |   |
+|-------------|---|
+| Description | Defines the icon to be displayed as graphical element within the component after the text. The SAP-icons font provides numerous options.<br />**Example:**<br />See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html). |
+| Type        | `string \| undefined`               |
+| Default     | undefined                         |
+
+## Slots
+No slots available for this component.
+
+## Events
+No events available for this component.
+
+## Methods
+No methods available for this component.
+
+## CSS Parts
+No CSS parts available for this component.
diff --git a/packages/website/docs/components/ai/Button/_category_.json b/packages/website/docs/components/ai/Button/_category_.json
@@ -0,0 +1,4 @@
+{
+    "label": "Button",
+    "link": null
+}
diff --git a/packages/website/docs/components/ai/PromptInput.mdx b/packages/website/docs/components/ai/PromptInput.mdx
@@ -0,0 +1,133 @@
+---
+sidebar_class_name: newComponentBadge expComponentBadge
+ui5_tag_name: ui5-ai-prompt-input
+---
+
+import Basic from "../../_samples/ai/PromptInput/Basic/Basic.md";
+
+:::info
+The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.
+:::
+
+
+
+The `ui5-ai-prompt-input` component allows the user to write custom instructions in natural language, so that AI is guided to generate content tailored to user needs.
+
+**Note:** The web component is in an experimental state
+
+### ES6 Module Import
+
+`import "@ui5/webcomponents-ai/dist/PromptInput.js
+
+## Basic Sample
+<Basic />
+
+## Properties
+### value
+|             |   |
+|-------------|---|
+| Description | Defines the value of the component. |
+| Type        | `string`               |
+| Default     | ""                         |
+| Since | 2.0.0 |
+### placeholder
+|             |   |
+|-------------|---|
+| Description | Defines a short hint intended to aid the user with data entry when the component has no value. |
+| Type        | `string \| undefined`               |
+| Default     | undefined                         |
+| Since | 2.0.0 |
+### label
+|             |   |
+|-------------|---|
+| Description | Defines the label of the input field. |
+| Type        | `string \| undefined`               |
+| Default     | undefined                         |
+| Since | 2.0.0 |
+### showClearIcon
+|             |   |
+|-------------|---|
+| Description | Defines whether the clear icon of the input will be shown. |
+| Type        | `boolean`               |
+| Default     | false                         |
+| Since | 2.0.0 |
+### showExceededText
+|             |   |
+|-------------|---|
+| Description | Determines whether the characters exceeding the maximum allowed character count are visible in the component.<br />If set to `false`, the user is not allowed to enter more characters than what is set in the `maxlength` property. If set to `true` the characters exceeding the `maxlength` value are selected on paste and the counter below the component displays their number. |
+| Type        | `boolean`               |
+| Default     | false                         |
+| Since | 2.0.0 |
+### disabled
+|             |   |
+|-------------|---|
+| Description | Defines whether the component is in disabled state.<br />**Note:** A disabled component is completely noninteractive. |
+| Type        | `boolean`               |
+| Default     | false                         |
+| Since | 2.0.0 |
+### readonly
+|             |   |
+|-------------|---|
+| Description | Defines whether the component is read-only.<br />**Note:** A read-only component is not editable, but still provides visual feedback upon user interaction. |
+| Type        | `boolean`               |
+| Default     | false                         |
+| Since | 2.0.0 |
+### maxlength
+|             |   |
+|-------------|---|
+| Description | Sets the maximum number of characters available in the input field. |
+| Type        | `number \| undefined`               |
+| Default     | undefined                         |
+| Since | 2.0.0 |
+### valueState
+|             |   |
+|-------------|---|
+| Description | Defines the value state of the component. |
+| Type        | `"None" \| "Positive" \| "Critical" \| "Negative" \| "Information"`               |
+| Default     | "None"                         |
+| Since | 2.0.0 |
+### showSuggestions
+|             |   |
+|-------------|---|
+| Description | Defines whether the component should show suggestions, if such are present.<br />**Note:** You need to import the `InputSuggestions` module from `"@ui5/webcomponents/dist/features/InputSuggestions.js"` to enable this functionality. |
+| Type        | `boolean`               |
+| Default     | false                         |
+
+## Slots
+### default
+|             |   |
+|-------------|---|
+| Description | Defines the suggestion items.<br />**Note:** The suggestions would be displayed only if the `showSuggestions` property is set to `true`.<br />**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.<br />**Note:** Importing the Input Suggestions Support feature:<br />`import "@ui5/webcomponents/dist/features/InputSuggestions.js";`<br />automatically imports the `<ui5-suggestion-item>` and `<ui5-suggestion-item-group>` for your convenience. |
+| Type        | `Array<IInputSuggestionItem>` |
+### valueStateMessage
+|             |   |
+|-------------|---|
+| Description | Defines the value state message that will be displayed as pop up under the component. The value state message slot should contain only one root element.<br />**Note:** If not specified, a default text (in the respective language) will be displayed.<br />**Note:** The `valueStateMessage` would be displayed, when the component is in `Information`, `Critical` or `Negative` value state. |
+| Type        | `Array<HTMLElement>` |
+| Since | 2.0.0 |
+
+## Events
+### submit
+|             |   |
+|-------------|---|
+| Description | Fired when the input operation has finished by pressing Enter or AI button is clicked. |
+| Type | `CustomEvent` |
+| Since | 2.0.0 |
+### input
+|             |   |
+|-------------|---|
+| Description | Fired when the value of the component changes at each keystroke, and when a suggestion item has been selected. |
+| Type | `CustomEvent` |
+| Since | 2.0.0 |
+### change
+|             |   |
+|-------------|---|
+| Description | Fired when the input operation has finished by pressing Enter or on focusout. |
+| Type | `CustomEvent` |
+| Since | 2.0.0 |
+
+## Methods
+No methods available for this component.
+
+## CSS Parts
+No CSS parts available for this component.
diff --git a/packages/website/docs/components/ai/enums/README.mdx b/packages/website/docs/components/ai/enums/README.mdx
@@ -0,0 +1,7 @@
+---
+title: Enums
+---
+
+import DocCardList from '@theme/DocCardList';
+
+<DocCardList />
diff --git a/packages/website/docs/components/ai/interfaces/README.mdx b/packages/website/docs/components/ai/interfaces/README.mdx
@@ -0,0 +1,7 @@
+---
+title: Interfaces
+---
+
+import DocCardList from '@theme/DocCardList';
+
+<DocCardList />