sumup-oss/circuit-ui

Remove default component margins

Closed this issue · 1 comments

Component to amend

Typography and form components: Headline, SubHeadline, Body, List, Input, Select, Checkbox, Toggle, Selector

Context

Default component margins were deprecated in v2.4.

The migration strategy was defined as follows:

  1. Implement the new spacing helpers as described above.
  2. Any Circuit UI components that have external spacing should have a noMargin prop to remove this spacing.
  3. Whenever a component is used without the noMargin prop, a deprecation warning should be logged. This way, developers can track down the components that rely on the built-in spacing and replace it with custom styles or a style helper.
  4. In the end, all components will have a redundant noMargin prop. This can easily be removed with a codemod once we fully remove the built-in spacing in a major version.

Points 1, 2, and 3 were addressed in v2.4.

In v5, finding that many developers were still unknowingly using the default margins because they didn't notice the deprecation warnings, components were made to throw runtime errors when the noMargin prop wasn't set. The prop was also marked required in TypeScript prop types.

Acceptance criteria (for lack of a better headline name idea)

In v6, we will address the migration strategy's point 4, and finish the migration away from default component margins.

  • remove all default spacing, noMargin props and related deprecation logic
  • add codemod (Eslint rule) for removing all (now unnecessary) noMargin props

Closed by #1759 (don't know why GitHub didn't do that)