adding more values

Author: LFDanLu

packages/dev/s2-docs/pages/s2/Reference.mdx

@@ -16,12 +16,20 @@ Reference table for the properties and values supported by React Spectrum `style
 
 ## Colors
 
+TODO: do we just want the table or preserve the same formatting as the styling guide?
+
 All Spectrum 2 color tokens are available across color properties (e.g., `backgroundColor`, `color`, `borderColor`).
 
 <S2Colors />
 
+Below are the rest of the `style` macro supported color properties.
+
+<StyleMacroProperties properties={getPropertyDefinitions(['outlineColor', 'fill', 'stroke'])} />
+
 ## Spacing
 
+TODO: decide what to do with Spacing/Sizing since they are pretty much rolled up into Dimensions?
+
 Spacing props like `margin` and `padding` accept values on a **4px grid**. These are specified in `px` and get converted to `rem`. In addition to numbers, these named options are available:
 
 - `edge-to-text` – default spacing between the edge of a control and its text. Relative to control height.
@@ -38,6 +46,7 @@ Size props like `width` and `height` accept arbitrary pixel values. Values are c
 ## Text
 
 // TODO: edit copy
+
 Spectrum 2 typography is applied via the `font` shorthand, which sets `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, and `color`. You can override any of these individually.
 
 ```tsx
@@ -55,8 +64,12 @@ Type scales include: UI, Body, Heading, Title, Detail, and Code. Each scale has
 <S2Typography />
 
 
+<StyleMacroProperties properties={getPropertyDefinitions(['fontFamily', 'listStyleType', 'listStylePosition'])} />
+
+
 ## Effects
 
+<StyleMacroProperties properties={getPropertyDefinitions(['boxShadow', 'filter'])} />
 
 ## Layout
 

packages/dev/s2-docs/src/styleProperties.ts

@@ -11,11 +11,20 @@
  */
 
 interface StyleMacroPropertyDefinition {
-  type: 'mapped' | 'percentage' | 'sizing' | 'arbitrary',
+  // TODO: unneeded for now
+  type: 'color' | 'mapped' | 'percentage' | 'sizing' | 'arbitrary',
+  // Values tied to the property, usually manually defined for now
   values: string[],
+  // Additional value types to append, usually used to add type links to generalize a type that
+  // the property extends aka a css length percentage or a number that needs more explaination
   additionalTypes?: string[]
 }
 
+// properties that extend from baseColors
+const baseColorProperties = new Set([
+  'color', 'backgroundColor', 'borderColor', 'outlineColor', 'fill', 'stroke'
+])
+
 // Properties that use PercentageProperty (accept LengthPercentage in addition to mapped values)
 const percentageProperties = new Set([
   'top', 'left', 'bottom', 'right',
@@ -32,15 +41,59 @@ const sizingProperties = new Set([
 ]);
 
 // manually defined
+// TODO: maybe spit these up into groups, and have getPropertyDefinitions grab via category name instead
 const propertyValues: {[key: string]: string[]} = {
+  // Color
+  // This should append baseColors in getPropertyDefinition
+  outlineColor: ['focus-ring'],
+  // This should append what seems to be a combination of semantic colors and background/global colors
+  fill: ['none', 'currentColor'],
+  stroke: ['none', 'currentColor'],
+
+
   display: ['block', 'inline-block', 'inline', 'flex', 'inline-flex', 'grid', 'inline-grid', 'contents', 'list-item', 'none'],
   top: ['0', '2', '4', '8', '12', '16', '20', '24', '28', '32', '36', '40', '44', '48', '56', '64', '80', '96', '-2', '-4', '-8', '-12', '-16', '-20', '-24', '-28', '-32', '-36', '-40', '-44', '-48', '-56', '-64', '-80', '-96', 'auto', 'full'],
-  height: ['auto', 'full', 'min', 'max', 'fit', 'screen']
+  height: ['auto', 'full', 'min', 'max', 'fit', 'screen'],
+
+
+  // text
+  fontFamily: ['sans', 'serif', 'code'],
+  // todo: skipped font-size, font-weight, line height though these will also just be manually defined here
+  listStyleType: ['none', 'disc', 'decimal'],
+  listStylePosition: ['inside', 'outside'],
+  textTransform: ['uppercase', 'lowercase', 'capitalize', 'none'],
+  textAlign: ['start', 'center', 'end', 'justify'],
+  verticalAlign: ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super'],
+  textDecoration: ['none' , 'underline' , 'overline' , 'line-through'],
+
+  textOverflow: ['ellipsis', 'clip'],
+  lineClamp: ['number'],
+  hyphens: ['none', 'manual', 'auto'],
+  whiteSpace: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'],
+  textWrap: ['wrap', 'nowrap', 'balance', 'pretty'],
+  wordBreak: ['normal', 'break-all', 'keep-all', 'break-word'],
+  overflowWrap: ['normal', 'anywhere', 'break-word'],
+  boxDecorationBreak: ['slice', 'clone'],
+
+  // effects
+  // TODO: should the below have a typelink explaining more details
+  boxShadow: ['emphasized', 'elevated', 'dragged', 'none'],
+  filter: ['emphasized', 'elevated', 'dragged', 'none'],
+
 };
 
+// TODO: will we need something specific for short hand?
 export function getPropertyDefinition(propertyName: string): StyleMacroPropertyDefinition {
   const values = propertyValues[propertyName] || [];
 
+  if (baseColorProperties.has(propertyName)) {
+    return {
+      type: 'color',
+      values,
+      additionalTypes: ['baseColors']
+    }
+  }
+
   if (sizingProperties.has(propertyName)) {
     return {
       type: 'sizing',

packages/dev/s2-docs/src/types.tsx

@@ -696,7 +696,7 @@ function TemplateLiteral({elements}: TTemplate) {
 }
 
 interface StyleMacroPropertyDefinition {
-  type: 'mapped' | 'percentage' | 'sizing' | 'arbitrary',
+  type: 'color' | 'mapped' | 'percentage' | 'sizing' | 'arbitrary',
   values: string[],
   additionalTypes?: string[]
 }
@@ -705,6 +705,7 @@ interface StyleMacroPropertiesProps {
   properties: {[propertyName: string]: StyleMacroPropertyDefinition}
 }
 
+// TODO: fix the width of the columns so that they are consistent
 export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) {
   let propertyNames = Object.keys(properties);
 
@@ -740,6 +741,11 @@ export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) {
                     <React.Fragment key={`type-${i}`}>
                       <Punctuation>{' | '}</Punctuation>
                       <TypePopover name={typeName}>
+                        {typeName === 'baseColors' && (
+                          <p className={style({font: 'body'})}>
+                            A base set of colors defined by Spectrum. See the global and semantic colors in the color reference above.
+                          </p>
+                        )}
                         {typeName === 'LengthPercentage' && (
                           <p className={style({font: 'body'})}>
                             A CSS length value with percentage or viewport units. Examples: <code className={codeStyle}>'50%'</code>, <code className={codeStyle}>'100vw'</code>, <code className={codeStyle}>'50vh'</code>