@veracity/vui 2.24.0 → 2.24.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.24.0",
+  "version": "2.24.1",
   "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/label/label.tsx

@@ -20,6 +20,7 @@ export const LabelBase = styled.labelBox`
 /** Displays a paragraph of text. */
 export const Label = vui<'label', LabelProps>((props, ref) => {
   const { children, className, markAsOptional, tooltipText, text, fontSize, ...rest } = omitThemingProps(props)
+  const styles = useStyleConfig('Label', props)
 
   const isOnlyText = text && !markAsOptional && !tooltipText && !children
 
@@ -31,23 +32,17 @@ export const Label = vui<'label', LabelProps>((props, ref) => {
         ) : (
           <>
             <T fontSize={fontSize}>{text}</T>
-            {markAsOptional && (
-              <>
-                {' '}
-                <T fontSize={fontSize} fontWeight={400}>
-                  (optional)
-                </T>
-              </>
+            {!!markAsOptional && (
+              <T fontSize={fontSize} {...styles.helper}>
+                (optional)
+              </T>
             )}
-            {tooltipText && (
-              <>
-                {' '}
-                <T fontSize={fontSize} fontWeight={400}>
-                  <Tooltip text={tooltipText}>
-                    <Icon mb={fontSize === 'xs' ? '-6px' : '-5px'} name="falInfoCircle" role="button" size="sm" />
-                  </Tooltip>
-                </T>
-              </>
+            {!!tooltipText && (
+              <T fontSize={fontSize} {...styles.helper}>
+                <Tooltip text={tooltipText}>
+                  <Icon mb={fontSize === 'xs' ? '-6px' : '-5px'} name="falInfoCircle" role="button" size="sm" />
+                </Tooltip>
+              </T>
             )}
           </>
         ))}

package/src/label/theme.ts

@@ -1,4 +1,9 @@
-const baseStyle = {}
+const baseStyle = {
+  helper: {
+    ml: '8px',
+    fontWeight: 400,
+  },
+}
 
 const defaultProps = {}
 
@@ -6,9 +11,12 @@ const sizes = {}
 
 const variants = {}
 
+const parts = ['helper']
+
 export default {
   baseStyle,
   defaultProps,
+  parts,
   sizes,
   variants,
 }