cchaos

Writing styles with Emotion

EUI uses Emotion when writing CSS-in-JS styles. A general knowledge of writing CSS is enough in most cases, but there are some JavaScript-related differences that can result in unintended output. Similarly, there are feaures that don't exist in CSS of which we like to take advantage.

File patterns

/* {component name}.styles.ts */
import { css } from '@emotion/react';

cchaos

This gist creates a universal function that allows focus outlines to match the currently focused element and displays the outline only when the user is navigating via keyboard.

Tabbing between the two examples show the first with a simple text-color outline, the second with a wider blue outline. Clicking the buttons with a mouse shows no outline.

cchaos

Logical properties

Logical CSS properties enable UI's to support directional writing-modes. These utilities provide a few helpers to convert certain directional properties to logical properties.

logicalStyle(property, value)

Returns a style object of the logical CSS property version for the given property: value pair. Most useful for places like React style properties that require the camelCase version of property keys.

cchaos

import React from 'react';
import { ExclusiveUnion } from '../common';

/**
 * 1. Use the EUI provided ExclusiveUnion to separate unique props.
 */
type _RestrictedProps = ExclusiveUnion<
  {
    /**
     * 2. At least one of the unique props must be required, usually the one containing more options

cchaos

import chroma from 'chroma-js';
import { Theme, StyleConfig } from '../../services/propagate/create_style';

const $euiCallOutTypes = {
  primary: 'euiColorPrimary',
  success: 'euiColorSuccess',
  warning: 'euiColorWarning',
  danger: 'euiColorDanger',
};

cchaos

Images/Icons inside buttons

<button>
   <svg aria-hidden="true" focusable="false">
     <path d="..." />
   </svg>
   <span class="callout">Big</span>
   Sale!

cchaos

"editor.tokenColorCustomizations": {
        "[Atom One Dark]": {
            "textMateRules": [
                {
                    "name": "Variable Parameter",
                    "scope": [
                        "variable.parameter"
                    ],
                    "settings": {
                        "foreground": "#D0A4DB"

cchaos

Examples of Arrays and Objects

Array

const array1 = ["This", "is", "an", "array"];

Object

const object = {