Issue/1786 - Text styling on answerOption.valueString (aehrc#1791)

* refactor text styling into separate element and apply to answerOption.valueString

* add story for answerOption.valueString rendering

* add note in changelog

* implement text styling on answerOption.valueString for checkboxes and selects

* fix tests to read autocomplete value from tag instead of textarea/input

* add other answerOption item controls to text styling story

Author: leoniedickson

CHANGELOG.md

@@ -10,6 +10,10 @@ For changelogs of other libraries, please refer to their respective repositories
 
 Changelog only includes changes from version 0.36.0 onwards.
 
+## [1.2.12] - xxxx-xx-xx
+### Added
+- Added support for text styling on answerOption.valueString.
+
 ## [1.2.11] - 2025-10-28
 ### Fixed
 - Fixed an issue where enableWhen items are not initialising when a filled form is passed into `buildForm()`.

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/CheckboxOptionList.tsx

@@ -20,6 +20,7 @@ import type { QuestionnaireItemAnswerOption, QuestionnaireResponseItemAnswer } f
 import CheckboxSingle from '../ItemParts/CheckboxSingle';
 import { isOptionDisabled } from '../../../utils/choice';
 import { deepEqual } from 'fast-equals';
+import StyledText from '../ItemParts/StyledText';
 
 interface CheckboxOptionListProps {
   options: QuestionnaireItemAnswerOption[];
@@ -70,7 +71,10 @@ function CheckboxOptionList(props: CheckboxOptionListProps) {
             <CheckboxSingle
               key={option.valueString}
               value={option.valueString}
-              label={option.valueString}
+              label={
+                <StyledText textToDisplay={option.valueString} element={option._valueString} />
+              }
+              labelText={option.valueString}
               readOnly={readOnly}
               disabledViaToggleExpression={optionDisabledViaToggleExpression}
               fullWidth={fullWidth}

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceRadioSingle.tsx

@@ -22,7 +22,7 @@ import { StandardRadio } from '../../Radio.styles';
 
 interface ChoiceRadioSingleProps {
   value: string;
-  label: string;
+  label: React.ReactNode;
   readOnly: boolean;
   disabledViaToggleExpression: boolean;
   fullWidth: boolean;

packages/smart-forms-renderer/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerOptionFields.tsx

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+import React from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
 import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
 import type {
@@ -28,6 +29,7 @@ import { StyledRequiredTypography } from '../Item.styles';
 import DisplayUnitText from '../ItemParts/DisplayUnitText';
 import ExpressionUpdateFadingIcon from '../ItemParts/ExpressionUpdateFadingIcon';
 import { StandardTextField } from '../Textfield.styles';
+import StyledText from '../ItemParts/StyledText';
 
 interface ChoiceSelectAnswerOptionFieldsProps
   extends PropsWithIsTabledAttribute,
@@ -61,6 +63,12 @@ function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsPro
 
   const { displayUnit, displayPrompt, entryFormat } = renderingExtensions;
 
+  const [inputValue, setInputValue] = React.useState('');
+
+  // Keep track of current selected value when input is changed
+  const [currentValueSelect, setCurrentValueSelect] =
+    React.useState<QuestionnaireItemAnswerOption | null>(valueSelect);
+
   return (
     <>
       <Autocomplete
@@ -70,9 +78,45 @@ function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsPro
         getOptionDisabled={(option) => isOptionDisabled(option, answerOptionsToggleExpressionsMap)}
         getOptionLabel={(option) => getAnswerOptionLabel(option)}
         isOptionEqualToValue={(option, value) => compareAnswerOptionValue(option, value)}
-        onChange={(_, newValue) => onSelectChange(newValue)}
+        onChange={(_, newValue) => {
+          onSelectChange(newValue);
+          setCurrentValueSelect(newValue);
+        }}
+        inputValue={inputValue}
+        onInputChange={(_, newInputValue, reason) => {
+          if (!inputValue && valueSelect && reason !== 'clear') {
+            // Convert current input value to be the current value plus additional input
+            onSelectChange(null);
+            setInputValue(getAnswerOptionLabel(valueSelect) + newInputValue);
+          } else {
+            setInputValue(newInputValue);
+          }
+        }}
+        onBlur={() => {
+          // Set value on blur if there is any current input
+          if (currentValueSelect) {
+            onSelectChange(currentValueSelect);
+            setInputValue(''); // Clear input after blur
+          }
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Backspace') {
+            if (!inputValue && valueSelect) {
+              // Convert current selection to input value on backspace when input is empty
+              onSelectChange(null);
+              setInputValue(getAnswerOptionLabel(valueSelect));
+            }
+          }
+        }}
         autoHighlight
-        sx={{ maxWidth: !isTabled ? textFieldWidth : 3000, minWidth: 160, flexGrow: 1 }}
+        sx={{
+          maxWidth: !isTabled ? textFieldWidth : 3000,
+          minWidth: 160,
+          flexGrow: 1,
+          '& .MuiAutocomplete-tag': {
+            mx: 0
+          }
+        }}
         size="small"
         disabled={readOnly && readOnlyVisualStyle === 'disabled'}
         readOnly={readOnly && readOnlyVisualStyle === 'readonly'}
@@ -93,6 +137,11 @@ function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsPro
                     <DisplayUnitText readOnly={readOnly}>{displayUnit}</DisplayUnitText>
                   </>
                 ),
+                sx: {
+                  '&.MuiOutlinedInput-root.MuiInputBase-sizeSmall .MuiAutocomplete-input': {
+                    paddingLeft: '0px'
+                  }
+                },
                 inputProps: {
                   ...params.inputProps,
                   ...(isTabled
@@ -104,6 +153,40 @@ function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsPro
             }}
           />
         )}
+        renderOption={(optionProps, option) => {
+          const { key, ...rest } = optionProps;
+          return (
+            <li key={key} {...rest}>
+              <span>
+                {option.valueString ? (
+                  <StyledText
+                    textToDisplay={getAnswerOptionLabel(option)}
+                    element={option._valueString}
+                  />
+                ) : (
+                  getAnswerOptionLabel(option)
+                )}
+              </span>
+            </li>
+          );
+        }}
+        renderValue={(value, getItemProps) => {
+          const selectedOption = options.find((opt) => opt.valueString === value.valueString);
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { onDelete, ...rest } = getItemProps();
+          return (
+            <span {...rest}>
+              {value.valueString && selectedOption ? (
+                <StyledText
+                  textToDisplay={getAnswerOptionLabel(value)}
+                  element={selectedOption._valueString}
+                />
+              ) : (
+                getAnswerOptionLabel(value)
+              )}
+            </span>
+          );
+        }}
       />
 
       {feedback ? <StyledRequiredTypography>{feedback}</StyledRequiredTypography> : null}

packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupItemView.tsx

@@ -87,7 +87,7 @@ function GroupItemView(props: GroupItemViewProps) {
   } = props;
 
   // If XHTML has styles, pass them to the GroupItemView so it cna be applied down the tree
-  const xhtmlStyles = useParseXhtml(qItem)?.styles;
+  const xhtmlStyles = useParseXhtml(qItem._text, qItem.text)?.styles;
 
   // Combine parent styles with this group's styles
   const combinedStyles = React.useMemo(() => {

packages/smart-forms-renderer/src/components/FormComponents/ItemParts/CheckboxSingle.tsx

@@ -22,7 +22,8 @@ import { useRendererConfigStore } from '../../../stores';
 
 interface CheckboxSingleProps {
   value: string;
-  label: string;
+  label: React.ReactNode;
+  labelText?: string;
   readOnly: boolean;
   disabledViaToggleExpression: boolean;
   fullWidth: boolean;
@@ -34,6 +35,7 @@ function CheckboxSingle(props: CheckboxSingleProps) {
   const {
     value,
     label,
+    labelText,
     readOnly,
     disabledViaToggleExpression,
     fullWidth,
@@ -80,7 +82,7 @@ function CheckboxSingle(props: CheckboxSingleProps) {
           }}
           slotProps={{
             input: {
-              'aria-label': label ?? 'Unnamed checkbox'
+              'aria-label': (typeof label === 'string' ? label : labelText) ?? 'Unnamed checkbox'
             }
           }}
         />

packages/smart-forms-renderer/src/components/FormComponents/ItemParts/ItemLabel.tsx

@@ -27,8 +27,6 @@ import ItemTextSwitcher from './ItemTextSwitcher';
 import Typography from '@mui/material/Typography';
 import FlyoverItem from './FlyoverItem';
 import type { PropsWithParentStylesAttribute } from '../../../interfaces/renderProps.interface';
-import { structuredDataCapture } from 'fhir-sdc-helpers';
-import { default as parseStyleToJs } from 'style-to-js';
 
 interface ItemLabelProps extends PropsWithParentStylesAttribute {
   qItem: QuestionnaireItem;
@@ -53,10 +51,6 @@ const ItemLabel = memo(function ItemLabel(props: ItemLabelProps) {
   const readOnlyTextColor = readOnlyVisualStyle === 'disabled' ? 'text.disabled' : 'text.secondary';
   const textColor = parentStyles?.color || (readOnly ? readOnlyTextColor : 'text.primary');
 
-  // Get styles from qItem._text
-  const stylesString = structuredDataCapture.getStyle(qItem._text);
-  const itemStyles = stylesString ? parseStyleToJs(stylesString) : {};
-
   return (
     <Box display="flex" alignItems="center" justifyContent="space-between">
       <Box position="relative" display="flex" flexGrow={1} alignItems="center">
@@ -72,8 +66,7 @@ const ItemLabel = memo(function ItemLabel(props: ItemLabelProps) {
           sx={{
             mt: 0.5,
             flexGrow: 1,
-            ...(parentStyles || {}),
-            ...itemStyles
+            ...(parentStyles || {})
           }}>
           {/* Required asterisk position is in front of text */}
           {required && requiredIndicatorPosition === 'start' ? (

packages/smart-forms-renderer/src/components/FormComponents/ItemParts/ItemTextSwitcher.tsx

@@ -1,10 +1,8 @@
 import React, { memo } from 'react';
-import ReactMarkdown from 'react-markdown';
-import { getMarkdownString } from '../../../utils/extensions';
-import { useParseXhtml } from '../../../hooks/useParseXhtml';
 import useDisplayCqfAndCalculatedExpression from '../../../hooks/useDisplayCqfAndCalculatedExpression';
 import type { QuestionnaireItem } from 'fhir/r4';
 import { getItemTextToDisplay } from '../../../utils/itemTextToDisplay';
+import StyledText from './StyledText';
 
 interface ItemTextSwitcherProps {
   qItem: QuestionnaireItem;
@@ -24,29 +22,9 @@ const ItemTextSwitcher = memo(function ItemTextSwitcher({ qItem }: ItemTextSwitc
   const itemTextAriaLabel =
     useDisplayCqfAndCalculatedExpression(qItem, 'item._text.aria-label') ?? undefined;
 
-  // parse XHTML if found
-  const parsedXhtml = useParseXhtml(qItem);
-  if (parsedXhtml) {
-    return <span aria-label={itemTextAriaLabel}>{parsedXhtml.content}</span>;
-  }
-
-  // parse markdown if found
-  const markdownString = getMarkdownString(qItem);
-  if (markdownString) {
-    return (
-      <span aria-label={itemTextAriaLabel}>
-        <ReactMarkdown>{markdownString}</ReactMarkdown>
-      </span>
-    );
-  }
-
-  // labelText is empty, return null
-  if (!itemTextToDisplay) {
-    return null;
-  }
+  const content = <StyledText textToDisplay={itemTextToDisplay} element={qItem._text} />;
 
-  // parse regular text
-  return <span aria-label={itemTextAriaLabel}>{itemTextToDisplay}</span>;
+  return content ? <span aria-label={itemTextAriaLabel}>{content}</span> : null;
 });
 
 export default ItemTextSwitcher;

packages/smart-forms-renderer/src/components/FormComponents/ItemParts/RadioOptionList.tsx

@@ -19,6 +19,7 @@ import React from 'react';
 import ChoiceRadioSingle from '../ChoiceItems/ChoiceRadioSingle';
 import type { QuestionnaireItemAnswerOption } from 'fhir/r4';
 import { isOptionDisabled } from '../../../utils/choice';
+import StyledText from './StyledText';
 
 interface RadioOptionListProps {
   options: QuestionnaireItemAnswerOption[];
@@ -56,7 +57,9 @@ function RadioOptionList(props: RadioOptionListProps) {
             <ChoiceRadioSingle
               key={option.valueString}
               value={option.valueString}
-              label={option.valueString}
+              label={
+                <StyledText textToDisplay={option.valueString} element={option._valueString} />
+              }
               readOnly={readOnly}
               disabledViaToggleExpression={optionDisabledViaToggleExpression}
               fullWidth={fullWidth}

packages/smart-forms-renderer/src/components/FormComponents/ItemParts/StyledText.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import { getMarkdownString } from '../../../utils/extensions';
+import { useParseXhtml } from '../../../hooks/useParseXhtml';
+import type { Element } from 'fhir/r4';
+import { structuredDataCapture } from 'fhir-sdc-helpers';
+import { default as parseStyleToJs } from 'style-to-js';
+
+interface StyledTextProps {
+  textToDisplay: string | null;
+  element: Element | undefined;
+}
+
+function StyledText({ textToDisplay, element }: StyledTextProps) {
+  // parse XHTML if found
+  const parsedXhtml = useParseXhtml(element, textToDisplay);
+  if (parsedXhtml) {
+    return parsedXhtml.content;
+  }
+
+  // parse markdown if found
+  const markdownString = getMarkdownString(element);
+  if (markdownString) {
+    return (
+      <ReactMarkdown
+        components={{
+          p: (props) => <span {...props} />
+        }}>
+        {markdownString}
+      </ReactMarkdown>
+    );
+  }
+
+  // labelText is empty, return null
+  if (!textToDisplay) {
+    return null;
+  }
+
+  const stylesString = structuredDataCapture.getStyle(element);
+  const itemStyles = stylesString ? parseStyleToJs(stylesString) : {};
+
+  // parse regular text
+  return <span style={itemStyles}>{textToDisplay}</span>;
+}
+
+export default StyledText;