@commercetools-uikit/text-input - npm Package Compare versions

Comparing version 0.0.0-canary-202081093258 to 0.0.0-canary-202081613134

CHANGELOG.md

 # @commercetools-uikit/text-input
 
-## 0.0.0-canary-202081093258
+## 0.0.0-canary-202081613134
 
+### Patch Changes
+
+- [`bdcc9a9`](https://github.com/commercetools/ui-kit/commit/bdcc9a979ab2dd03e43ba8d52d83ffbac38217e4) [#1570](https://github.com/commercetools/ui-kit/pull/1570) Thanks [@jonnybel](https://github.com/jonnybel)! - Improved keyboard navigation support by adding/enhancing visual indicators for hover and focus states, including for readOnly mode.
+
+## 10.32.0
+
 ### Minor Changes
@@ -6,0 +12,0 @@

dist/text-input.cjs.js

@@ -87,4 +87,4 @@ 'use strict';
   var overwrittenVars = _objectSpread2(_objectSpread2({}, designSystem.customProperties), theme);
-  var baseStyles = core.css("appearance:none;background-color:", overwrittenVars[designSystem.designTokens.backgroundColorForInput], ";border:1px solid ", overwrittenVars[designSystem.designTokens.borderColorForInput], ";border-radius:", overwrittenVars[designSystem.designTokens.borderRadiusForInput], ";box-shadow:none;box-sizing:border-box;color:", overwrittenVars[designSystem.designTokens.fontColorForInput], ";display:flex;flex:1;font-family:inherit;font-size:", overwrittenVars[designSystem.designTokens.fontSizeForInput], ";height:", overwrittenVars.sizeHeightInput, ";min-height:", overwrittenVars.sizeHeightInput, ";outline:none;overflow:hidden;padding:0 ", overwrittenVars.spacingS, ";transition:border-color ", overwrittenVars.transitionStandard, ",background-color ", overwrittenVars.transitionStandard, ",color ", overwrittenVars.transitionStandard, ";width:100%;&::placeholder{color:", overwrittenVars[designSystem.designTokens.placeholderFontColorForInput], ";}&:active,&:focus{border-color:", overwrittenVars[designSystem.designTokens.borderColorForInputWhenFocused], ";}");
-  if (props.isDisabled) {
+  var baseStyles = core.css("appearance:none;background-color:", overwrittenVars[designSystem.designTokens.backgroundColorForInput], ";border:1px solid ", overwrittenVars[designSystem.designTokens.borderColorForInput], ";border-radius:", overwrittenVars[designSystem.designTokens.borderRadiusForInput], ";box-sizing:border-box;color:", overwrittenVars[designSystem.designTokens.fontColorForInput], ";display:flex;flex:1;font-family:inherit;font-size:", overwrittenVars[designSystem.designTokens.fontSizeForInput], ";height:", overwrittenVars.sizeHeightInput, ";min-height:", overwrittenVars.sizeHeightInput, ";outline:none;overflow:hidden;padding:0 ", overwrittenVars.spacingS, ";transition:border-color ", overwrittenVars.transitionStandard, ",background-color ", overwrittenVars.transitionStandard, ",color ", overwrittenVars.transitionStandard, ",box-shadow ", overwrittenVars.transitionStandard, ";width:100%;&::placeholder{color:", overwrittenVars[designSystem.designTokens.placeholderFontColorForInput], ";}:active,:focus,:hover:not(:disabled):not(:read-only){border-color:", overwrittenVars[designSystem.designTokens.borderColorForInputWhenFocused], ";}:focus{box-shadow:inset 0 0 0 2px ", overwrittenVars[designSystem.designTokens.borderColorForInputWhenFocused], ";}");
+  if (props.isDisabled || props.disabled) {
     return [baseStyles, core.css("background-color:", overwrittenVars[designSystem.designTokens.backgroundColorForInputWhenDisabled], ";border-color:", overwrittenVars[designSystem.designTokens.borderColorForInputWhenDisabled], ";color:", overwrittenVars[designSystem.designTokens.fontColorForInputWhenDisabled], ";cursor:not-allowed;opacity:1;")];
@@ -98,3 +98,3 @@ }
   }
-  if (props.isReadOnly) {
+  if (props.isReadOnly || props.readOnly) {
     return [baseStyles, core.css("border-color:", overwrittenVars[designSystem.designTokens.borderColorForInputWhenReadonly], ";color:", overwrittenVars[designSystem.designTokens.fontColorForInputWhenReadonly], ";cursor:default;")];
@@ -158,5 +158,5 @@ }
 
-var version = '0.0.0-canary-202081093258';
+var version = '0.0.0-canary-202081613134';
 
 exports.default = TextInput;
 exports.version = version;

dist/text-input.esm.js

@@ -77,4 +77,4 @@ import PropTypes from 'prop-types';
   var overwrittenVars = _objectSpread2(_objectSpread2({}, customProperties), theme);
-  var baseStyles = css("appearance:none;background-color:", overwrittenVars[designTokens.backgroundColorForInput], ";border:1px solid ", overwrittenVars[designTokens.borderColorForInput], ";border-radius:", overwrittenVars[designTokens.borderRadiusForInput], ";box-shadow:none;box-sizing:border-box;color:", overwrittenVars[designTokens.fontColorForInput], ";display:flex;flex:1;font-family:inherit;font-size:", overwrittenVars[designTokens.fontSizeForInput], ";height:", overwrittenVars.sizeHeightInput, ";min-height:", overwrittenVars.sizeHeightInput, ";outline:none;overflow:hidden;padding:0 ", overwrittenVars.spacingS, ";transition:border-color ", overwrittenVars.transitionStandard, ",background-color ", overwrittenVars.transitionStandard, ",color ", overwrittenVars.transitionStandard, ";width:100%;&::placeholder{color:", overwrittenVars[designTokens.placeholderFontColorForInput], ";}&:active,&:focus{border-color:", overwrittenVars[designTokens.borderColorForInputWhenFocused], ";}");
-  if (props.isDisabled) {
+  var baseStyles = css("appearance:none;background-color:", overwrittenVars[designTokens.backgroundColorForInput], ";border:1px solid ", overwrittenVars[designTokens.borderColorForInput], ";border-radius:", overwrittenVars[designTokens.borderRadiusForInput], ";box-sizing:border-box;color:", overwrittenVars[designTokens.fontColorForInput], ";display:flex;flex:1;font-family:inherit;font-size:", overwrittenVars[designTokens.fontSizeForInput], ";height:", overwrittenVars.sizeHeightInput, ";min-height:", overwrittenVars.sizeHeightInput, ";outline:none;overflow:hidden;padding:0 ", overwrittenVars.spacingS, ";transition:border-color ", overwrittenVars.transitionStandard, ",background-color ", overwrittenVars.transitionStandard, ",color ", overwrittenVars.transitionStandard, ",box-shadow ", overwrittenVars.transitionStandard, ";width:100%;&::placeholder{color:", overwrittenVars[designTokens.placeholderFontColorForInput], ";}:active,:focus,:hover:not(:disabled):not(:read-only){border-color:", overwrittenVars[designTokens.borderColorForInputWhenFocused], ";}:focus{box-shadow:inset 0 0 0 2px ", overwrittenVars[designTokens.borderColorForInputWhenFocused], ";}");
+  if (props.isDisabled || props.disabled) {
     return [baseStyles, css("background-color:", overwrittenVars[designTokens.backgroundColorForInputWhenDisabled], ";border-color:", overwrittenVars[designTokens.borderColorForInputWhenDisabled], ";color:", overwrittenVars[designTokens.fontColorForInputWhenDisabled], ";cursor:not-allowed;opacity:1;")];
@@ -88,3 +88,3 @@ }
   }
-  if (props.isReadOnly) {
+  if (props.isReadOnly || props.readOnly) {
     return [baseStyles, css("border-color:", overwrittenVars[designTokens.borderColorForInputWhenReadonly], ";color:", overwrittenVars[designTokens.fontColorForInputWhenReadonly], ";cursor:default;")];
@@ -148,5 +148,5 @@ }
 
-var version = '0.0.0-canary-202081093258';
+var version = '0.0.0-canary-202081613134';
 
 export default TextInput;
 export { version };

package.json

 {
   "name": "@commercetools-uikit/text-input",
-  "version": "0.0.0-canary-202081093258",
+  "version": "0.0.0-canary-202081613134",
   "description": "A controlled text input component for single-line strings with validation states.",
@@ -5,0 +5,0 @@ "main": "dist/text-input.cjs.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23048

increased by3.64%

Lines of code

282

increased by0.36%

No dependency changes