@veracity/vui 2.7.0 → 2.8.0-rc.1

package/src/tree/tree.tsx

@@ -18,24 +18,17 @@ export const TreeBase = styled.divBox`
 
 /** Displays a tree of tree link items and optional heading. Exposes some props to the children via context. */
 export const Tree = vui<'div', TreeProps>((props, ref) => {
-  const {
-    activeItemId,
-    children,
-    className,
-    iconCollapse = 'falMinus',
-    iconExpand = 'falPlus',
-    items,
-    onClickItem,
-    size,
-    variant,
-    ...rest
-  } = props
+  const { activeItemId, children, className, iconCollapse, iconExpand, items, onClickItem, size, variant, ...rest } =
+    props
   const styles = useStyleConfig('Tree', props)
 
   const { itemsInternal, setItemsInternal, activeItemIndex, setActiveItemIndex } = useTreeState(activeItemId)
 
   const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])
 
+  const iconCollapseInternal = iconCollapse ? iconCollapse : variant === 'default' ? 'falAngleRight' : 'falMinus'
+  const iconExpandInternal = iconExpand ? iconExpand : variant === 'default' ? 'falAngleDown' : 'falPlus'
+
   const transformChildrenToItems = (children: any) => {
     const t: TreeItemProps[] = []
 
@@ -56,7 +49,7 @@ export const Tree = vui<'div', TreeProps>((props, ref) => {
             isCollapsed: child.props.isCollapsed,
             disabled: child.props.disabled,
             onClickTreeItem: onClickTreeItem
-          })
+          } as unknown as TreeItemProps)
         }
       })
     }
@@ -95,10 +88,11 @@ export const Tree = vui<'div', TreeProps>((props, ref) => {
           return (
             <TreeItem
               activeItemIndex={activeItemIndex}
-              iconCollapse={iconCollapse}
-              iconExpand={iconExpand}
+              iconCollapse={iconCollapseInternal}
+              iconExpand={iconExpandInternal}
               id={id}
-              isActive={activeItemIndex ? activeItemIndex === id : false}
+              isActive={isActive ? isActive : activeItemIndex ? activeItemIndex === id : false}
+              isFirstLevel={true}
               key={id ?? index}
               onClickTreeItem={onClickTreeItem}
               {...props}

package/src/tree/tree.types.ts

@@ -2,6 +2,7 @@ import { ReactNode, ReactText } from 'react'
 
 import { IconProp } from '../icon'
 import { LinkProps } from '../link'
+import { ListItemProps } from '../list'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 import { PropsOf } from '../utils'
@@ -15,7 +16,7 @@ export type TreeProps = SystemProps &
     /** Socket defining the expand icon on the left. */
     iconExpand?: IconProp
     /** Socket displaying a tree of items. */
-    items?: PropsOf<'div', TreeItemProps>[] | JSX.Element
+    items?: PropsOf<'li', TreeItemProps>[] | JSX.Element
     /** Socket defining the size of the tree. */
     onClickItem?: (id: TreeItemId) => void
   }
@@ -29,7 +30,7 @@ export type TreeOnToggleEvent = {
   collapsed: boolean
 }
 
-export type TreeItemProps = SystemProps &
+export type TreeItemProps = ListItemProps &
   ThemingProps<'Tree'> & {
     activeItemId?: TreeItemId
     /** internal, not exposed */
@@ -47,16 +48,22 @@ export type TreeItemProps = SystemProps &
     /** Socket defining the expand icon on the left. */
     iconExpand?: IconProp
     /** The children of this tree item. */
-    items?: PropsOf<'div', TreeItemProps>[]
+    items?: PropsOf<'li', TreeItemProps>[]
     children?: ReactNode
     /** Collapsed state */
     isCollapsed?: boolean
+    /** indicates if the item is first-level; if yes it can be styled differently */
+    isFirstLevel?: boolean
     /** Displays item and its content in disabled state with appropriate styling. */
     disabled?: boolean
     /** Displays item in selected state with appropriate styling. */
     isActive?: boolean
     /** If provided, content is wrapper with a link and the props are provided to the element. */
     linkProps?: TreeItemLinkProps
+    /** internal, padding left; if provided it will accumulate function of levels. */
+    propagatedPL?: number
+    /** Socket defining the size of the padding increment. */
+    plUnit?: number
     /** Socket displaying text within the item. */
     text: ReactText | JSX.Element
     /** Collapse change state */

package/src/tree/treeItem.tsx

@@ -2,32 +2,26 @@ import React, { useEffect, useState } from 'react'
 
 import { Box } from '../box'
 import { styled, useStyleConfig, vui } from '../core'
-import { cs, isArray, isReactText } from '../utils'
+import { List } from '../list'
+import { cs, isArray, isReactText, vuiColorToRGBA } from '../utils'
 import { useTreeContext } from './context'
 import { TreeItemProps } from './tree.types'
 import TreeIcon from './treeIcon'
 import TreeText from './treeText'
 
-export const TreeItemBase = styled.divBox`
+/*@formatter:off*/
+export const TreeItemBase = styled.liBox`
   display: flex;
   flex-direction: column;
-  line-height: normal;
-  outline: none;
-  align-content: flex-start;
-  align-items: flex-start;
-  overflow: visible;
-  height: auto;
-
-  & [aria-disabled='true'] {
-    cursor: not-allowed;
-    user-select: none;
-  }
+  transition-duration: fast;
+  width: 100%;
 `
