Repository: adobe/react-spectrum
File: packages/dev/s2-docs/src/VisualExampleClient.tsx (TypeScript)

Code before:
      }} />
  );
}

function PlacementControl({control, value, onChange}) {
  return (
    <Wrapper control={control} styles={style({gridColumnStart: 1, gridColumnEnd: -1})}>
      <ListBox
        aria-label={control.name}
        layout="grid"
        selectionMode="single"
        disallowEmptySelection
        selectedKeys={[value]}
        onSelectionChange={keys => onChange([...keys][0])}
        className=""
        style={{
          display: 'grid',
          gridTemplateAreas: `
            ".  ts tc te . "
            "st .  .  .  et"
            "sc .  .  .  ec"
            "sb .  .  .  eb"
            ".  bs bc be . "
          `,
          gridTemplateColumns: '25px 24px 24px 25px 24px',
          gridTemplateRows: '25px 24px 24px 25px 24px'
        }}>
        <PlacementControlItem id="top start" style={{gridArea: 'ts'}} />
        <PlacementControlItem id="top" style={{gridArea: 'tc'}} />
        <PlacementControlItem id="top end" style={{gridArea: 'te'}} />
        <PlacementControlItem id="start top" style={{gridArea: 'st'}} />
        <PlacementControlItem id="end top" style={{gridArea: 'et'}} />
        <PlacementControlItem id="start" style={{gridArea: 'sc'}} />
        <PlacementControlItem id="end" style={{gridArea: 'ec'}} />
        <PlacementControlItem id="start bottom" style={{gridArea: 'sb'}} />
        <PlacementControlItem id="end bottom" style={{gridArea: 'eb'}} />
        <PlacementControlItem id="bottom start" style={{gridArea: 'bs'}} />
        <PlacementControlItem id="bottom" style={{gridArea: 'bc'}} />
        <PlacementControlItem id="bottom end" style={{gridArea: 'be'}} />
      </ListBox>
    </Wrapper>
  );
}

function PlacementControlItem(props) {
  return (
    <ListBoxItem
      {...props}
      aria-label={props.id}
      className={style({
        ...focusRing(),

Review comment (suggestion):
Can't we use an array of numbers here and the style macro will do this automatically?


```suggestion
          gridTemplateRows: [25, 24, 24, 25, 24]
```

Code after:
      }} />
  );
}

function PlacementControl({control, value, onChange}) {
  return (
    <Wrapper control={control} styles={style({gridColumnStart: 1, gridColumnEnd: -1})}>
      <ListBox
        aria-label={control.name}
        layout="grid"
        selectionMode="single"
        disallowEmptySelection
        selectedKeys={[value]}
        onSelectionChange={keys => onChange([...keys][0])}
        className=""
        style={{
          display: 'grid',
          gridTemplateAreas: `
            ".  ts tc te . "
            "st .  .  .  et"
            "sc .  .  .  ec"
            "sb .  .  .  eb"
            ".  bs bc be . "
          `,
          gridTemplateColumns: 'calc(25px * var(--s2-scale)) calc(24px * var(--s2-scale)) calc(24px * var(--s2-scale)) calc(25px * var(--s2-scale)) calc(24px * var(--s2-scale))',
          gridTemplateRows: 'calc(25px * var(--s2-scale)) calc(24px * var(--s2-scale)) calc(24px * var(--s2-scale)) calc(25px * var(--s2-scale)) calc(24px * var(--s2-scale))'
        }}>
        <PlacementControlItem id="top start" style={{gridArea: 'ts'}} />
        <PlacementControlItem id="top" style={{gridArea: 'tc'}} />
        <PlacementControlItem id="top end" style={{gridArea: 'te'}} />
        <PlacementControlItem id="start top" style={{gridArea: 'st'}} />
        <PlacementControlItem id="end top" style={{gridArea: 'et'}} />
        <PlacementControlItem id="start" style={{gridArea: 'sc'}} />
        <PlacementControlItem id="end" style={{gridArea: 'ec'}} />
        <PlacementControlItem id="start bottom" style={{gridArea: 'sb'}} />
        <PlacementControlItem id="end bottom" style={{gridArea: 'eb'}} />
        <PlacementControlItem id="bottom start" style={{gridArea: 'bs'}} />
        <PlacementControlItem id="bottom" style={{gridArea: 'bc'}} />
        <PlacementControlItem id="bottom end" style={{gridArea: 'be'}} />
      </ListBox>
    </Wrapper>
  );
}

function PlacementControlItem(props) {
  return (
    <ListBoxItem
      {...props}
      aria-label={props.id}
      className={style({
        ...focusRing(),