+ {/* for color and backgroundColor, skip values list and render disclosures directly since the contents of the disclosures cover the mapped values */}
+ {(() => {
+ if (propertyName === 'color') {
+ return (
+
+
+ {styleMacroValueDesc['baseColors'].body}
+
+ );
+ }
+ if (propertyName === 'backgroundColor') {
+ return (
+
+
+ {styleMacroValueDesc['baseColors'].body}
+
+ );
+ }
+ return (
+
+
Values
+
+ {values.map((value, i) => {
+ let content;
+ if (links[value]) {
+ content = (
+
+ {value}
+
+ );
+ } else if (value === 'baseColors') {
+ content = {value};
+ } else {
+ content = '{value}';
+ }
+
+ return (
+
+ {i > 0 && {' | '}}
+ {content}
+
+ );
+ })}
+ {/* for additional types properties (e.g. properties that have negative spacing or accept number/length percentage) we add them to the end */}
+ {propDef.additionalTypes && propDef.additionalTypes.map((typeName, i) => {
+ return (
+
+ {(values.length > 0 || i > 0) && {' | '}}
+ {typeName}
+
+ );
+ })}
+
+
+ );
+ })()}
+ {values.map((value, i) => {
+ let valueDesc = styleMacroValueDesc[value];
+ // special case handling for font and spacing specific value descriptions so they don't get rendered for
+ // other properties that may include the same values (e.g. heading in Colors)
+ // skip baseColors here as it will be rendered after
+ let shouldShowDescription = false;
+ if (value === 'fontSize' && (propertyName === 'fontSize' || propertyName === 'font')) {
+ shouldShowDescription = true;
+ } else if (['ui', 'heading', 'title', 'body', 'detail', 'code'].includes(value) && propertyName === 'lineHeight') {
+ shouldShowDescription = true;
+ } else if (['text-to-control', 'text-to-visual', 'edge-to-text', 'pill'].includes(value)) {
+ shouldShowDescription = true;
+ }
+
+ if (shouldShowDescription && (valueDesc?.description || valueDesc?.body)) {
+ return (
+
+
+
+ '{value}'
+
+
+ {valueDesc.description && (
+
+ {valueDesc.description}
+
)}
-
- ))}
- {propDef.additionalTypes && propDef.additionalTypes.map((typeName, i) => {
- let typeLink = styleMacroTypeLinks[typeName];
- return (
-
- {(values.length > 0 || i > 0) && {' | '}}
- {/* eslint-disable-next-line no-nested-ternary */}
- {typeLink ? (
- // only if the type link has a description and/or body do we want to render the type popover
- // this is to make things like baseColor
- typeLink.link && !typeLink.description && !typeLink.body ? (
- {typeName}
- ) : (
-
- )
- ) : undefined}
-
- );
- })}
-
-
- {hasMapping && (
-
+ {valueDesc.body}
+
+ );
+ }
+ return null;
+ })}
+ {/* show S2Typography for "fontSize" property and "font" shorthand specificatlly */}
+ {(propertyName === 'fontSize' || propertyName === 'font') && (
+
+ )}
+ {/* for other color property names show baseColors description since the value list is displayed still */}
+ {values.includes('baseColors') && styleMacroValueDesc['baseColors'] && (propertyName !== 'color' && propertyName !== 'backgroundColor') && (
+
+ {styleMacroValueDesc['baseColors'].description && (
+
+ {styleMacroValueDesc['baseColors'].description}
+
+ )}
+ {styleMacroValueDesc['baseColors'].body}
+
+ )}
+ {/* for the types that have descriptions, we add them below with the associated descriptions and/or mappings */}
+ {propDef.additionalTypes && propDef.additionalTypes.map((typeName, i) => {
+ let typeLink = styleMacroValueDesc[typeName];
+ if (typeLink?.description || typeLink?.body) {
+ // dont render the type name for properties that only have one special value (e.g. baseSpacing) that has an associated description
+ // so that we don't double up on rendering the value name
+ let shouldSkipTypeName = values.length === 0 && propDef.additionalTypes?.length === 1;
+
+ return (
+
+ {!shouldSkipTypeName && (
+
+
+ {typeName}
+
+
+ )}
+ {typeLink.description && (
+
+ {typeLink.description}
+
+ )}
+ {typeLink.body}
+
+ );
+ }
+ return null;
+ })}
+ {propDef.mapping && (
+
+
Maps to
- {propDef.mapping?.map((mappedProp, i) => (
+ {propDef.mapping.map((mappedProp, i) => (
{i > 0 && {', '}}
{mappedProp}
))}
-
+
)}
-
- {propDef.description && (
-
- {propDef.description}
-
- )}
-
- );
- })}
-
-