utilities - focusMixin

import { focusMixin } from '@sky-uk/ui-core';

The focusMixin is a mixin designed to help apply focus styles consistently across components.

It applies an :after pseudo-element that has a rounded and offset outline style.

position: relative must be set on the consuming parent as the focus mixin uses position: absolute.

outline: none should be set on the consuming parent to unset the browsers default styling.

function Example() {
  const MyComponent = styled.div`
    background: ${color('grey10')};
    border-radius: ${radius(1)};
    margin-bottom: ${spacing(4)};
    height: 100px;
    width: 100px;

    // Required
    outline: none;
    position: relative;

    ${focusMixin({ radius: 1 })}
  `;

  return <MyComponent $focused={true} />;
}

By default, the mixin assumes $focused is being set via props.

<MyComponent $focused={true} />

If you would like this to appear on keyboard focus, the following should be added to the consuming parent's styles:

&:focus::after {
  opacity: 1;
}

Arguments

appearance

• primary (default)
• light

radius

(See Radius)

${focusMixin({ appearance: 'light', radius: 4 })}