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

v0.17.4

What’s Changed

• add publishing to GitHub registry (#589) @veej

🐞 Bug fixes

• Avoid merging JSX.Elements in config (#592) @veej

🔧 Dependency updates

• chore(deps): update dependency @types/babel__traverse to v7.18.5 (#562) @renovate-bot
• chore(deps): update actions/add-to-project action to v0.5.0 (#574) @renovate-bot
• fix(deps): update dependency react-markdown to v8.0.7 (#576) @renovate-bot
• chore(deps): update dependency postcss to v8.4.23 (#575) @renovate-bot
• chore(deps): update dependency @types/node to v18.16.4 (#563) @renovate-bot

v0.17.3

What’s Changed

• DateField - allow the selection of specific weekdays and disable the other weekdays (#586) @federico-ercoles
• Support overflowing text in Typography components (#567) @federico-ercoles
• Bug: SelectField HTML value not set correctly (#565) @federico-ercoles

🔧 Dependency updates

• chore(deps): update react monorepo (#573) @renovate-bot
• Remove usage of react-use (#569) @gabro
• chore(deps): update dependency webpack to v5.76.3 (#560) @renovate-bot
• fix(deps): update dependency react-markdown to v8.0.6 (#561) @renovate-bot
• chore(deps): update dependency @vanilla-extract/babel-plugin to v1.2.0 (#564) @renovate-bot
• chore(deps): update dependency @types/react to v18.0.29 (#559) @renovate-bot

🧹 Chores

• improve turborepo config (#570) @veej

v0.17.2

What’s Changed

• Add more form-related props to Button. Add onKeyDown and onKeyUp to TextField and TextArea. (#551) @bvkimball
• Generate .d.cts files alongside .d.ts files. (#555) @gabro
• Better SSR support (#548) @gabro
• Export default defaultMessages for the English language (#553) @gabro

🔧 Dependency updates

• chore(deps): update dependency style-loader to v3.3.2 (#556) @renovate-bot
• chore(deps): update dependency webpack to v5.76.2 (#557) @renovate-bot
• chore(deps): update dependency @testing-library/react to v13.4.0 (#546) @renovate-bot
• chore(deps): update dependency @testing-library/user-event to v14.4.3 (#547) @renovate-bot
• chore(deps): update dependency @testing-library/dom to v8.20.0 (#545) @renovate-bot
• chore(deps): update dependency webpack to v5.76.0 [security] (#550) @renovate-bot

📚 Documentation

• Add alternativeNames and relatedComponents to ComponentDoc (#554) @gabro

v0.17.1

🐞 Bug fixes

• Downgrade sprinkles to v1.4.1 (to solve #540) (#542) @gabro

v0.17.0

What’s Changed

💥 Breaking changes

• Add support for ESM (#529) @gabro

Migration guide

For users of ESM-aware bundlers, you will need to update the CSS imports as follows

-import "@buildo/bento-design-system/lib/index.css";
+import "@buildo/bento-design-system/index.css";

🔧 Dependency updates

• fix(deps): update dependency playroom to v0.29.0 (#525) @renovate-bot
• fix(deps): update dependency react-markdown to v8.0.5 (#538) @renovate-bot
• chore(deps): update dependency postcss to v8.4.21 (#528) @renovate-bot
• chore(deps): update actions/add-to-project action to v0.4.1 (#539) @renovate-bot

v0.16.4

What’s Changed

• DateField - Limit year options (#531) @federico-ercoles
• Select field mode (#530) @federico-ercoles
• Add config to FileUploaderField to customise button and allow external control of loading status (#533) @federico-ercoles
• fix(docs): Fix typos in Quick Start > Project Structure section (#534) @arabello
• Expand ButtonLink and Menu (#520) @federico-ercoles

🔧 Dependency updates

• chore(deps): update react monorepo (#536) @renovate-bot
• chore(deps): update storybook monorepo to v6.5.16 (#537) @renovate-bot

v0.16.3

What’s Changed

• Expand modal and chip config (#519) @federico-ercoles

v0.16.2

What’s Changed

• Expand config and props of List/ListItem (#518) @federico-ercoles
• Fix hard-coded empty cell padding for Table (#515) @federico-ercoles

🔧 Dependency updates

• Update dependency husky to v8.0.3 (#517) @renovate-bot
• Update dependency @types/react to v18.0.27 (#516) @renovate-bot

v0.16.1

What’s Changed

• Allow interactive rows on Table (#512) @gabro
• Allow separate config of paddingX and paddingY for IconButton (#511) @federico-ercoles
• Allow config of cells and headers padding for Table (#508) @federico-ercoles
• Allow configuring icon position in Button (#510) @gabro
• Allow configuring actions size in Modal (#509) @gabro

🐞 Bug fixes

• Fix arrow position when Tooltip is auto-positioned to the left (#514) @gabro