Implementation

Implementation requirements and workflows for consuming Prism components

Props

Props Inherited from Material UI

Since Prism components are built on the Material UI React Library, if there are props you don't see documented, check the MUI docs for more inherited ones.

Also note that sometimes Prism components are built on different Material UI components (for example, Search is primarily based on MUI's Autocomplete).

If there are props you need that don't exsist for certain use cases, please reach out to a Prism team member.

Error Handling

Input, TextField, Search, and Select

1. User gives/gets focus
2. User doesn't set the value correctly
3. On blur, the component gets:
   1. An error looking appearance (usually set with the error prop)
   2. Error text explaining the reason for the error (usually set with the errorText prop)
4. User corrects the error:
   1. before blur, both error states are removed

Styling

Generally, styling should be handled with any available prop on a given component such as gutterBottom.

With few exceptions, all other styling should be handled with the Emotion library. The examples below demonstrate the most common use cases where you leverage the tagged template syntax or object literal syntax to create an element, add styling, and then Emotion returns a React component that can even accept props and other advanced styling needs.

import styled from '@emotion/styled';

const Container = styled.ul`
  display: flex;
  justify-content: space-between;
  padding: 2rem;
`;

render(
    ...
    <Container>
      // Your other React components and elements here
    </Container>
);

import styled from '@emotion/styled';

const Button = styled.button(
  {
    color: 'darkorchid'
  },
  props => ({
    fontSize: props.fontSize
  })
);

render(
  <Button fontSize={16}>
    This is a darkorchid button.
  </Button>
);

export const TotalsTitleWrapper = styled('div', {
  shouldForwardProp: (prop) => prop !== 'widget',
})<{ widget?: boolean }>(({ widget }) => ({
  fontSize: '56px',
  fontWeight: 800,
  paddingRight: '15px',
  display: 'flex',
  ...(widget && {
    fontSize: '36px',
    top: '8px',
    position: 'relative',
    paddingRight: undefined,
  }),
}));

Regardless of your implementation preference, Emotion also allows you to accept props in a few different ways, media queries, nested selectors, etc.

Spacing & Sizing

By design, and for consistency, all spacing and sizing (such as margin, padding, font-size, etc) is made up of 8 pixels units.

Since our root font-size is 16px, you can use 1rem === 16px, 0.5rem === 8px, 1.5rem === 24px, etc for setting font sizes.

However, for accessibility reasons, do not use rem or em units for other things like margin, padding, etc.

Modifying Other Prism Component Styles

Aside from width and spacing, there should never be a reason to modify a Prism component's style. If you believe there needs to be an exception or feature update, contact a Prism developer or Prism designer before making any workarounds.