Space

Style a component's space properties

import { space } from 'jynx'

The space function gives you control of a component's space styles, providing support both for margin and padding shorthand properties and all related sub-properties including margin-top, margin-bottom, padding-left, padding-right, etc.

Usage

To use the space function, create a component using the SpaceProps type and include the function within it's style argument.

/* Import the function and its corresponding props type */
import { space, SpaceProps } from 'jynx'


/* Then define a component with the type and include the 
 function within its style argument */
export const Component = styled.div<SpaceProps>`
    ${space}
  `

/* Or using the legacy functional syntax */
export const Component = styled.div<SpaceProps>((props) => `
    ${space}
  `)

Props

By default, when passing a string to any space props, the raw css value is used. This means you can define space styles however you normally would:

<Component padding='4px 6px' />

For all space props, numeric values can also be passed.

when a space scale is defined as an array, numbers between 0 and space.length are used as an index
when a space scale is not defined, the original number is used
negative numbers will return negative values
in all instances, numeric values are converted to a px string where necessary

Additionally, any standard named values (inherit, initial, etc) are available to use, and when using typescript, will show up as suggestions in your IDE.

Theming

You can also create a space scale within your theme, which is then accessible from all space props.

This can be defined as any valid scale type and the values will be shown as suggestions in your IDE.

/* simple array-based scale */
export const theme = {
  space: [2, 4, 8, 12, 16, 24, 32, 48, 64, 72]
}

/* simple object-based scale */
export const theme = {
  space: {
    extraSmall: '0.25rem',
    small: '0.5rem',
    medium: '1rem',
    large: '2rem',
    extraLarge: '4rem'
  }
}

Types

When working in typescript, use the SpaceProps interface to provide reliable type definitions for your components and value suggestions in your IDE.

interface SpaceProps {
  margin?: StyleProp<OneOrMany<CSS.Property.Margin<string | 0 | number> | ThemeValue<'space'>>>
  marginTop?: StyleProp<CSS.Property.MarginTop<string | 0 | number> | ThemeValue<'space'>>
  marginRight?: StyleProp<CSS.Property.MarginRight<string | 0 | number> | ThemeValue<'space'>>
  marginBottom?: StyleProp<CSS.Property.MarginBottom<string | 0 | number> | ThemeValue<'space'>>
  marginLeft?: StyleProp<CSS.Property.MarginLeft<string | 0 | number> | ThemeValue<'space'>>
  marginBlock?: StyleProp<OneOrMany<CSS.Property.MarginBlock<string | 0 | number> | ThemeValue<'space'>>>
  marginBlockStart?: StyleProp<CSS.Property.MarginBlockStart<string | 0 | number> | ThemeValue<'space'>>
  marginBlockEnd?: StyleProp<CSS.Property.MarginBlockEnd<string | 0 | number> | ThemeValue<'space'>>
  marginInline?: StyleProp<OneOrMany<CSS.Property.MarginInline<string | 0 | number> | ThemeValue<'space'>>>
  marginInlineStart?: StyleProp<CSS.Property.MarginInlineStart<string | 0 | number> | ThemeValue<'space'>>
  marginInlineEnd?: StyleProp<CSS.Property.MarginInlineEnd<string | 0 | number> | ThemeValue<'space'>>
  padding?: StyleProp<OneOrMany<CSS.Property.Padding<string | 0 | number> | ThemeValue<'space'>>>
  paddingTop?: StyleProp<CSS.Property.PaddingTop<string | 0 | number> | ThemeValue<'space'>>
  paddingRight?: StyleProp<CSS.Property.PaddingRight<string | 0 | number> | ThemeValue<'space'>>
  paddingBottom?: StyleProp<CSS.Property.PaddingBottom<string | 0 | number> | ThemeValue<'space'>>
  paddingLeft?: StyleProp<CSS.Property.PaddingLeft<string | 0 | number> | ThemeValue<'space'>>
  paddingBlock?: StyleProp<OneOrMany<CSS.Property.PaddingBlock<string | 0 | number> | ThemeValue<'space'>>>
  paddingBlockStart?: StyleProp<CSS.Property.PaddingBlockStart<string | 0 | number> | ThemeValue<'space'>>
  paddingBlockEnd?: StyleProp<CSS.Property.PaddingBlockEnd<string | 0 | number> | ThemeValue<'space'>>
  paddingInline?: StyleProp<OneOrMany<CSS.Property.PaddingInline<string | 0 | number> | ThemeValue<'space'>>>
  paddingInlineStart?: StyleProp<CSS.Property.PaddingInlineStart<string | 0 | number> | ThemeValue<'space'>>
  paddingInlineEnd?: StyleProp<CSS.Property.PaddingInlineEnd<string | 0 | number> | ThemeValue<'space'>>
}

API

The space function allows for a number of props to be passed to your component from directly within your jsx / tsx. Select props also have shorthand aliases that can be used for a more concise syntax.

Prop	Shorthand	CSS Property	Theme Scale
margin	m	margin	space
marginTop	mt	margin-top	space
marginRight	mr	margin-right	space
marginBottom	mb	margin-bottom	space
marginLeft	ml	margin-left	space
marginBlock	mbl	margin-block	space
marginBlockStart	mbs	margin-block-start	space
marginBlockEnd	mbe	margin-block-end	space
marginInline	mi	margin-inline	space
marginInlineStart	mis	margin-inline-start	space
marginInlineEnd	mie	margin-inline-end	space
padding	p	padding	space
paddingTop	pt	padding-top	space
paddingRight	pr	padding-right	space
paddingBottom	pb	padding-bottom	space
paddingLeft	pl	padding-left	space
paddingBlock	pbl	padding-block	space
paddingBlockStart	pbs	padding-block-start	space
paddingBlockEnd	pbe	padding-block-end	space
paddingInline	pi	padding-inline	space
paddingInlineStart	pis	padding-inline-start	space
paddingInlineEnd	pie	padding-inline-end	space

Examples

/* using plain CSS values */
<Component padding='4px 6px' />


/* using shorthand aliases */
<Component mt='1rem' />


/* with a theme scale defined */
/* `theme.space[1]` */
<Component pl={1} />

/* `theme.space.small` */
<Component mr='small' />


/* based on a conditional */
<Component mb={isLastChild ? '12px' : '0px'} />


/* using responsive styles */
<Component mbl={['20px', null, 'auto']} />

<Component marginBlock={{ _: '20px', md: 'auto' }} />


/* using responsive styles with theme scales */
<Component ml={[2, 3, null, 5]} />

<Component paddingBottom={{_: 'extraSmall', sm: 'medium' xl: 'large'}} />