v4.0.0

[SiAdcock]

Hi all

I thought this would be a good place to put candidate ideas for v4.0.0 of Source. If you have any others, please share them below. Later, we'll probably invoke some mechanism for determining which of these ideas is most pressing and hence what will actually go into v4.0.0

If you have ideas, please add one post per idea, so we can have a permalink to each idea.

Candidates

• Flatten all Source packages into a single dependency
• Make icon size, space and positioning consistent
• Make radio groups required by default
• Support ref forwarding

[SiAdcock]

The flattening

At present, each component plus foundations is individually installable and upgradable. This was originally intended to add flexibility to how consumers upgrade components.

However, because of the way all the components depend on a fixed version of foundations, it means that upgrading a single component entails upgrading all of them anyway.

To make life easier for developers, we should flatten all the packages down into a single package: @guardian/source

The component and foundations APIs should remain the same, the only difference will be the name of the module from which they would be imported.

So instead of:

import { Button } from ‘@guardian/src-button’
import { TextInput } from ‘@guardian/src-text-input’
import { text } from ‘@guardian/src-foundations/palette’

You would be able to write:

import { Button, TextInput } from ‘@guardian/source’
import { text } from ‘@guardian/source/palette’

Packages would still be individually installable for v4.0.0, but this method would be deprecated.

[SiAdcock]

Icon space, size and positioning

Resize icons to make better use of the space of the viewbox.

Include a consistent “safe area” at the edge of the icon viewbox. This will ensure flexibility for finding the best positioning in a layout.

Reposition icons within the viewbox to provide better balance and positioning when used in conjunction with other icons or inline with text.

[mxdvl]

I think the safe area should be rather small, around a pixel or two. You would only need to go into that space for elements that need to overshoot, such as the tail of a check mark, or a size compensation of a circle—Font Awesome has some clear visual on guidelines.

[SiAdcock]

Radio Groups required by default

Radio groups should be required fields by default. This will make it consistent with other input types.

Radio groups may be flagged as optional. Doing so would add the "Optional" text after the label.

[mxdvl]

I thought radio buttons always had to have a selection. What would be the meaning of an optional radio button? Sara Soueidan published some of her findings on the difference between checkboxes and radio buttons recently.

[SiAdcock]

Support ref forwarding

From #645:

Is your feature request related to a problem? Please describe.
When implementing certain accessibility features, we sometimes need to refer to a specific DOM element (example an input in a form).

The common way to do this in React is to use ref (ex: <div ref={someRef} />). Currently in Source we do not have a way to support refs, as they cannot be spread like other props.

Instead other UI libs have used forwardRef as a way of passing down refs.