@camunda/camunda-composite-components 0.0.19 → 0.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -26,7 +26,7 @@ Pushing to `main` will update the storybook available under [github page](https:
|
|
|
26
26
|
Example for navbar:
|
|
27
27
|
|
|
28
28
|
```tsx
|
|
29
|
-
import { C3NavigationElementProps } from "@camunda
|
|
29
|
+
import { C3NavigationElementProps } from "@camunda/camunda-composite-components"
|
|
30
30
|
|
|
31
31
|
// ...
|
|
32
32
|
|
|
@@ -197,7 +197,8 @@ const C3NavigationSideBar = (props) => {
|
|
|
197
197
|
};
|
|
198
198
|
export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, userSideBar, }) => {
|
|
199
199
|
const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`);
|
|
200
|
-
const
|
|
200
|
+
const appBarElementsLength = appBar.elements?.length ?? 0;
|
|
201
|
+
const displayAppBar = appBarElementsLength > 0 || (!isLargeScreen && navbar.elements.length > 0);
|
|
201
202
|
const inverseThemeClassName = useInverseThemeClassName();
|
|
202
203
|
return (React.createElement(HeaderContainer, { render: () => {
|
|
203
204
|
return (React.createElement(Header, { "aria-label": app.ariaLabel },
|
|
@@ -219,11 +220,11 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
|
|
|
219
220
|
navbar.tags.map((tag) => {
|
|
220
221
|
if (tag?.tooltip !== undefined) {
|
|
221
222
|
const { content, buttonLabel } = tag.tooltip;
|
|
222
|
-
return (React.createElement("div", { style: {
|
|
223
|
+
return (React.createElement("div", { key: tag.key, style: {
|
|
223
224
|
height: "1.5rem",
|
|
224
225
|
marginTop: "0.50rem",
|
|
225
226
|
} },
|
|
226
|
-
React.createElement(Toggletip,
|
|
227
|
+
React.createElement(Toggletip, null,
|
|
227
228
|
React.createElement(ToggletipButton, { label: buttonLabel },
|
|
228
229
|
React.createElement(Tag, { type: tag.color, style: {
|
|
229
230
|
padding: "0 1rem",
|