@vtex/admin-ui-theme - npm Package Compare versions

Comparing version 0.1.0-rc.0 to 0.1.0-rc.1

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+# [0.1.0-rc.1](https://github.com/vtex/onda/compare/@vtex/admin-ui-theme@0.1.0-rc.0...@vtex/admin-ui-theme@0.1.0-rc.1) (2020-11-04)
+
+
+### Features
+
+* **input:** add Input component ([9d2fe30](https://github.com/vtex/onda/commit/9d2fe305e9a88980e13e3e05d2f235e730d4c070))
+* **text-field:** add TextField component ([89c2764](https://github.com/vtex/onda/commit/89c27643988363beb80b57e06d25ad05cca300da))
+
+
+
+
+
 # 0.1.0-rc.0 (2020-11-04)
@@ -8,0 +20,0 @@

package.json

 {
   "name": "@vtex/admin-ui-theme",
-  "version": "0.1.0-rc.0",
+  "version": "0.1.0-rc.1",
   "main": "dist/index.js",
@@ -41,3 +41,3 @@ "module": "dist/admin-ui-theme.esm.js",
   },
-  "gitHead": "a02683bc9a0f0c37fd46d31ff70776cef5c1f9a8"
+  "gitHead": "9344ad58b2d36648065820894521c47f3079f36c"
 }

src/config/components/input.ts

 import { colors } from '../base'
 
-export default {
+const inputStyle = {
   fontVariationSettings: '"wght" 92',
   width: 'full',
   height: 48,
-  paddingX: 4,
   borderStyle: 'solid',
   borderWidth: 1,
+  paddingLeft: 3,
+  paddingRight: 4,
   borderColor: 'muted.3',
@@ -19,8 +20,134 @@ borderRadius: 'default',
   ':hover': {
-    borderColor: 'muted.2',
+    borderColor: 'text',
   },
   ':focus': {
     borderColor: 'primary.base',
-    boxShadow: `inset 0 0 0 1px  ${colors.primary.base}`,
+    boxShadow: `0 0 0 1px  ${colors.primary.base}`,
   },
+  ':disabled': {
+    bg: 'muted.4',
+    borderColor: 'muted.1',
+    color: 'muted.1',
+  },
+  // Label styles
+  ':focus + label': {
+    transform: 'translate(1px, 4px) scale(0.875)',
+    color: 'primary.base',
+  },
+  ':placeholder-shown:not(:focus) + label': {
+    paddingTop: 1,
+  },
+  ':active + label': {
+    transform: 'translate(1px, 4px) scale(0.875)',
+  },
+  ':not(:placeholder-shown) + label': {
+    transform: 'translate(1px, 4px) scale(0.875)',
+  },
 }
+
+const clearButtonStyle = {
+  color: 'muted.1',
+  marginY: '14px',
+  marginRight: 1,
+  height: 20,
+  width: 20,
+  border: 'none',
+  borderRadius: 'default',
+  bg: 'transparent',
+  cursor: 'pointer',
+  ':focus:not([data-focus-visible-added])': {
+    outline: 'none',
+    boxShadow: 'none',
+  },
+  ':focus': {
+    outline: 'none',
+    boxShadow: 'focus',
+  },
+  ':hover': {
+    color: 'text',
+  },
+  '> div': {
+    display: 'flex',
+    height: 'full',
+    width: 'full',
+    margin: 'auto',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+}
+
+const iconStyle = {
+  color: 'muted.1',
+  top: 1,
+  left: 0,
+  paddingX: 3,
+  paddingTop: '14px',
+  position: 'absolute',
+  width: 44,
+  height: 48,
+  svg: {
+    height: 20,
+    width: 20,
+    minWidth: 20,
+    minHeight: 20,
+  },
+}
+
+const suffixStyle = {
+  color: 'muted.1',
+  borderLeftStyle: 'solid',
+  borderLeftWidth: '1px',
+  borderLeftColor: 'muted.3',
+  paddingTop: '14px',
+  marginTop: 'px',
+  width: '32px',
+  paddingLeft: 3,
+  lineHeight: 'body',
+  fontVariationSettings: 'regular',
+  fontSize: 1,
+}
+
+const inputVariants = {
+  default: { ...inputStyle },
+  'with-icon': { ...inputStyle, paddingLeft: '44px' },
+  'with-suffix': { ...inputStyle, paddingRight: '64px' },
+  'with-clear': {
+    ...inputStyle,
+    paddingRight: '44px',
+  },
+  'with-icon-clear': {
+    ...inputStyle,
+    paddingLeft: '44px',
+    paddingRight: '44px',
+  },
+  'with-icon-suffix': {
+    ...inputStyle,
+    paddingRight: '64px',
+    paddingLeft: '44px',
+  },
+  'with-suffix-clear': {
+    ...inputStyle,
+    paddingRight: '75px',
+  },
+  'with-icon-suffix-clear': {
+    ...inputStyle,
+    paddingLeft: '44px',
+    paddingRight: '75px',
+  },
+}
+
+const containerStyles = {
+  position: 'relative',
+}
+
+export default {
+  container: { ...containerStyles },
+  'container-with-icon': {
+    ...containerStyles,
+    label: { left: '44px' },
+  },
+  'icon-style': { ...iconStyle },
+  'suffix-style': { ...suffixStyle },
+  'clear-button-style': { ...clearButtonStyle },
+  ...inputVariants,
+}

src/config/components/textField.ts

@@ -1,2 +0,4 @@
-export default {
+import { colors } from '../base'
+
+const styles = {
   display: 'flex',
@@ -6,30 +8,27 @@ position: 'relative',
   flexDirection: 'column',
+}
+
+const error = {
   input: {
-    paddingTop: 4,
+    borderColor: 'danger.base',
+    ':focus': {
+      borderColor: 'danger.base',
+      boxShadow: `0 0 0 1px  ${colors.danger.base}`,
+    },
+    ':focus + label': {
+      transform: 'translate(1px, 4px) scale(0.875)',
+      color: 'danger.base',
+    },
+    ':hover': {
+      borderColor: 'danger.hover',
+    },
   },
   label: {
-    fontSize: 1,
-    paddingX: 4,
-    paddingTop: 2,
-    color: 'muted.0',
-    marginBottom: 3,
-    pointerEvents: 'none',
-    position: 'absolute',
-    transform: 'translate(0, 16px) scale(1)',
-    transformOrigin: 'top left',
-    transition: 'all 0.2s ease-out;',
+    color: 'danger.base',
   },
-  ':focus-within > label': {
-    transform: 'translate(4px, 4px) scale(0.875)',
-    color: 'primary.base',
-  },
-  'input:placeholder-shown:not(:focus) + label': {
-    paddingTop: 1,
-  },
-  'input:active + label': {
-    transform: 'translate(4px, 4px) scale(0.875)',
-  },
-  'input:not(:placeholder-shown) + label': {
-    transform: 'translate(4px, 4px) scale(0.875)',
-  },
 }
+
+export default {
+  default: { ...styles },
+  error: { ...styles, ...error },
+}

No alert changes

Improved metrics

Total package byte prevSize

465737

increased by0.59%

Lines of code

9176

increased by1.29%

No dependency changes