+/*@formatter:on*/
 
 /**
  * Displays a tree item with text and optional icons. Can be shown as selected.
  */
-export const TreeItem = vui<'div', TreeItemProps>((props, ref) => {
+export const TreeItem = vui<'li', TreeItemProps>((props, ref) => {
   const mergedProps = { ...useTreeContext(), ...props }
 
   const {
@@ -45,18 +39,24 @@ export const TreeItem = vui<'div', TreeItemProps>((props, ref) => {
     id,
     items,
     isActive,
+    isFirstLevel,
     isTruncated,
     key,
     onClickTreeItem,
     onToggle,
+    propagatedPL,
+    plUnit = 26,
     text,
     ...rest
   } = mergedProps
   const styles = useStyleConfig('Tree', useTreeContext())
-  const { activeBg, h, hoverBg, p, px, py, selectedBg, ...itemStyles } = styles.item
+  const { activeBg, bg, color, h, hoverBg, hoverColor, p, px, py, selectedBg, ...itemStyles } = styles.item
 
   const [collapsedInternal, setIsCollapsedInternal] = useState<boolean>(false)
 
+  const innerBoxPl = propagatedPL || 0
+  const innerListPl = innerBoxPl + (plUnit || 0)
+
   useEffect(() => {
     setIsCollapsedInternal(!!isCollapsed)
   }, [isCollapsed])
@@ -77,84 +77,111 @@ export const TreeItem = vui<'div', TreeItemProps>((props, ref) => {
     e.stopPropagation()
   }
 
-  const interactiveProps = !disabled
-    ? {
-        cursor: 'pointer',
-        focusVisibleRing: 2,
-        hoverBg: 'transparent',
-        activeBg: 'transparent',
-        userSelect: 'none'
-      }
-    : {}
-
   const hoverTreeItem = (e: Event, type: string) => {
     const target = e.target as HTMLDivElement
 
+    let parentDiv = undefined
+
     if (target.classList.contains('vui-treeItem-permanent')) {
-      target.style.backgroundColor = type === 'over' ? '#e2f1ff' : 'transparent'
-      e.stopPropagation()
+      parentDiv = target
     } else {
-      e.preventDefault()
-      const permanent = target
-        .closest('.vui-treeItem')
-        ?.getElementsByClassName('vui-treeItem-permanent')[0] as HTMLDivElement
-
-      const collapsible = target
-        .closest('.vui-treeItem')
-        ?.getElementsByClassName('vui-treeItem-collapsible')[0] as HTMLDivElement
-
-      const active = target.closest('.vui-treeItem')?.getElementsByClassName('vui-treeItem-active')[0] as HTMLDivElement
+      const parentLi = target.closest('.vui-treeItem')
+      parentDiv = parentLi?.getElementsByClassName('vui-treeItem-permanent')[0] as HTMLDivElement
+    }
 
-      permanent ? (permanent.style.backgroundColor = type === 'over' ? '#e2f1ff' : 'transparent') : null
-      collapsible ? (collapsible.style.backgroundColor = 'transparent') : null
-      active ? (active.style.backgroundColor = 'hsl(139, 100%, 90%)') : null
+    const isDivActive = parentDiv.classList.contains('vui-treeItem-active') ? true : false
+
+    // translate the list-item style over to the div
+    if (parentDiv.classList.contains('vui-treeItem-permanent')) {
+      // is it a fist level item?
+      if (parentDiv.classList.contains('vui-treeItem-firstLevel')) {
+        if (type === 'over') {
+          parentDiv.style.backgroundColor = vuiColorToRGBA(styles?.firstLevelItem?.hoverBg || 'transparent')
+        }
+
+        if (type === 'out') {
+          parentDiv.style.backgroundColor = isDivActive
+            ? vuiColorToRGBA(styles?.firstLevelItem?.activeBg || 'transparent')
+            : vuiColorToRGBA(styles?.firstLevelItem?.bg || 'transparent')
+        }
+      } else {
+        // it is NOT first level
+        if (type === 'over') {
+          parentDiv.style.backgroundColor = vuiColorToRGBA(styles?.item?.hoverBg || 'transparent')
+        }
+        if (type === 'out') {
+          parentDiv.style.backgroundColor = isDivActive
+            ? vuiColorToRGBA(styles?.item?.activeBg || 'transparent')
+            : vuiColorToRGBA(styles?.item?.bg || 'transparent')
+        }
+      }
+    } else {
+      e.preventDefault()
     }
+
+    e.stopPropagation()
   }
 
   const isCollapsable = (isArray(children) && children.length > 0) || (isArray(items) && items.length > 0)
   const isActiveInternal = (!activeItemIndex && isActive) || activeItemIndex === id
 
+  let textMl = items && items?.length > 0 ? 0 : 1.5
+  if (!isCollapsable) {
+    textMl += 3.8
+  }
+
+  // hoverBg cannot be styled directly from theme, it has to be JS manipulated because of event propagation
   return (
     <TreeItemBase
-      alignItems="start"
-      className={cs('vui-treeItem', className)}
+      className={cs('vui-treeItem', isFirstLevel ? 'vui-treeItem-firstLevel' : '', className)}
+      color={isFirstLevel ? styles?.firstLevelItem?.color : color}
       h={collapsedInternal ? h : isCollapsable ? 'auto' : h}
-      id={id}
+      id={id.toString()}
       m={0}
       onClick={!disabled ? (e: Event) => toggle(e) : undefined}
       onMouseOut={!disabled ? (e: Event) => hoverTreeItem(e, 'out') : undefined}
       onMouseOver={!disabled ? (e: Event) => hoverTreeItem(e, 'over') : undefined}
       p={0}
+      propagatedPL={propagatedPL}
       ref={ref}
       w={1}
       {...itemStyles}
-      {...interactiveProps}
+      bg={
+        isFirstLevel
+          ? isActiveInternal
+            ? styles?.firstLevelItem?.activeBg
+            : styles?.firstLevelItem?.bg
+          : isActiveInternal
+          ? styles?.item?.activeBg
+          : bg
+      }
+      hoverBg={undefined}
       {...rest}
-      hoverBg="transparent"
     >
-      <Box flexDirection="column" hoverBg="transparent" m={0} pl={2} pr={0} py={py} w={1}>
+      <>
         <Box
-          alignItems="center"
-          bg={isActiveInternal ? 'hsl(139, 100%, 90%)' : 'transparent'}
-          className={isActiveInternal ? 'vui-treeItem-active' : 'vui-treeItem-permanent'}
-          flexDirection="row"
-          hoverBg="transparent"
-          m={0}
-          p={0}
-          w={1}
+          centerV
+          className={cs(
+            'vui-treeItem-permanent',
+            isActiveInternal ? 'vui-treeItem-active' : '',
+            isFirstLevel ? 'vui-treeItem-firstLevel' : ''
+          )}
+          fontWeight={isActiveInternal ? '600' : '500'}
+          pl={`${innerBoxPl}px`}
         >
           {items && items?.length > 0 && (
-            <>{collapsedInternal ? <TreeIcon mr={1} name={iconExpand} /> : <TreeIcon mr={1} name={iconCollapse} />}</>
+            <>
+              {collapsedInternal ? <TreeIcon mx={1.5} name={iconExpand} /> : <TreeIcon mx={1.5} name={iconCollapse} />}
+            </>
           )}
-          {items?.length === 0 && <TreeIcon mr={1} name="cusDotFullAlt" />}
-          {isReactText(text) ? <TreeText {...{ isTruncated, text }} /> : text}
+          {isReactText(text) ? <TreeText ml={textMl} {...{ isTruncated, text }} /> : text}
         </Box>
 
         {isCollapsable && !collapsedInternal && (
-          <Box className="vui-treeItem-collapsible" flexDirection="column" hoverBg="transparent" m={0} p={0} w={1}>
+          <List w={1}>
             {children ??
               (isArray<TreeItemProps>(items)
-                ? items.map(({ key, ...props }, index) => {
+                ? items.map(({ key, propagatedPL, ...props }, index) => {
                     return (
                       <TreeItem
                         activeItemIndex={activeItemIndex}
@@ -162,14 +189,15 @@ export const TreeItem = vui<'div', TreeItemProps>((props, ref) => {
                         iconExpand={iconExpand}
                         key={key ?? index}
                         onClickTreeItem={onClickTreeItem}
+                        propagatedPL={innerListPl}
                         {...props}
                       />
                     )
                   })
                 : items)}
-          </Box>
+          </List>
         )}
-      </Box>
+      </>
     </TreeItemBase>
   )
 })

package/src/tutorial/tutorialCard.tsx

@@ -123,8 +123,10 @@ export function TutorialCard({
             )}
             {!!onAction && (
               <Button mr={6} onClick={onAction} variant="primaryLight">
-                {actionLabel}
-                {onAction}
+                <>
+                  {actionLabel}
+                  {onAction}
+                </>
               </Button>
             )}
           </Box>

package/src/utils/styles.ts

@@ -1,5 +1,7 @@
 import { Property } from 'csstype'
 
+import { colors } from '../theme'
+
 /** Concatenates individual className arguments and returns a single string. */
 export function cs(...classNames: any[]) {
   return classNames.filter(Boolean).join(' ')
@@ -12,10 +14,6 @@ export function parseHSL(color: string) {
   return { h: Number(res?.[0]) || 0, s: Number(res?.[1]) || 0, l: Number(res?.[2]) || 0 }
 }
 
-/** Builds RGBA string. */
-export const buildRGBA = (r: number, g: number, b: number, alpha?: number) =>
-  alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`
-
 /** Converts hex color value to rgb with optional alpha property. */
 export function hexToRGBA(hex: string, alpha?: number) {
   let hexStr = hex
@@ -32,7 +30,18 @@ export function hexToRGBA(hex: string, alpha?: number) {
   const g = parseInt(hexStr.slice(2, 4), 16)
   const b = parseInt(hexStr.slice(4, 6), 16)
 
-  return buildRGBA(r, g, b, alpha)
+  return alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`
+}
+
+export function vuiColorToRGBA(color: string, alpha?: number) {
+  if (!color.includes('.')) return 'transparent'
+
+  const [colorName, shade] = color.split('.')
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const x = parseHSL(colors[colorName][shade])
+  return HSLToRGBA(x.h, x.s, x.l, alpha || shade === 'main' ? 1 : parseInt(shade))
 }
 
 /** Converts hsl color value to rgb with optional alpha property. */
@@ -77,7 +86,7 @@ export function HSLToRGBA(h: number, s: number, l: number, alpha?: number) {
   g = Math.round((g + m) * 255)
   b = Math.round((b + m) * 255)
 
-  return buildRGBA(r, g, b, alpha)
+  return alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`
 }
 
 /** Styling to add ellipsis for long texts. */