+
{content}
{draggable}
@@ -127,11 +109,10 @@ export const OverflowContainer = forwardRef(function OverflowContainer(
allowDragDrop = false,
children,
className,
- height = 44,
id: idProp,
onMoveItem,
onSwitchWrappedItemIntoView,
- orientation,
+ orientation = "horizontal",
overflowIcon,
overflowPosition,
...htmlAttributes
@@ -143,14 +124,18 @@ export const OverflowContainer = forwardRef(function OverflowContainer(
return (
{
const nonWrappedItems: OverflowItem[] = [];
const wrappedItems: OverflowItem[] = [];
@@ -165,11 +165,12 @@ export const highPriorityItemsHaveWrappedButShouldNotHave = (
*/
export const correctForWrappedOverflowIndicator = (
container: HTMLElement,
- overflowedItems: OverflowItem[]
+ overflowedItems: OverflowItem[],
+ orientation: orientationType
): Promise =>
new Promise((resolve) => {
requestAnimationFrame(() => {
- const [, o2] = getNonWrappedAndWrappedItems(container);
+ const [, o2] = getNonWrappedAndWrappedItems(container, orientation);
const newlyOverflowed = getNewItems(overflowedItems, o2);
newlyOverflowed.forEach((item) => markElementAsWrapped(container, item));
resolve(o2);
@@ -185,16 +186,18 @@ export const correctForWrappedOverflowIndicator = (
export const correctForWrappedHighPriorityItems = (
container: HTMLElement,
nonWrapped: OverflowItem[],
- wrapped: OverflowItem[]
+ wrapped: OverflowItem[],
+ orientation: orientationType
): Promise<[OverflowItem[], OverflowItem[]]> =>
new Promise((resolve) => {
requestAnimationFrame(() => {
- const [, o2] = getNonWrappedAndWrappedItems(container);
+ const [, o2] = getNonWrappedAndWrappedItems(container, orientation);
const highPriorityWrappedItem = getHighestPriorityItem(o2);
if (highPriorityWrappedItem) {
const [nonWrappedItems, wrappedItems] = switchWrappedItemIntoView(
container,
- highPriorityWrappedItem
+ highPriorityWrappedItem,
+ orientation
);
resolve([nonWrappedItems, wrappedItems]);
} else {
@@ -249,19 +252,39 @@ const getOverflowIndicator = (container: HTMLElement) =>
container.querySelector('[data-index="overflow"]') as HTMLElement;
const getOverflowedItem = (container: HTMLElement) =>
container.querySelector(".wrapped") as HTMLElement;
-const getElementWidth = (el: HTMLElement) =>
- parseInt(getComputedStyle(el).getPropertyValue("width"));
+const getElementSize = (el: HTMLElement, sizeProperty: "width" | "height") => {
+ const size = parseInt(getComputedStyle(el).getPropertyValue(sizeProperty));
+ const margin =
+ sizeProperty === "width"
+ ? parseInt(getComputedStyle(el).getPropertyValue("margin-left")) +
+ parseInt(getComputedStyle(el).getPropertyValue("margin-right"))
+ : parseInt(getComputedStyle(el).getPropertyValue("margin-top")) +
+ parseInt(getComputedStyle(el).getPropertyValue("margin-bottom"));
+
+ return size + margin;
+};
const getAvailableSpace = (
container: HTMLElement,
- overflowIndicator: HTMLElement
+ overflowIndicator: HTMLElement,
+ orientation: orientationType
) => {
- const { right: containerRight } = container.getBoundingClientRect();
- const paddingRight = parseInt(
- getComputedStyle(container).getPropertyValue("padding-right")
- );
- const { right: indicatorRight } = overflowIndicator.getBoundingClientRect();
- return containerRight - paddingRight - indicatorRight;
+ if (orientation === "horizontal") {
+ const { right: containerRight } = container.getBoundingClientRect();
+ const paddingRight = parseInt(
+ getComputedStyle(container).getPropertyValue("padding-right")
+ );
+ const { right: indicatorRight } = overflowIndicator.getBoundingClientRect();
+ return containerRight - paddingRight - indicatorRight;
+ } else {
+ const { bottom: containerBottom } = container.getBoundingClientRect();
+ const paddingBottom = parseInt(
+ getComputedStyle(container).getPropertyValue("padding-bottom")
+ );
+ const { bottom: indicatorBottom } =
+ overflowIndicator.getBoundingClientRect();
+ return containerBottom - paddingBottom - indicatorBottom;
+ }
};
/**
@@ -270,16 +293,22 @@ const getAvailableSpace = (
indicaor were removed ?
*/
export const removeOverflowIndicatorIfNoLongerNeeded = (
- container: HTMLElement
+ container: HTMLElement,
+ orientation: orientationType
): boolean => {
+ const sizeProperty = orientation === "horizontal" ? "width" : "height";
const overflowIndicator = getOverflowIndicator(container);
- const availableSpace = getAvailableSpace(container, overflowIndicator);
- const indicatorWidth = getElementWidth(overflowIndicator);
+ const availableSpace = getAvailableSpace(
+ container,
+ overflowIndicator,
+ orientation
+ );
+ const indicatorWidth = getElementSize(overflowIndicator, sizeProperty);
const overflowedItem = getOverflowedItem(container);
- const overflowWidth = getElementWidth(overflowedItem);
+ const overflowWidth = getElementSize(overflowedItem, sizeProperty);
if (overflowWidth <= availableSpace + indicatorWidth) {
- container.classList.remove("overflowed");
+ container.classList.remove("vuuOverflowContainer-wrapContainer-overflowed");
overflowedItem.classList.remove("wrapped");
return true;
}
@@ -315,7 +344,8 @@ const getNonwrappedItemsByPriority = (container: HTMLElement) =>
*/
export const switchWrappedItemIntoView = (
container: HTMLElement,
- overflowItem: OverflowItem
+ overflowItem: OverflowItem,
+ orientation: orientationType
): [OverflowItem[], OverflowItem[]] => {
const unwrappedItems = getNonwrappedItemsByPriority(container);
const targetElement = getElementByDataIndex(
@@ -325,11 +355,12 @@ export const switchWrappedItemIntoView = (
);
let pos = -1;
let unwrappedItem = unwrappedItems.at(pos) as HTMLElement;
- const itemWidth = getElementWidth(unwrappedItem);
- const targetWidth = getElementWidth(targetElement);
+ const sizeProperty = orientation === "horizontal" ? "width" : "height";
+ const itemWidth = getElementSize(unwrappedItem, sizeProperty);
+ const targetWidth = getElementSize(targetElement, sizeProperty);
const overflowIndicator = getOverflowIndicator(container);
let availableSpace =
- getAvailableSpace(container, overflowIndicator) + itemWidth;
+ getAvailableSpace(container, overflowIndicator, orientation) + itemWidth;
if (availableSpace >= targetWidth) {
switchWrapOnElements(targetElement, unwrappedItem);
} else {
@@ -351,8 +382,10 @@ export const switchWrappedItemIntoView = (
item.classList.add("wrapped");
});
}
- const [nonWrappedItems, wrappedItems] =
- getNonWrappedAndWrappedItems(container);
+ const [nonWrappedItems, wrappedItems] = getNonWrappedAndWrappedItems(
+ container,
+ orientation
+ );
unmarkItemsWhichAreNoLongerWrapped(container, wrappedItems);
return [nonWrappedItems, wrappedItems];
};
diff --git a/vuu-ui/packages/vuu-ui-controls/src/overflow-container/useOverflowContainer.ts b/vuu-ui/packages/vuu-ui-controls/src/overflow-container/useOverflowContainer.ts
index ffbbd8563..e3048afc8 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/overflow-container/useOverflowContainer.ts
+++ b/vuu-ui/packages/vuu-ui-controls/src/overflow-container/useOverflowContainer.ts
@@ -24,10 +24,8 @@ import {
import { OverflowContainerProps } from "./OverflowContainer";
export interface OverflowContainerHookProps
- extends Pick<
- OverflowContainerProps,
- "allowDragDrop" | "onMoveItem" | "orientation"
- > {
+ extends Pick,
+ Required> {
itemCount: number;
onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;
}
@@ -37,7 +35,7 @@ export const useOverflowContainer = ({
itemCount,
onMoveItem,
onSwitchWrappedItemIntoView,
- orientation = "horizontal",
+ orientation,
}: OverflowContainerHookProps) => {
const [container, setContainer] = useState(null);
const wrappedItemsRef = useRef(NO_WRAPPED_ITEMS);
@@ -64,7 +62,11 @@ export const useOverflowContainer = ({
"vuuOverflowContainer-wrapContainer"
);
if (overflowIndicatorHasWrappedButShouldNotHave(wrapped)) {
- wrapped = await correctForWrappedOverflowIndicator(container, wrapped);
+ wrapped = await correctForWrappedOverflowIndicator(
+ container,
+ wrapped,
+ orientation
+ );
}
while (
highPriorityItemsHaveWrappedButShouldNotHave(nonWrapped, wrapped)
@@ -72,11 +74,12 @@ export const useOverflowContainer = ({
[nonWrapped, wrapped] = await correctForWrappedHighPriorityItems(
container,
nonWrapped,
- wrapped
+ wrapped,
+ orientation
);
}
if (wrapped.length === 1) {
- if (removeOverflowIndicatorIfNoLongerNeeded(container)) {
+ if (removeOverflowIndicatorIfNoLongerNeeded(container, orientation)) {
wrapped = NO_WRAPPED_ITEMS;
}
}
@@ -119,7 +122,8 @@ export const useOverflowContainer = ({
// TODO do we always want to switch it into view - leave that to caller
const [, wrappedItems] = switchWrappedItemIntoView(
container,
- options.overflowItem
+ options.overflowItem,
+ orientation
);
wrappedItemsRef.current = wrappedItems;
onSwitchWrappedItemIntoView?.(options.overflowItem);
@@ -127,7 +131,7 @@ export const useOverflowContainer = ({
return true;
},
];
- }, [container, onSwitchWrappedItemIntoView]);
+ }, [container, onSwitchWrappedItemIntoView, orientation]);
const resizeObserver = useMemo(() => {
const { sizeProp } = MEASURES[orientation];
diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.css b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.css
index 81794c69e..bd4cd0378 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.css
+++ b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.css
@@ -1,21 +1,21 @@
/* Class applied to root Tab element */
.vuuTab {
-
--saltEditableLabel-padding: 0;
--saltEditableLabel-height: calc(var(--tabstrip-height) - 2px);
--saltInputLegacy-minWidth: 4em;
--saltEditableLabel-top: 2px;
- --tab-background: var(--vuuTab-background, var(--salt-navigable-primary-background));
+ --tab-background: var(--vuuTab-background, transparent);
--tab-cursor: pointer;
--tab-position: relative;
-}
-.vuuTab {
+
align-items: center;
align-self: stretch;
background: var(--tab-background);
- border: none;
+ border-color: var(--vuuTab-borderColor, transparent);
+ border-style: var(--vuuTab-borderStyle, none);
+ border-width: var(--vuuTab-borderWidth, 0px);
border-radius: var(--vuuTab-borderRadius, 0);
color: var(--salt-text-primary-foreground);
cursor: var(--vuuTab-cursor, var(--tab-cursor));
@@ -23,23 +23,15 @@
gap: 8px;
height: var(--vuuTabHeight, var(--tab-height));
letter-spacing: var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));
+ margin: 0 var(--tab-spacing) 0 0;
min-width: var(--vuuTab-minWidth, 40px);
outline: none;
- padding: var(--vuuTab-padding, 0 24px);
+ padding: var(--vuuTab-padding, 0 var(--salt-spacing-200));
position: var(--vuuTab-position, var(--tab-position));
user-select: none;
width: var(--tab-width)
}
-/* Overrides characteristic used in saltFocusVisible */
-/* .vuuTab.saltFocusVisible:after {
- inset: 2px 2px 4px 2px;
-} */
-
-.vuuTab {
- margin: 0 var(--tab-spacing) 0 0;
-}
-
.vuuTab-selected {
background: var(--vuuTab-background-selected, var(--tab-background));
color: var(--salt-text-primary-foreground);
diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabMenu.css b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabMenu.css
index 14ef26e00..d006ac8e0 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabMenu.css
+++ b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabMenu.css
@@ -1,3 +1,3 @@
.vuuTabMenu {
- top: var(--vuuTabMenu-top, -2px);
+ top: var(--vuuTabMenu-top, 0px);
}
\ No newline at end of file
diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabMenu.tsx b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabMenu.tsx
index 41e4a9703..db4bf1dc8 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabMenu.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabMenu.tsx
@@ -68,14 +68,15 @@ export const TabMenu = ({
return (
);
};
diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabsTypes.ts b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabsTypes.ts
index e75eee04c..2fb658458 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabsTypes.ts
+++ b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabsTypes.ts
@@ -115,6 +115,12 @@ export interface TabstripProps extends HTMLAttributes {
* An optional classname that will be added to each tab
*/
tabClassName?: string;
+
+ /**
+ * An optional classifier, used to create a classname, intended
+ * for promary vs secondary bavigation.
+ */
+ variant?: "primary" | "secondary";
}
export type exitEditHandler = (
diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.css b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.css
index ae4e409d0..812d0cb2c 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.css
+++ b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.css
@@ -1,7 +1,8 @@
/* Component class applied to the root element */
.vuuTabstrip {
--vuuOverflowContainer-background: transparent;
- /* --tabstrip-height: var(--vuuTabstrip-height, var(--salt-size-stackable)); */
+ --vuuOverflowContainer-borderColor: var(--salt-container-primary-borderColor);
+ --vuuOverflowContainer-width: var(--tabstrip-width);
--tabstrip-dragging-display: none;
--tabstrip-display: inline-flex;
--tabstrip-background: transparent;
@@ -13,16 +14,14 @@
min-width: 28px;
position: relative;
overflow: visible;
- width: var(--tabstrip-width);
}
/* Tabstrip orientation is horizontal */
-.vuuTabstrip-horizontal {
- --vuuOverflowContainer-borderColor: var(--salt-container-primary-borderColor);
+.vuuTabstrip.vuuOrientation-horizontal {
--vuuOverflowContainer-borderStyle: none none solid none;
--vuuOverflowContainer-borderBottomWidth: 1px;
- --tabstrip-height: var(--vuuTabstrip-height, 28px);
+ --tabstrip-height: var(--vuuTabstrip-height, var(--overflow-wrapper-height,28px));
--tabstrip-width: var(--vuuTabstrip-width, 100%);
--tab-height: var(--tabstrip-height);
--tab-width: auto;
@@ -35,7 +34,7 @@
}
/* Tabstrip orientation is vertical */
-.vuuTabstrip-vertical {
+.vuuTabstrip.vuuOrientation-vertical {
--tabstrip-height: var(--vuuTabstrip-height, 100%);
--tabstrip-width: var(--vuuTabstrip-width, 100px);
--tab-height: 50px;
@@ -79,7 +78,7 @@
line-height: var(--tabstrip-height);
}
-.vuuTabstrip-vertical .vuuTabstrip-inner {
+.vuuTabstrip.vuuOrientation-vertical .vuuTabstrip-inner {
flex-direction: column;
height: auto;
}
diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.tsx b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.tsx
index be5c25dd3..85f171c8a 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.tsx
@@ -30,6 +30,7 @@ export const Tabstrip = ({
showTabMenuButton,
style: styleProp,
tabClassName,
+ variant = "secondary",
...htmlAttributes
}: TabstripProps) => {
const rootRef = useRef(null);
@@ -55,7 +56,7 @@ export const Tabstrip = ({
orientation,
});
const id = useId(idProp);
- const className = cx(classBase, `${classBase}-${orientation}`, classNameProp);
+ const className = cx(classBase, classNameProp);
const style =
styleProp || containerStyle
? {
@@ -101,6 +102,7 @@ export const Tabstrip = ({
{...tabstripHook.navigationProps}
aria-label="Create Tab"
className={`${classBase}-addTabButton`}
+ data-embedded
icon="add"
data-overflow-priority="1"
key="addButton"
@@ -135,8 +137,7 @@ export const Tabstrip = ({
buildPackage(packageName));
diff --git a/vuu-ui/scripts/build-themes.mjs b/vuu-ui/scripts/build-themes.mjs
new file mode 100644
index 000000000..8d4c22b54
--- /dev/null
+++ b/vuu-ui/scripts/build-themes.mjs
@@ -0,0 +1,26 @@
+import { execWait, getCommandLineArg, withArgs } from "./utils.mjs";
+
+const jsonOutput = getCommandLineArg("json", false);
+
+export const buildAll = async () => {
+ const buildPackage = async (packageName) =>
+ execWait(
+ `npm run --silent build${withArgs("dev", "debug")}`,
+ `themes/${packageName}`
+ );
+
+ // TODO determine the dependency graph/build order programatically
+ const packages = ["tar-theme"];
+
+ if (jsonOutput) {
+ console.log(
+ JSON.stringify({
+ "package-list": packages,
+ })
+ );
+ }
+
+ await Promise.all(packages.map(buildPackage));
+};
+
+buildAll();
diff --git a/vuu-ui/showcase/icon512.png b/vuu-ui/showcase/icon512.png
new file mode 100644
index 000000000..3f46c9d48
Binary files /dev/null and b/vuu-ui/showcase/icon512.png differ
diff --git a/vuu-ui/showcase/manifest.json b/vuu-ui/showcase/manifest.json
new file mode 100644
index 000000000..0f2b677a4
--- /dev/null
+++ b/vuu-ui/showcase/manifest.json
@@ -0,0 +1,17 @@
+{
+ "lang": "en-us",
+ "name": "Vuu Showcase",
+ "short_name": "Vuu showcase",
+ "description": "A showcase for Vuu components, patterns and documentation",
+ "start_url": "/",
+ "background_color": "red",
+ "theme_color": "green",
+ "orientation": "any",
+ "display": "standalone",
+ "icons": [
+ {
+ "src": "/icon512.png",
+ "sizes": "512x512"
+ }
+ ]
+}
diff --git a/vuu-ui/showcase/src/examples/Layout/Toolbar.examples.tsx b/vuu-ui/showcase/src/examples/Layout/Toolbar.examples.tsx
index e9876d923..bd06bb94c 100644
--- a/vuu-ui/showcase/src/examples/Layout/Toolbar.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Layout/Toolbar.examples.tsx
@@ -25,7 +25,6 @@ export const DefaulToolbar = () => {
}
>
{
}
>
{
>
{
>
{
>
{
}
>
{
}
>
{
}
>
{
}
>
{
scrollingApiRef={scrollingAPI}
width={1000}
/>
-
+
diff --git a/vuu-ui/showcase/src/examples/Table/Table.examples.tsx b/vuu-ui/showcase/src/examples/Table/Table.examples.tsx
index 0bcb37474..2f2728489 100644
--- a/vuu-ui/showcase/src/examples/Table/Table.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Table/Table.examples.tsx
@@ -153,7 +153,7 @@ export const ControlledNavigation = () => {
return (
<>
-
+
diff --git a/vuu-ui/showcase/src/examples/Layout/OverflowContainer.examples.css b/vuu-ui/showcase/src/examples/UiControls/OverflowContainer.examples.css
similarity index 55%
rename from vuu-ui/showcase/src/examples/Layout/OverflowContainer.examples.css
rename to vuu-ui/showcase/src/examples/UiControls/OverflowContainer.examples.css
index b49635ca1..dee66a7cc 100644
--- a/vuu-ui/showcase/src/examples/Layout/OverflowContainer.examples.css
+++ b/vuu-ui/showcase/src/examples/UiControls/OverflowContainer.examples.css
@@ -1,17 +1,13 @@
.Item {
background-color: var(--item-bg, blue);
color: white;
- height: 32px;
+ height: var(--salt-size-base);
}
-.vuuOverflowContainer-vertical .Item {
+.vuuOverflowContainer.vuuOrientation-vertical .Item {
width: 100%;
}
[data-overflow-priority="1"].Item {
background-color: pink;
}
-
-.vuuOverflowContainer-wrapContainer {
- /* overflow: visible; */
-}
\ No newline at end of file
diff --git a/vuu-ui/showcase/src/examples/Layout/OverflowContainer.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/OverflowContainer.examples.tsx
similarity index 91%
rename from vuu-ui/showcase/src/examples/Layout/OverflowContainer.examples.tsx
rename to vuu-ui/showcase/src/examples/UiControls/OverflowContainer.examples.tsx
index 413049800..37c93b992 100644
--- a/vuu-ui/showcase/src/examples/Layout/OverflowContainer.examples.tsx
+++ b/vuu-ui/showcase/src/examples/UiControls/OverflowContainer.examples.tsx
@@ -19,7 +19,7 @@ export const DefaultOverflowContainer = () => {
} as CSSProperties
}
>
-
+
@@ -60,7 +60,7 @@ export const WrapOverflowContainerFlexLayout = () => {
style={{ flex: 1, flexDirection: "column", background: "#ccc" }}
>
{/* prettier-ignore */}
-
+
1
2
3
@@ -69,7 +69,7 @@ export const WrapOverflowContainerFlexLayout = () => {
6
{/* prettier-ignore */}
-
+
1
2
3
@@ -79,7 +79,7 @@ export const WrapOverflowContainerFlexLayout = () => {
7
{/* prettier-ignore */}
-
+
1
2
3
@@ -129,7 +129,7 @@ export const OverflowContainerHighPriorityItem = () => {
style={{ flex: 1, flexDirection: "column", background: "#ccc" }}
>
{/* prettier-ignore */}
-
+
1
2
3
@@ -138,7 +138,7 @@ export const OverflowContainerHighPriorityItem = () => {
6
{/* prettier-ignore */}
-
+
1
2
3
@@ -147,7 +147,7 @@ export const OverflowContainerHighPriorityItem = () => {
6
{/* prettier-ignore */}
-
+
1
2
3
@@ -161,7 +161,7 @@ export const OverflowContainerHighPriorityItem = () => {
11
{/* prettier-ignore */}
-
+
1
2
3
@@ -189,11 +189,7 @@ export const TestFixtureSimpleOverflowContainer = ({ width = 600 }) => {
return (
<>
-
+
@@ -240,9 +236,8 @@ export const SortableOverflowContainer = () => {
>
{items.map((item) => (
@@ -283,7 +278,7 @@ export const VerticalOverflowContainerFlexLayout = () => {
style={{ background: "lightcyan", flex: 1, overflow: "hidden" }}
>
{/* prettier-ignore */}
-
+
1
2
3
diff --git a/vuu-ui/showcase/src/examples/UiControls/Tabstrip.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/Tabstrip.examples.tsx
index a2b789ebc..d1c219cbe 100644
--- a/vuu-ui/showcase/src/examples/UiControls/Tabstrip.examples.tsx
+++ b/vuu-ui/showcase/src/examples/UiControls/Tabstrip.examples.tsx
@@ -1,4 +1,9 @@
-import { ExitEditModeHandler, Tab, Tabstrip } from "@finos/vuu-ui-controls";
+import {
+ ExitEditModeHandler,
+ Tab,
+ Tabstrip,
+ TabstripProps,
+} from "@finos/vuu-ui-controls";
import { moveItem } from "@finos/vuu-utils";
import { useCallback, useState } from "react";
import { FlexboxLayout, LayoutProvider } from "@finos/vuu-layout";
@@ -9,9 +14,85 @@ const SPLITTER_WIDTH = 3;
let displaySequence = 1;
-export const DefaultTabstripNext = ({
+export const DefaultTabstrip = ({
+ activeTabIndex: activeTabIndexProp = 0,
+ width = 500,
+}) => {
+ const [activeTabIndex, setActiveTabIndex] = useState(activeTabIndexProp);
+ const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
+ return (
+
+
+
+
+ {tabs.map((label, i) => (
+
+ ))}
+
+
+
+
+
+ );
+};
+
+DefaultTabstrip.displaySequence = displaySequence++;
+
+export const OveflowingTabstrip = ({
+ activeTabIndex: activeTabIndexProp = 0,
+ width = 350,
+}) => {
+ const [activeTabIndex, setActiveTabIndex] = useState(activeTabIndexProp);
+ const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
+ return (
+
+
+
+
+ {tabs.map((label, i) => (
+
+ ))}
+
+
+
+
+
+ );
+};
+
+OveflowingTabstrip.displaySequence = displaySequence++;
+
+export const OveflowingSelectedTab = ({
activeTabIndex: activeTabIndexProp = 4,
- width = 700,
+ width = 350,
}) => {
const [activeTabIndex, setActiveTabIndex] = useState(activeTabIndexProp);
const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
@@ -45,9 +126,9 @@ export const DefaultTabstripNext = ({
);
};
-DefaultTabstripNext.displaySequence = displaySequence++;
+OveflowingSelectedTab.displaySequence = displaySequence++;
-export const TabstripNextAddTab = ({ width = 700 }) => {
+export const TabstripAddTab = ({ width = 700 }) => {
const [activeTabIndex, setActiveTabIndex] = useState(0);
const [tabs, setTabs] = useState([{ label: "Home" }]);
@@ -89,9 +170,9 @@ export const TabstripNextAddTab = ({ width = 700 }) => {
);
};
-TabstripNextAddTab.displaySequence = displaySequence++;
+TabstripAddTab.displaySequence = displaySequence++;
-export const TabstripNextRemoveTab = ({ width = 700 }) => {
+export const TabstripRemoveTab = ({ width = 700 }) => {
const [activeTabIndex, setActiveTabIndex] = useState(0);
const [tabs, setTabs] = useState([{ label: "Home" }]);
@@ -142,9 +223,9 @@ export const TabstripNextRemoveTab = ({ width = 700 }) => {
);
};
-TabstripNextRemoveTab.displaySequence = displaySequence++;
+TabstripRemoveTab.displaySequence = displaySequence++;
-export const TabstripNextEditableLabels = ({
+export const TabstripEditableLabels = ({
activeTabIndex: activeTabIndexProp = 0,
width = 700,
}) => {
@@ -190,17 +271,11 @@ export const TabstripNextEditableLabels = ({
);
};
-TabstripNextEditableLabels.displaySequence = displaySequence++;
+TabstripEditableLabels.displaySequence = displaySequence++;
-export const TabstripNextDragDrop = ({ width = 700 }) => {
+export const TabstripDragDrop = ({ width = 700 }) => {
const [activeTabIndex, setActiveTabIndex] = useState(0);
- const [tabs, setTabs] = useState([
- "Home",
- "Transactions",
- "Loans",
- "Checks",
- "Liquidity",
- ]);
+ const [tabs, setTabs] = useState(["Home", "Transactions", "Loans", "Checks"]);
const handleDrop = useCallback((fromIndex: number, toIndex: number) => {
setTabs((tabs) => moveItem(tabs, fromIndex, toIndex));
@@ -238,7 +313,83 @@ export const TabstripNextDragDrop = ({ width = 700 }) => {
);
};
-TabstripNextDragDrop.displaySequence = displaySequence++;
+TabstripDragDrop.displaySequence = displaySequence++;
+
+const TabstripBase = (props: Partial) => {
+ const [activeTabIndex, setActiveTabIndex] = useState(0);
+ const [tabs, setTabs] = useState([
+ "Home",
+ "Transactions",
+ "Loans",
+ "Checks",
+ "Liquidity",
+ ]);
+
+ const handleDrop = useCallback((fromIndex: number, toIndex: number) => {
+ setTabs((tabs) => moveItem(tabs, fromIndex, toIndex));
+ }, []);
+ return (
+
+ {tabs.map((label, i) => (
+
+ ))}
+
+ );
+};
+
+export const TabstripVariations = () => {
+ return (
+
+ Primary
+
+
+
+
+
+
+
+
+ Secondary
+
+
+
+
+
+
+
+
+ );
+};
+
+TabstripVariations.displaySequence = displaySequence++;
/*
const CloseTabWarningDialog = ({
diff --git a/vuu-ui/showcase/src/examples/UiControls/index.ts b/vuu-ui/showcase/src/examples/UiControls/index.ts
index 430504685..b7cc4f594 100644
--- a/vuu-ui/showcase/src/examples/UiControls/index.ts
+++ b/vuu-ui/showcase/src/examples/UiControls/index.ts
@@ -7,6 +7,7 @@ export * as EditableLabel from "./EditableLabel.examples";
export * as InstrumentPicker from "./InstrumentPicker.examples";
export * as InstrumentSearch from "./InstrumentSearch.examples";
export * as List from "./List.examples";
+export * as OverflowContainer from "./OverflowContainer.examples";
export * as Tree from "./Tree.examples";
export * as SplitButton from "./SplitButton.examples";
export * as Tabstrip from "./Tabstrip.examples";
diff --git a/vuu-ui/showcase/src/examples/salt/Button.examples.tsx b/vuu-ui/showcase/src/examples/salt/Button.examples.tsx
index 8a04048ec..d0d6adb29 100644
--- a/vuu-ui/showcase/src/examples/salt/Button.examples.tsx
+++ b/vuu-ui/showcase/src/examples/salt/Button.examples.tsx
@@ -50,21 +50,27 @@ export const ButtonVariations = () => {
alignItems: "center",
display: "grid",
gap: 20,
- gridTemplateColumns: "1fr 1fr 1fr 1fr",
+ gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr",
justifyItems: "left",
}}
>
+ CTA
Primary
Secondary
- CTA
+ Embedded
+
-
+
+
-