add resize and outline css props (#62)

Author: Matt Shwery

README.md

@@ -186,6 +186,7 @@ All of these CSS properties are support. You can pass either a string or a numbe
 * `minWidth`
 * `opacity`
 * `order`
+* `outline`
 * `overflow`
 * `overflowX`
 * `overflowY`
@@ -201,6 +202,7 @@ All of these CSS properties are support. You can pass either a string or a numbe
 * `placeSelf`
 * `pointerEvents`
 * `position`
+* `resize`
 * `right`
 * `rowGap`
 * `textAlign`
@@ -313,14 +315,14 @@ By default `ui-box` does not ensure that urls use safe protocols when passed to
 ```js
 import { configureSafeHref } from 'ui-box'
 configureSafeHref({
-  enabled: true, 
+  enabled: true,
 })
 ```
 ```js
 import { configureSafeHref } from 'ui-box'
 configureSafeHref({
   enabled: true
-  origin: 'https://app.segmentio.com', 
+  origin: 'https://app.segmentio.com',
 })
 ```
 

src/enhancers/index.ts

@@ -9,8 +9,10 @@ import * as interaction from './interaction'
 import * as layout from './layout'
 import * as list from './list'
 import * as opacity from './opacity'
+import * as outline from './outline'
 import * as overflow from './overflow'
 import * as position from './position'
+import * as resize from './resize'
 import * as spacing from './spacing'
 import * as text from './text'
 import * as transform from './transform'
@@ -29,8 +31,10 @@ export {
   layout,
   list,
   opacity,
+  outline,
   overflow,
   position,
+  resize,
   spacing,
   text,
   transform,
@@ -49,8 +53,10 @@ export const propTypes: PropTypesMapping = {
   ...layout.propTypes,
   ...list.propTypes,
   ...opacity.propTypes,
+  ...outline.propTypes,
   ...overflow.propTypes,
   ...position.propTypes,
+  ...resize.propTypes,
   ...spacing.propTypes,
   ...text.propTypes,
   ...transform.propTypes,
@@ -71,8 +77,10 @@ export const propAliases: PropAliases = {
   ...layout.propAliases,
   ...list.propAliases,
   ...opacity.propAliases,
+  ...outline.propAliases,
   ...overflow.propAliases,
   ...position.propAliases,
+  ...resize.propAliases,
   ...spacing.propAliases,
   ...text.propAliases,
   ...transform.propAliases,
@@ -91,8 +99,10 @@ export const propValidators: PropValidators = {
   ...layout.propValidators,
   ...list.propValidators,
   ...opacity.propValidators,
+  ...outline.propValidators,
   ...overflow.propValidators,
   ...position.propValidators,
+  ...resize.propValidators,
   ...spacing.propValidators,
   ...text.propValidators,
   ...transform.propValidators,
@@ -111,8 +121,10 @@ export const propEnhancers: PropEnhancers = {
   ...layout.propEnhancers,
   ...list.propEnhancers,
   ...opacity.propEnhancers,
+  ...outline.propEnhancers,
   ...overflow.propEnhancers,
   ...position.propEnhancers,
+  ...resize.propEnhancers,
   ...spacing.propEnhancers,
   ...text.propEnhancers,
   ...transform.propEnhancers,

src/enhancers/outline.ts

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types'
+import getCss from '../get-css'
+import { PropEnhancerValueType, PropValidators, PropEnhancers, PropTypesMapping } from '../types/enhancers'
+
+export const propTypes: PropTypesMapping = {
+  outline: PropTypes.string
+}
+
+export const propAliases = {}
+
+export const propValidators: PropValidators = { }
+
+const outline = {
+  className: 'otln',
+  cssName: 'outline',
+  jsName: 'outline',
+  complexValue: true
+}
+
+export const propEnhancers: PropEnhancers = {
+  outline: (value: PropEnhancerValueType) => getCss(outline, value)
+}

src/enhancers/resize.ts

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types'
+import getCss from '../get-css'
+import { PropEnhancerValueType, PropValidators, PropEnhancers, PropTypesMapping } from '../types/enhancers'
+
+export const propTypes: PropTypesMapping = {
+  resize: PropTypes.string
+}
+
+export const propAliases = {}
+
+export const propValidators: PropValidators = { }
+
+const resize = {
+  className: 'rsz',
+  cssName: 'resize',
+  jsName: 'resize'
+}
+
+export const propEnhancers: PropEnhancers = {
+  resize: (value: PropEnhancerValueType) => getCss(resize, value)
+}

src/types/enhancers.ts

@@ -100,6 +100,7 @@ type CssProps = Pick<
   | 'minWidth'
   | 'opacity'
   | 'order'
+  | 'outline'
   | 'overflow'
   | 'overflowX'
   | 'overflowY'
@@ -113,6 +114,7 @@ type CssProps = Pick<
   | 'placeSelf'
   | 'pointerEvents'
   | 'position'
+  | 'resize'
   | 'right'
   | 'rowGap'
   | 'textAlign'

test/snapshots/box.tsx.md

@@ -9,7 +9,7 @@ Generated by [AVA](https://ava.li).
 > DOM
 
     <div
-      className="ub-algn-cnt_center ub-algn-itms_center ub-algn-slf_center ub-bg_169mlyl ub-bg-blnd-md_multiply ub-bg-clp_padding-box ub-bg-clr_red ub-bg-img_181xl07 ub-bg-orgn_border-box ub-bg-pos_center ub-bg-rpt_no-repeat ub-bg-siz_cover ub-b-btm_1px-solid-black ub-b-lft_1px-solid-black ub-b-rgt_1px-solid-black ub-b-top_1px-solid-black ub-b-btm-clr_red ub-bblr_5px ub-bbrr_5px ub-b-btm-stl_dashed ub-b-btm-wdt_2px ub-b-lft-clr_red ub-b-rgt-clr_red ub-b-top-clr_red ub-b-lft-stl_dashed ub-b-lft-wdt_2px ub-btlr_5px ub-btrr_5px ub-b-rgt-stl_dashed ub-b-rgt-wdt_2px ub-b-top-stl_dashed ub-b-top-wdt_2px ub-btm_10px ub-bs_1yidkis ub-box-szg_border-box ub-clr_both ub-clearfix ub-color_blue ub-col-gap_3px ub-crsr_pointer ub-dspl_flex ub-flx_1 ub-flx-basis_10px ub-flx-drct_column ub-flx-flow_column-wrap ub-flx-grow_1 ub-flx-srnk_1 ub-flx-wrap_wrap ub-flt_left ub-fnt_foz7o3 ub-fnt-fam_1bil31i ub-fnt-sze_14px ub-fnt-stl_italic ub-f-vari_small-caps ub-f-wght_bold ub-gap_3px ub-grd_1lsuugy ub-grd-ara_15fp4eo ub-grd-ato-col_1mp9azz ub-grd-ato-flw_row-dense ub-grd-ato-row_1mp9azz ub-grd-col_1i1wt59 ub-grd-col-end_span-3 ub-grd-col-gap_3px ub-grd-col-str_span-3 ub-grd-gap_3px ub-grd-row_1i1wt59 ub-grd-row-end_span-3 ub-grd-row-gap_3px ub-grd-row-str_span-3 ub-grd-tmp_1b7k023 ub-grd-tmp-ara_1s7jr1l ub-grd-tmp-col_2czdni ub-grd-tmp-row_2czdni ub-h_100px ub-just-cnt_center ub-just-items_center ub-just-self_center ub-lft_10px ub-ltr-spc_0-4em ub-ln-ht_1-2 ub-ls_1j8swju ub-ls-img_iu2jf4 ub-ls-pos_inside ub-ls-typ_lower-greek ub-mb_10px ub-ml_10px ub-mr_10px ub-mt_10px ub-max-h_100prcnt ub-max-w_100prcnt ub-min-h_100px ub-min-w_100px ub-opct_1 ub-order_1 ub-ovflw-x_auto ub-ovflw-y_auto ub-pb_10px ub-pl_10px ub-pr_10px ub-pt_10px ub-plc-cnt_center-center ub-plc-items_center-center ub-plc-self_center-center ub-ptr-evts_auto ub-pst_relative ub-rgt_10px ub-row-gap_3px ub-txt-algn_right ub-txt-deco_underline-dotted ub-txt-ovrf_ellipsis ub-txt-shdw_1kcg6ht ub-txt-trns_capitalize ub-top_10px ub-tfrm_yf7huz ub-tfrm-orgn_tkeb9y ub-tstn_7vzx02 ub-tstn-dly_ru3mkq ub-tstn-drn_i11nm5 ub-tstn-pty_ayd6f0 ub-tstn-tf_r9onko ub-usr-slct_none ub-vsblt_visible ub-wht-spc_nowrap ub-w_10ae43h ub-wrd-brk_normal ub-wrd-wrp_break-word ub-z-idx_1"
+      className="ub-algn-cnt_center ub-algn-itms_center ub-algn-slf_center ub-bg_169mlyl ub-bg-blnd-md_multiply ub-bg-clp_padding-box ub-bg-clr_red ub-bg-img_181xl07 ub-bg-orgn_border-box ub-bg-pos_center ub-bg-rpt_no-repeat ub-bg-siz_cover ub-b-btm_1px-solid-black ub-b-lft_1px-solid-black ub-b-rgt_1px-solid-black ub-b-top_1px-solid-black ub-b-btm-clr_red ub-bblr_5px ub-bbrr_5px ub-b-btm-stl_dashed ub-b-btm-wdt_2px ub-b-lft-clr_red ub-b-rgt-clr_red ub-b-top-clr_red ub-b-lft-stl_dashed ub-b-lft-wdt_2px ub-btlr_5px ub-btrr_5px ub-b-rgt-stl_dashed ub-b-rgt-wdt_2px ub-b-top-stl_dashed ub-b-top-wdt_2px ub-btm_10px ub-bs_1yidkis ub-box-szg_border-box ub-clr_both ub-clearfix ub-color_blue ub-col-gap_3px ub-crsr_pointer ub-dspl_flex ub-flx_1 ub-flx-basis_10px ub-flx-drct_column ub-flx-flow_column-wrap ub-flx-grow_1 ub-flx-srnk_1 ub-flx-wrap_wrap ub-flt_left ub-fnt_foz7o3 ub-fnt-fam_1bil31i ub-fnt-sze_14px ub-fnt-stl_italic ub-f-vari_small-caps ub-f-wght_bold ub-gap_3px ub-grd_1lsuugy ub-grd-ara_15fp4eo ub-grd-ato-col_1mp9azz ub-grd-ato-flw_row-dense ub-grd-ato-row_1mp9azz ub-grd-col_1i1wt59 ub-grd-col-end_span-3 ub-grd-col-gap_3px ub-grd-col-str_span-3 ub-grd-gap_3px ub-grd-row_1i1wt59 ub-grd-row-end_span-3 ub-grd-row-gap_3px ub-grd-row-str_span-3 ub-grd-tmp_1b7k023 ub-grd-tmp-ara_1s7jr1l ub-grd-tmp-col_2czdni ub-grd-tmp-row_2czdni ub-h_100px ub-just-cnt_center ub-just-items_center ub-just-self_center ub-lft_10px ub-ltr-spc_0-4em ub-ln-ht_1-2 ub-ls_1j8swju ub-ls-img_iu2jf4 ub-ls-pos_inside ub-ls-typ_lower-greek ub-mb_10px ub-ml_10px ub-mr_10px ub-mt_10px ub-max-h_100prcnt ub-max-w_100prcnt ub-min-h_100px ub-min-w_100px ub-opct_1 ub-order_1 ub-otln_iu2jf4 ub-ovflw-x_auto ub-ovflw-y_auto ub-pb_10px ub-pl_10px ub-pr_10px ub-pt_10px ub-plc-cnt_center-center ub-plc-items_center-center ub-plc-self_center-center ub-ptr-evts_auto ub-pst_relative ub-rsz_none ub-rgt_10px ub-row-gap_3px ub-txt-algn_right ub-txt-deco_underline-dotted ub-txt-ovrf_ellipsis ub-txt-shdw_1kcg6ht ub-txt-trns_capitalize ub-top_10px ub-tfrm_yf7huz ub-tfrm-orgn_tkeb9y ub-tstn_7vzx02 ub-tstn-dly_ru3mkq ub-tstn-drn_i11nm5 ub-tstn-pty_ayd6f0 ub-tstn-tf_r9onko ub-usr-slct_none ub-vsblt_visible ub-wht-spc_nowrap ub-w_10ae43h ub-wrd-brk_normal ub-wrd-wrp_break-word ub-z-idx_1"
       contentEditable={true}
     />
 
@@ -315,6 +315,9 @@ Generated by [AVA](https://ava.li).
     .ub-order_1 {␊
       order: 1;␊
     }␊
+    .ub-otln_iu2jf4 {␊
+      outline: none;␊
+    }␊
     .ub-ovflw-x_auto {␊
       overflow-x: auto;␊
     }␊
@@ -348,6 +351,9 @@ Generated by [AVA](https://ava.li).
     .ub-pst_relative {␊
       position: relative;␊
     }␊
+    .ub-rsz_none {␊
+      resize: none;␊
+    }␊
     .ub-rgt_10px {␊
       right: 10px;␊
     }␊
@@ -696,6 +702,9 @@ Generated by [AVA](https://ava.li).
     .ub-opct_inherit {␊
       opacity: inherit;␊
     }␊
+    .ub-otln_inherit {␊
+      outline: inherit;␊
+    }␊
     .ub-ovflw-x_inherit {␊
       overflow-x: inherit;␊
     }␊
@@ -717,6 +726,9 @@ Generated by [AVA](https://ava.li).
     .ub-top_inherit {␊
       top: inherit;␊
     }␊
+    .ub-rsz_inherit {␊
+      resize: inherit;␊
+    }␊
     .ub-mb_inherit {␊
       margin-bottom: inherit;␊
     }␊
@@ -1092,6 +1104,9 @@ Generated by [AVA](https://ava.li).
     .ub-opct_initial {␊
       opacity: initial;␊
     }␊
+    .ub-otln_initial {␊
+      outline: initial;␊
+    }␊
     .ub-ovflw-x_initial {␊
       overflow-x: initial;␊
     }␊
@@ -1113,6 +1128,9 @@ Generated by [AVA](https://ava.li).
     .ub-top_initial {␊
       top: initial;␊
     }␊
+    .ub-rsz_initial {␊
+      resize: initial;␊
+    }␊
     .ub-mb_initial {␊
       margin-bottom: initial;␊
     }␊

test/snapshots/box.tsx.snap

@@ -110,6 +110,7 @@ export default () => {
       minWidth={100}
       opacity={1}
       order={1}
+      outline="none"
       overflow="auto"
       overflowX="auto"
       overflowY="auto"
@@ -125,6 +126,7 @@ export default () => {
       placeSelf="center center"
       pointerEvents="auto"
       position="relative"
+      resize="none"
       right={10}
       rowGap={3}
       textAlign="right"