diff --git a/packages/documentation/docs/controls/_toast_styleguide.md b/packages/documentation/docs/controls/_toast_styleguide.md index 0a90e78f488..9689e781c7e 100644 --- a/packages/documentation/docs/controls/_toast_styleguide.md +++ b/packages/documentation/docs/controls/_toast_styleguide.md @@ -41,11 +41,11 @@ Toasts are small pop-ups that provide simple feedback on a process. They are UI - Do use toasts to instantly inform a user about the outcome of an action - Do include shortcuts to undo an action immediately after it's taken - Do stick with a consistent position for toasts within the same app and avoid interchanging their positions -- Don’t use toasts for high-priority or critical alerts that prevent the user from continuing their work (use a [modal](modal.md) or a [message bar](message-bar.mdx) instead) +- Don’t use toasts for high-priority or critical alerts that prevent the user from continuing their work (use a [modal](modal.md) or a [message bar](messagebar.md) instead) - Don’t edit or reuse icons or icon colors from the four predefined toast types when creating custom toasts ### Related patterns - [Modal](modal.md) -- [Message bar](message-bar.mdx) +- [Message bar](messagebar.md) - [Drawer](drawer.md) diff --git a/packages/documentation/docs/controls/application-frame/_popover-news_styleguide.md b/packages/documentation/docs/controls/application-frame/_popover-news_styleguide.md index 61cbcf9220d..35eadd4a44c 100644 --- a/packages/documentation/docs/controls/application-frame/_popover-news_styleguide.md +++ b/packages/documentation/docs/controls/application-frame/_popover-news_styleguide.md @@ -23,11 +23,11 @@ Unlike a modal, popover news does not prevent users from navigating and interact ### Dos and Don’ts - Do use popover news for "nice to know" information -- Don‘t use popover news for essential information a user must read, instead use a [modal](../modal.md) or a [message bar](../message-bar.mdx) +- Don‘t use popover news for essential information a user must read, instead use a [modal](../modal.md) or a [message bar](../messagebar.md) - Don‘t use popover news for system feedback or messages, instead use a [modal](../modal.md) or a [toast message](../toast.md) ### Related patterns - [Toast message](../toast.md) - [Modal](../modal.md) -- [Message bar](../message-bar.mdx) +- [Message bar](../messagebar.md) diff --git a/packages/documentation/docs/controls/message-bar.mdx b/packages/documentation/docs/controls/message-bar.mdx deleted file mode 100644 index f6a0f91a958..00000000000 --- a/packages/documentation/docs/controls/message-bar.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -slug: /controls/messagebar ---- - -import DocsCode from './_message_bar_code.mdx'; - -# Message bar - - diff --git a/packages/documentation/docs/controls/_message_bar_code.mdx b/packages/documentation/docs/controls/messagebar.md similarity index 74% rename from packages/documentation/docs/controls/_message_bar_code.mdx rename to packages/documentation/docs/controls/messagebar.md index 60868d5cc9e..b921fccaf4f 100644 --- a/packages/documentation/docs/controls/_message_bar_code.mdx +++ b/packages/documentation/docs/controls/messagebar.md @@ -1,29 +1,27 @@ +import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs'; import Props from './../auto-generated/ix-message-bar/props.md'; import Events from './../auto-generated/ix-message-bar/events.md'; import Playground from '@site/src/components/PlaygroundV3'; -## Development +# Message bar -### Examples +## Basic -#### Basic The message bar Web Component only provides the visual appearance of the message bar. To fully utilize the message bar, you need to implement a mechanism to remove it from the DOM when it is no longer needed. This typically involves handling the close event and updating the state of your application to reflect the removal of the message bar. - +name="message-bar" +height="14rem" +> -#### Dismissible +## Dismissible - +name="message-bar-removal" +height="14rem" +> ## API diff --git a/packages/documentation/docs/migration/uxt.md b/packages/documentation/docs/migration/uxt.md index 882031bbfd6..861a8cdbea3 100644 --- a/packages/documentation/docs/migration/uxt.md +++ b/packages/documentation/docs/migration/uxt.md @@ -76,7 +76,7 @@ If you're facing any other problems, please raise an issue in GitHub [raising an As some of the components are named differently in Industrial Experience, please consult this list of the most important component name differences to help make your migration easier: | **User Experience Toolkit** | **Industrial Experience** | -| ------------------------------------------------ |--------------------------------------------------------------------------------------------------------| +| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------ | | App bar | [Nav menu](../controls/application-frame/application-menu.md) | | Badge | [Pill](../controls/pill.md), [chip](../controls/chip.md) | | Busy indicator | [Spinner](../controls/spinner.md) | @@ -88,7 +88,7 @@ As some of the components are named differently in Industrial Experience, please | List | [Event list](../controls/event-list.md) | | Stepper | [Workflow](../controls/workflow.md) | | Menu | [Dropdown button](../controls/buttons/dropdown-button.md) | -| Message | [Message bar](../controls/message-bar.mdx) | +| Message | [Message bar](../controls/messagebar.md) | | Notification | [Toast](../controls/toast.md) | | Pager | [Pagination](../controls/pagination.md) | | Popover | [Tooltip](../controls/tooltip.md), [dropdown](../controls/dropdown.md) |