@veracity/vui 2.24.0-beta.4 → 2.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.24.0-beta.4",
+  "version": "2.24.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/range/range.tsx

@@ -5,21 +5,17 @@ import { styled, useStyleConfig, vui } from '../core'
 import { Tooltip } from '../tooltip'
 import { cs, filterUndefined } from '../utils'
 import { rangeColors } from './consts'
-import { RangeProps } from './range.types'
+import { RangeProps, RangeTrackKey } from './range.types'
 
 const SliderBase = styled(ReactSlider)`
   width: 100%;
   height: 4px;
   cursor: pointer;
   transition-duration: '0s';
-
-  &[aria-disabled='true'] * {
-    pointer-events: none !important;
-    color: yellow;
-    background-color: yellow;
-  }
 `
 
+const defaultFormatter = (value: string) => `${value}`
+
 /** Implements a range input. */
 export const Range = vui<'div', RangeProps>((props, ref) => {
   const {
@@ -33,6 +29,7 @@ export const Range = vui<'div', RangeProps>((props, ref) => {
     step = 1,
     showTooltip = false,
     showValue = false,
+    formatter = defaultFormatter,
     onChange,
     ...rest
   } = props
@@ -47,9 +44,13 @@ export const Range = vui<'div', RangeProps>((props, ref) => {
   const getTrackColor = (trackProps: any) => {
     const { key } = trackProps
 
-    if (isSingleValue) return key === 'track-0' ? mainColor : rangeColors.track
+    if (isSingleValue) return key === RangeTrackKey.First ? mainColor : rangeColors.track
 
-    return key === 'track-2' ? rangeColors.track : key === 'track-1' ? mainColor : rangeColors.track
+    return key === RangeTrackKey.Third
+      ? rangeColors.track
+      : key === RangeTrackKey.Second
+        ? mainColor
+        : rangeColors.track
   }
 
   const Thumb = (props: any, state: any) => {
@@ -57,7 +58,7 @@ export const Range = vui<'div', RangeProps>((props, ref) => {
       <Box className="vui-range-thumb" {...styles.thumb} borderColor={mainColor} {...props}>
         {showValue && (
           <Box center className="vui-range-thumb-value" {...styles.thumbValue}>
-            {state.valueNow}
+            {formatter(state.valueNow)}
           </Box>
         )}
       </Box>
@@ -65,7 +66,7 @@ export const Range = vui<'div', RangeProps>((props, ref) => {
     return showValue ? (
       content
     ) : (
-      <Tooltip text={state.valueNow} visible={showTooltip}>
+      <Tooltip disabled={disabled} text={formatter(state.valueNow)} visible={showTooltip}>
         {content}
       </Tooltip>
     )
@@ -104,4 +105,5 @@ export const Range = vui<'div', RangeProps>((props, ref) => {
   )
 })
 
+Range.displayName = 'Range'
 export default Range

package/src/range/range.types.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react'
+
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
@@ -23,6 +25,14 @@ export type RangeProps = SystemProps &
     showTooltip?: boolean
     /** Whether to show the current value bellow the thumb. @default false */
     showValue?: boolean
+    /** Function used to format the display value. */
+    formatter?: (value: string) => string
     /** Callback function that is called when the value changes. */
     onChange?: (value: RangeValue) => void
   }
+
+export enum RangeTrackKey {
+  First = 'track-0',
+  Second = 'track-1',
+  Third = 'track-2',
+}

package/src/tooltip/consts.ts

@@ -1,6 +1,9 @@
 export const pointerSize = 12
 
-export const bg = 'darkBlue.18'
+export const bg = {
+  regular: 'darkBlue.18',
+  disabled: 'sandstone.55',
+}
 
 export const borderRaduis = 1
 

package/src/tooltip/tooltip.tsx

@@ -23,6 +23,7 @@ export const Tooltip = (props: TooltipProps) => {
     maxWidth = '400px',
     text = 'Tooltip',
     placement = 'top',
+    disabled = false,
     visible = false,
   } = props
 
@@ -32,10 +33,10 @@ export const Tooltip = (props: TooltipProps) => {
     <Tippy
       content={
         !!text && (
-          <TooltipContent fontSize={fontSize} maxWidth={maxWidth}>
+          <TooltipContent disabled={disabled} fontSize={fontSize} maxWidth={maxWidth}>
             {isDesktop && (
               <Box
-                bg={bg}
+                bg={disabled ? bg.disabled : bg.regular}
                 bottom={pointerPlacement[placement].bottom}
                 h={`${pointerSize}px`}
                 left={pointerPlacement[placement].left}

package/src/tooltip/tooltip.types.ts

@@ -20,6 +20,8 @@ export interface TooltipProps extends ChildrenProp {
     | 'left'
     | 'left-start'
     | 'left-end'
+  /** Sets correspondent disabled styling */
+  disabled?: boolean
   /** Sets maximum width to the tooltip body. */
   maxWidth?: string
   /** Link text that will be concatenated to the end of the tooltip text. */

package/src/tooltip/tooltipContent.tsx

@@ -4,9 +4,9 @@ import Box from '../box'
 import { bg, borderRaduis, boxShadow } from './consts'
 import { TooltipProps } from './tooltip.types'
 
-export const TooltipContent = ({ children, fontSize = '16px', maxWidth = '400px' }: TooltipProps) => (
+export const TooltipContent = ({ children, disabled, fontSize = '16px', maxWidth = '400px' }: TooltipProps) => (
   <Box
-    bg={bg}
+    bg={disabled ? bg.disabled : bg.regular}
     borderRadius={borderRaduis}
     boxShadow={boxShadow}
     className="vui-tooltip-content"