@veracity/vui 2.32.0 → 2.33.2

package/src/t/theme.ts

@@ -17,16 +17,56 @@ const sizes = {
   lg: {
     fontSize: 'lg',
   },
+
+  breadcrumb_xs: {
+    fontSize: 'xs',
+    lineHeight: '16px',
+  },
+  breadcrumb_sm: {
+    fontSize: 'sm',
+    lineHeight: '18px',
+  },
+  breadcrumb_md: {
+    fontSize: 'md',
+    lineHeight: '20px',
+  },
+  breadcrumb_lg: {
+    fontSize: 'lg',
+    lineHeight: '22px',
+  },
+
+  label_sm: {
+    fontSize: '12px',
+    lineHeight: '16px',
+  },
+  label_md: {
+    fontSize: '14px',
+    lineHeight: '18px',
+  },
+  label_lg: {
+    fontSize: '16px',
+    lineHeight: '20px',
+  },
+
+  caption_sm: {
+    fontSize: '14px',
+    lineHeight: '20px',
+  },
+  caption_xs: {
+    fontSize: '12px',
+    lineHeight: '18px',
+  },
 }
 
 const variants = {
   label: {
-    fontSize: 'md',
     fontWeight: 'demi',
   },
   caption: {
-    fontSize: 'sm',
-    fontWeight: 'medium',
+    fontWeight: '400',
+  },
+  breadcrumb: {
+    fontWeight: '400',
   },
 }
 

package/src/table/tableSortIcon.tsx

@@ -1,27 +1,41 @@
-import { useStyleConfig, vui } from '../core'
+import Box from '../box'
+import { vui } from '../core'
 import { Icon } from '../icon'
 import { cs } from '../utils'
-import { useTableContext } from './context'
 import type { TableSortIconProps } from './table.types'
 
 /** Displays a sort icon with given direction based on sort order. */
 export const TableSortIcon = vui<'svg', TableSortIconProps>((props, ref) => {
-  const { className, order, ...rest } = props
-  const styles = useStyleConfig('Table', useTableContext())
-  const rotate = order === 'asc' ? 180 : 0
-  const pathFill = order ? ['seaBlue.main', 'sandstone.main'] : 'sandstone.main'
+  const { className, order } = props
+  const activeColor = 'seaBlue.main'
+  const inactiveColor = 'sandstone.85'
+
+  const icons = [
+    {
+      color: order === 'asc' ? activeColor : inactiveColor,
+    },
+    {
+      color: order === 'desc' ? activeColor : inactiveColor,
+    },
+  ]
 
   return (
-    <Icon
-      className={cs('vui-tableSortIcon', className)}
-      name="uiSort"
-      pathFill={pathFill}
-      ref={ref}
-      rotate={rotate}
-      size="xs"
-      {...styles.tableSortIcon}
-      {...rest}
-    />
+    <Box ref={ref} column alignItems="center" justifyItems="center" ml="8px">
+      <Icon
+        className={cs('vui-tableSortIcon--top', className)}
+        name={'uiCaretUp'}
+        color={icons[0].color}
+        size="xs"
+        mb="-4px"
+      />
+      <Icon
+        className={cs('vui-tableSortIcon--bottom', className)}
+        name={'uiCaretDown'}
+        color={icons[1].color}
+        size="xs"
+        mt="-4px"
+      />
+    </Box>
   )
 })
 

package/src/tooltip/tooltip.tsx

@@ -8,6 +8,14 @@ import { bg, pointerPlacement, pointerSize } from './consts'
 import type { TooltipProps } from './tooltip.types'
 import { TooltipContent } from './tooltipContent'
 
+const stripHtmlTags = (html: string): string => {
+  const withoutTags = html.replace(/<[^>]*>/g, '')
+  // Decode HTML entities
+  const textarea = document.createElement('textarea')
+  textarea.innerHTML = withoutTags
+  return textarea.value
+}
+
 /**
  * A simple text popup hint.
  *
@@ -27,6 +35,8 @@ export const Tooltip = (props: TooltipProps) => {
     disabled = false,
     visible = false,
     offset = [0, 2],
+    whiteSpace = 'pre-wrap',
+    wordBreak = 'break-word',
   } = props
 
   const isDesktop = useUp('md')
@@ -35,7 +45,14 @@ export const Tooltip = (props: TooltipProps) => {
     <Tippy
       content={
         !!text && (
-          <TooltipContent disabled={disabled} fontSize={fontSize} maxWidth={maxWidth} minWidth={minWidth}>
+          <TooltipContent
+            disabled={disabled}
+            fontSize={fontSize}
+            maxWidth={maxWidth}
+            minWidth={minWidth}
+            whiteSpace={whiteSpace}
+            wordBreak={wordBreak}
+          >
             {isDesktop && (
               <Box
                 bg={disabled ? bg.disabled : bg.regular}
@@ -50,7 +67,7 @@ export const Tooltip = (props: TooltipProps) => {
               />
             )}
             <v.div>
-              {text}
+              {stripHtmlTags(text)}
               {!!linkText && (
                 <>
                   &nbsp;

package/src/tooltip/tooltip.types.ts

@@ -33,4 +33,8 @@ export interface TooltipProps extends ChildrenProp {
   /** Keeping the tooltip always visible @default false  */
   visible?: boolean
   offset?: [number, number]
+  /** CSS white-space property @default 'pre-wrap' */
+  whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces'
+  /** CSS word-break property @default 'break-all' */
+  wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word'
 }

package/src/tooltip/tooltipContent.tsx

@@ -8,6 +8,8 @@ export const TooltipContent = ({
   fontSize = '16px',
   maxWidth = '400px',
   minWidth,
+  whiteSpace = 'pre-wrap',
+  wordBreak = 'break-word',
 }: TooltipProps) => (
   <Box
     bg={disabled ? bg.disabled : bg.regular}
@@ -22,7 +24,8 @@ export const TooltipContent = ({
     overflowY="auto"
     p={1}
     px={2}
-    whiteSpace="pre-wrap"
+    whiteSpace={whiteSpace}
+    wordBreak={wordBreak}
   >
     {children}
   </Box>