Component roadmap

[connor-baer]

Based on an internal document which should be treated as the source of truth.

Deprecated

These components will likely be removed in the next major version.

• CreditCardDetails: should be replaced by the new card widget
• HtmlElement: should be replaced by Emotion 10’s as prop
• Markdown
• MaskedInput: just a re-export of react-text-mask
• Picture
• SideNav: should be replaced by Sidebar

Under review

These components are stable, but might have breaking changes in the next major version.

• Button: some of its responsibility should be moved to a link component (Add Link component and component context #466)
• GlobalStyles: remove support for custom styles (to discourage wrong usage) + rename to BaseStyles
• ListView: rename to CardList
• SvgButton: rename to IconButton
• Calendar: rename to DatePicker + consolidate components under one parent API
• Card Schemes, InfoIcon: should be moved to a separate icons package Extract icons into a separate package #528
• Message, NotificationBanner, NotificationList: rename and group with other notification components feat(components): rename notification components #541
• Header: needs a more specific name

Experimental

These components are not stable and will likely have breaking changes in the next major version.

• Pagination: review the API and test with different use cases + check accessibility
• AutoCompleteTags

[fernandofleury]

Is this the moment for us to also cleanup the default margin from some of our components? Such as the Input. Right now we are using the noMargin prop.

[connor-baer]

This could be the time. We should do some research on how other component libraries handle this and have a separate discussion about it.

I have an idea on how to apply spacing using Emotion 10's css prop with "mixins":

// @sumup/circuit-ui/src/styles/shared.js
import { css } from '@emotion/core';

const spacing = (theme, size = 'kilo', direction = 'bottom') => css`
  margin-${direction}: ${theme.spacings[size]};
`;

// app/src/components/ButtonWithMargin.js 
import { css } from '@emotion/core';
import styled from '@emotion/styled';
import { Button, sharedStyles } from '@sumup/circuit-ui';

const ButtonWithMargin = props => (
  <Button css={theme => sharedStyles.spacing(theme)}>Example</Button>
);

// or

const buttonStyles = ({ theme }) => css`
  sharedStyles.spacing(theme);
  color: red;
`;

const StyledButton = styled(Button)(buttonStyles);

Essentially, the "mixins" would be a way to apply shared styles without needing additional elements, such as <Spacing />. I'm not happy with the ergonomics yet, but we could iterate on it. Maybe the mixins could be part of the theme?

[fernandofleury]

I was thinking about providing actually both.

We need to extend Spacing to support multiples of the gutter, or a custom value, media query based values.

[connor-baer]

Ah, interesting thought! 👍

I'm gonna schedule a roadmap meeting for Circuit UI soon, let's continue the discussion then.

[connor-baer]

I've opened RFCs for the grid (#535) and spacing (#534).

[connor-baer]

This issue has been superseded by the other issues mentioned above.