ds-controls.js

static propertyControls: PropertyControls = {
  text: { type: ControlType.String, title: 'Text' },
  fontSize: {
    type: ControlType.FusedNumber,
    toggleKey: 'fontPerBP',
    toggleTitles: ['Font', 'Font per BP'],
    valueKeys: ['font1', 'font2', 'font3', 'font4'],
    valueLabels: theme.breakpoints.map(s => s.replace('px', '')),
    min: 0,
    title: 'Font Size',
  },
  color: {
    type: ControlType.Enum,
    options: ['text.0', 'text.1', 'text.2', 'text.3'],
    optionTitles: ['Black', 'Grey', 'Light Grey', 'Dark Grey'],
  },
  margin: {
    type: ControlType.FusedNumber,
    toggleKey: 'marginPerSide',
    toggleTitles: ['Margin', 'Margin per Side'],
    valueKeys: ['mt', 'mr', 'mb', 'ml'],
    valueLabels: ['T', 'R', 'B', 'L'],
    min: 0,
    title: 'Margin',
  },
  padding: {
    type: ControlType.FusedNumber,
    toggleKey: 'paddingPerSide',
    toggleTitles: ['Padding', 'Padding per Side'],
    valueKeys: ['mt', 'mr', 'mb', 'ml'],
    valueLabels: ['T', 'R', 'B', 'L'],
    min: 0,
    title: 'Padding',
  },
};