v0.18.0

What’s Changed

• fix: export Copy icon (#601) @veej
• Add Cloudflare pages workflow (#596) @gabro

💥 Breaking changes

• Remove illustrations (#599) @veej
• New feedback component (#598) @veej
• Changes to the default theme, config and icons to align them with Figma v2.7 (#597) @veej

Migration guide

In this release, we drastically changed the default appearance of the Bento DS, to provide a more modern look&feel to users who want to use the DS with little or no customizations.
If you were relying on the default Bento settings, you may want to override the changes we applied so that you application will not be impacted.

Default theme

We're providing a completely new default theme. If you were already using your own theme, this change will not affect you. If, instead, you were relying on the defaultTheme.css exported by the library, you may decide to keep the new style or download and use the CSS file attached to this changelog, containing the original default theme.

Icons and illustrations

We decided to completely get rid of Illustrations, since we found they were not so flexible as we thought in the beginning. The Bento DS library is no longer exporting any illustration, and all the props or config entries accepting illustrations have been removed too.
In many cases, you can replace illustrations with icons, or you can work around this limitation by passing the old illustration to the icon prop, as in icon={() => <MyIllustration size={24} kind="outline" />}

Icons have been completely revised too. All the exported icons now include a margin around the actual icon. A few icons have also been renamed:

• IconClose => IconX
• IconCopyLight => IconCopy
• IconEdit => IconPencil
• IconHelp => IconQuestionCircle
• IconIdea => IconLightbulbCircle
• IconInformative => IconInfoCircle
• IconMenu => IconList
• IconPositive => IconPositiveCircle
• IconWarning => IconWarningCircle

Default configuration

We also changed the default configuration for many of the components included in Bento. If you want to keep the same appearance as before, you may want to provide a bento config which overrides the config parameters that have been changed in this version, by setting them to the old value. All the config parameters that changed can be seen in this diff.

Please, note that due to the changes to icons and illustrations, you may not be able to reach the same visual aspect as before, even using the old configurations.
For simplicity, here you can find the config overrides you can apply to reset the configuration to the previous state:

{
  areaLoader: {
    scrimColor: "light",
    readabilityAreaBorderRadius: undefined,
  },
  avatar: {
    width: 40,
    height: 40,
    iconSize: 16,
  },
  banner: {
    titleSize: "small",
    descriptionSize: "small",
    radius: 8,
    closeIconSize: 12,
    semanticIconSize: {
      withoutTitle: 16,
    },
  },
  breadcrumb: {
    separatorSize: 8,
  },
  button: {
    paddingX: {
      small: 8,
      large: 16,
    },
    paddingY: {
      small: 4,
      medium: 8,
    },
    radius: 4,
    internalSpacing: 8,
    iconSize: {
      small: 12,
      medium: 12,
      large: 16,
    },
    uppercaseLabel: true,
  },
  card: {
    defaultRadius: 8,
  },
  chip: {
    paddingX: 8,
    iconSize: 12,
    closeIconSize: 8,
    uppercase: true,
  },
  disclosure: {
    iconSize: {
      1: 16,
    },
  },
  fileUploaderField: {
    buttonKind: "solid",
  },
  input: {
    radius: 4,
    paddingY: 16,
  },
  selectionControl: {
    element: {
      labelPaddingTop: 2,
      checkboxBorderRadius: 4,
    },
  },
  formLayout: {
    form: {
      defaultActionsSize: "large",
    },
  },
  iconButton: {
    radius: 4,
  },
  list: {
    item: {
      borderRadius: 0,
      paddingX: {
        medium: 16,
        large: 16,
      },
      paddingY: {
        large: 16,
      },
      internalSpacing: 16,
      iconSize: {
        trailing: 16,
      },
    },
    spacing: 0,
  },
  menu: {
    paddingX: 0,
    radius: 8,
    headerPaddingX: 16,
    headerPaddingY: 16,
  },
  modal: {
    radius: 8,
    actionsSize: "large",
  },
  navigation: {
    destinationPaddingY: {
      medium: 8,
    },
    iconSize: {
      medium: 16,
      large: 16,
    },
    labelSize: {
      medium: "large",
    },
    activeVisualElement: {
      lineColor: "brandPrimary",
      lineHeight: {
        medium: 2,
        large: 2,
      },
    },
  },
  searchBar: {
    clearIconSize: 12,
    searchIconSize: 16,
  },
  dropdown: {
    radius: 8,
    list: {
      item: {
        borderRadius: 0,
        paddingX: {
          medium: 16,
          large: 16,
        },
        paddingY: {
          large: 16,
        },
        internalSpacing: 16,
        iconSize: {
          trailing: 16,
        },
      },
      spacing: 0,
    },
    defaultMenuSize: "medium",
    openIndicatorIconSize: 16,
    chipColor: "blue",
    chipSpacing: 8,
  },
  table: {
    padding: {
      textCell: undefined,
      textWithIconCell: undefined,
      chipCell: undefined,
      labelCell: undefined,
      linkCell: undefined,
      iconCell: undefined,
      iconButtonCell: undefined,
    },
  },
  toast: {
    paddingX: 16,
    paddingY: 16,
    radius: 8,
    closeIconSize: 12,
  },
  tabs: {
    iconSize: 16,
    notificationSize: 6,
  },
  slider: {
    internalSpacing: 24,
  },
  tooltip: {
    radius: 4,
    labelSize: "medium",
  },
  dateField: {
    radius: 8,
    dayRadius: 4,
  },
}

🔧 Dependency updates

• fix(deps): update dependency prettier to v2.8.8 (#585) @renovate-bot
• fix(deps): update babel monorepo (#584) @renovate-bot
• chore(deps): update dependency @vanilla-extract/css to v1.11.0 (#582) @renovate-bot
• chore(deps): update dependency @types/node to v18.16.14 (#587) @renovate-bot
• chore(deps): update dependency @vanilla-extract/sprinkles to v1.6.0 (#593) @renovate-bot
• chore(deps): update dependency @vanilla-extract/webpack-plugin to v2.2.0 (#594) @renovate-bot
• chore(deps): update dependency css-loader to v6.7.4 (#600) @renovate-bot
• Upgrade sprinkles to 1.6.0 (#595) @gabro