Function control

packages/@react-spectrum/s2/src/style-utils.ts:288–341

(options: ControlOptions)

 * The text can optionally wrap, aligning the icon with the first line of text.
 */
export function control(options: ControlOptions): ControlResult {
  let paddingX = options.shape === 'pill' ? ('pill' as const) : ('edge-to-text' as const);
  let result: ControlResult = {
    font: controlFont(),
    display: 'flex',
    alignItems: 'center',
    boxSizing: 'border-box',
    paddingX: paddingX,
    minWidth: controlSize()
  };

  if (options.shape === 'pill') {
    result.borderRadius = 'pill';
  } else {
    Object.assign(result, controlBorderRadius());
  }

  if (options.icon) {
    result.columnGap = 'text-to-visual';
    result.paddingX = {
      default: paddingX,
      [iconOnly]: 0
    };
    result['--iconMargin'] = {
      type: 'marginStart',
      value: {
        default: fontRelative(-2),
        [iconOnly]: 0
      }
    };
  }

  if (options.wrap) {
    result.minHeight = controlSize();

    if (options.icon) {
      result.paddingY = 0;
      result['--labelPadding'] = {
        type: 'paddingTop',
        value: centerPadding()
      };
      result.alignItems = {
        default: 'baseline',
        [iconOnly]: 'center'
      };
    } else {
      result.paddingY = centerPadding();
    }
  } else {
    result.height = controlSize();
  }

  return result;
}

const allowedOverrides = [
  'margin',