diff --git a/.github/configs/draft-release.yml b/.github/configs/draft-release.yml
index b28f93a..7f704b9 100644
--- a/.github/configs/draft-release.yml
+++ b/.github/configs/draft-release.yml
@@ -32,7 +32,7 @@ version-resolver:
- 'refactor'
default: patch
template: |
- ## Changes within UI Kit
+ ## Changes within UI Library
$CHANGES
diff --git a/.github/workflows/draft-next-release.yml b/.github/workflows/draft-next-release.yml
index 22c8366..bce0ae2 100644
--- a/.github/workflows/draft-next-release.yml
+++ b/.github/workflows/draft-next-release.yml
@@ -13,7 +13,7 @@ on:
jobs:
draft_release:
- name: 'Draft UI Kit release'
+ name: 'Draft UI Library release'
permissions:
contents: write
pull-requests: write
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 5d4a6ca..ed8d8aa 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -1,4 +1,4 @@
-name: Publish UI Kit to GitHub Packages
+name: Publish UI Library to GitHub Packages
on:
release:
diff --git a/README.md b/README.md
index a3eeff3..fe0cae1 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# UI Kit
+# UI Library
-The HiveMQ UI Kit provides components on top of Chakra UI for various applications.
+The HiveMQ UI Library provides components on top of Chakra UI for various applications.
## Development
diff --git a/src/docs/Demo.mdx b/src/docs/Demo.mdx
index a0b80b0..3a244f6 100644
--- a/src/docs/Demo.mdx
+++ b/src/docs/Demo.mdx
@@ -6,15 +6,15 @@ import SimpleImplementation from './cookbook/SimpleImplementation?raw';
-# HiveMQ UI Kit 🐚
+# HiveMQ UI Library 🐚
-The HiveMQ UI Kit is a template that frames the content of a page.
+The HiveMQ UI Library is a template that frames the content of a page.
It provides the most basic elements required to build a HiveMQ Application,
such as the header, sidebar navigation, and overlays.
## Installation
-The HiveMQ UI Kit is available as an npm package in the GitHub Package Registry.
+The HiveMQ UI Library is available as an npm package in the GitHub Package Registry.
For that you need to generate a personal access token with the `read:packages` scope.
See [Authenticating to GitHub Packages](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-to-github-packages) for more information.
@@ -34,11 +34,11 @@ npm install @hivemq/ui-library
## Cookbooks
Let's get started with maximum speed you can ether use the [interactive demo](/?path=/story/demo-interactive--primary)
-or follow the steps below to add the UI Kit to your project.
+or follow the steps below to add the UI Library to your project.
## Demo
-Checkout the [interactive demo](/?path=/story/demo-interactive--primary) below to see the UI Kit in action.
+Checkout the [interactive demo](/?path=/story/demo-interactive--primary) below to see the UI Library in action.
diff --git a/src/docs/cookbook/FullDemo.tsx b/src/docs/cookbook/FullDemo.tsx
index 903c470..fa95031 100644
--- a/src/docs/cookbook/FullDemo.tsx
+++ b/src/docs/cookbook/FullDemo.tsx
@@ -171,7 +171,7 @@ export function FullDemo() {
- This is a full demo of the HiveMQ UI Kit. You can interact with the sidebar to change
+ This is a full demo of the HiveMQ UI Library. You can interact with the sidebar to change
the active item.
diff --git a/src/lib.ts b/src/lib.ts
index 52ec238..50bb519 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -2,6 +2,7 @@ export * from './modules/Shell'
export * from './modules/Content'
export * from './modules/Header'
export * from './modules/Sidebar'
+export * from './modules/Buttons'
// TODO make it a hook `useShellContext`
export {
diff --git a/src/modules/Buttons/IconButtonWithTooltip.tsx b/src/modules/Buttons/IconButtonWithTooltip.tsx
new file mode 100644
index 0000000..51c7533
--- /dev/null
+++ b/src/modules/Buttons/IconButtonWithTooltip.tsx
@@ -0,0 +1,15 @@
+import { FC } from 'react'
+import { IconButtonProps, TooltipProps, Tooltip, IconButton as CuiIconButton } from '@chakra-ui/react'
+
+export interface IconButtonWithTooltipProps extends Omit {
+ icon: React.ReactElement
+ tooltipProps?: Omit
+}
+
+export const IconButtonWithTooltip: FC = ({ 'aria-label': ariaLabel, tooltipProps, ...props }) => {
+ return (
+
+
+
+ )
+}
diff --git a/src/modules/Buttons/index.ts b/src/modules/Buttons/index.ts
new file mode 100644
index 0000000..714f413
--- /dev/null
+++ b/src/modules/Buttons/index.ts
@@ -0,0 +1,5 @@
+export {
+ IconButtonWithTooltip,
+ type IconButtonWithTooltipProps
+} from './IconButtonWithTooltip'
+
diff --git a/src/modules/Content/index.ts b/src/modules/Content/index.ts
index b3b337e..dbc0ef1 100644
--- a/src/modules/Content/index.ts
+++ b/src/modules/Content/index.ts
@@ -8,7 +8,7 @@ export const Content = {
*/
Base: ContentRoot,
/**
- * Root element for the UI Kit content that positions the HTML element on the grid and provides
+ * Root element for the UI Library content that positions the HTML element on the grid and provides
* @requires Shell.Root - As the parent element that provides the layout / context for the Content.Root
*/
Root: ContentRoot,
diff --git a/src/modules/Shell/index.ts b/src/modules/Shell/index.ts
index 38d25df..4807a47 100644
--- a/src/modules/Shell/index.ts
+++ b/src/modules/Shell/index.ts
@@ -2,7 +2,7 @@ import { ShellContainer, ShellProvider, ShellRoot } from './ShellRoot'
export const Shell = {
/**
- * Provider for the entire UI Kit this should be at the top of all elements,
+ * Provider for the entire UI Shell this should be at the top of all elements,
* even above `Shell.Root`
*
* @deprecated use `Shell.Root` instead since it provides functionality for both `Shell.Provider` and `Shell.Container`