@intility/bifrost-react-select 4.2.0 → 4.2.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @intility/bifrost-react-select
 
+## 4.2.2
+
+### Patch Changes
+
+- 3434ad1: Update Select styling to match new bifrost Button
+
+  - Increased `border-radius` (from xs to s)
+  - Slight `border-color` tweaks
+
+- 7b2eacc: Fix: Apparently, Chrome has changed its `<input autocomplete>` behaviour and now appears to only respect `autoComplete="off"`, so lets try that and pray to the browser gods that this will satisfy all of them for the forseeable future. #758
+
+## 4.2.1
+
+### Patch Changes
+
+- ba934052: Change option hover background to bfc-base-1
+
 ## 4.2.0
 
 ### Minor Changes

package/dist/Select.js

@@ -22,7 +22,7 @@ export const selectStyles = {
     control: (provided, state)=>({
             ...provided,
             "&:hover": {
-                borderColor: state.isFocused ? "var(--bfc-base-c-inverted)" : "var(--bfc-base-c-inverted-2)",
+                borderColor: "var(--bfc-base-c-inverted)",
                 // Change color of dropdown icon when hover on Select
                 ".bf-select__dropdown-indicator": {
                     color: "var(--bfc-base-c)"
@@ -33,7 +33,7 @@ export const selectStyles = {
             borderStyle: "solid",
             borderColor: state.isFocused ? "var(--bfc-base-c-inverted)" : state.isDisabled ? "transparent" : "var(--bfc-base-c-wcag)",
             boxShadow: state.isFocused ? "inset 0 0 0 1px var(--bfc-base-c-inverted)" : "none",
-            borderRadius: "var(--bf-radius-xs)",
+            borderRadius: "var(--bf-radius-s)",
             minHeight: "var(--bfs40)",
             cursor: "text"
         }),
@@ -84,7 +84,7 @@ export const selectStyles = {
             backgroundColor: "var(--bfc-base-3)",
             padding: 0,
             border: "1px solid var(--bfc-base-c-wcag)",
-            borderRadius: "var(--bf-radius-xs)"
+            borderRadius: "var(--bf-radius-s)"
         }),
     placeholder: (provided)=>({
             ...provided,
@@ -113,7 +113,7 @@ export const selectStyles = {
                 marginLeft: "var(--bfs4)"
             },
             "&:hover": {
-                backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-3)",
+                backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-1)",
                 cursor: state.isDisabled ? "default" : "pointer"
             },
             fontSize: "var(--bf-font-size-l)",

package/dist/overrides/CustomInput.internal.js

@@ -4,7 +4,7 @@ const CustomInput = (props)=>{
     const { required, value } = props.selectProps;
     const updatedProps = {
         ...props,
-        autoComplete: "noAutocomplete"
+        autoComplete: "off"
     };
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
@@ -22,7 +22,7 @@ const CustomInput = (props)=>{
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 value: value?.label ?? "",
                 tabIndex: -1,
-                autoComplete: "noAutocomplete",
+                autoComplete: "off",
                 required: required,
                 "data-testid": "bf-select-input"
             })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intility/bifrost-react-select",
-  "version": "4.2.0",
+  "version": "4.2.2",
   "description": "React select component for Intility's design system, Bifrost.",
   "type": "module",
   "main": "dist/Select.js",
@@ -39,7 +39,7 @@
     "@intility/bifrost-react": "^4.0.2"
   },
   "devDependencies": {
-    "@intility/bifrost-react": "^4.5.1"
+    "@intility/bifrost-react": "^4.7.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.2",