Core

Introduction

Core (previously “System”) encompasses all of the component modifiers. This function could be used across a wide range of Sky UI components. We also expose all of these modifiers through the system modifier function. This function can be used to build your own custom components while ensuring they align not only with branding, but also how the Sky UI components are built. Most of these modifiers correspond to native attributes supported by browsers.

Core Usage

Sky UI Core components are already pre-configured to use relevant system modifiers provided by the library. This will allow you to customise the usage of the component within the remits of the system. The example below shows how we have used our ‘spacing’ modifiers to apply ‘margin-top’ to our button components.

import React from 'react';
import { Button } from '@sky-uk/ui-core';

export const MyPattern = () => (
  <Button $variant="primary" $marginTop={4}>
    Button
  </Button>
);

Each Sky UI component includes documentation on modifiers they support. This information can be found within the React page under each component.

Using System Modifiers

System modifiers are applied by using the ‘applyModifierProps’ function provided by Sky UI. This function allows you to specify which modifiers you want to support for your components. For instance, in this example, we want to support standard width parameters, as well as to apply the same spacing rules as with other Sky UI components. By specifying these system modifiers as such we can now apply margin properties to ‘MyComponent’ like we would with the Sky UI Button, and other components that support this modifier.

import styled from 'styled-components';
import { color, applyModifierProps } from '@sky-uk/ui-core';

export const MyComponent = styled.div`
  background-color: ${color(primary)};
  ${applyModifierProps({
    system: ['margin', 'padding', 'width'];
  })}
`;