@intility/bifrost-react-select 5.0.0 → 5.0.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @intility/bifrost-react-select
 
+## 5.0.2
+
+### Patch Changes
+
+- 775ce3c: Fix: Include styling for `small` and `state="alert"` for `<Select>` css-in-js.
+  (This means we can now use main bifrost-bundle.css in a layer, and selects
+  should still be styled correctly) #117
+
+## 5.0.1
+
+### Patch Changes
+
+- 6d67f5f: Fix: Explicitly set `font-family` to "Open Sans" to prevent inheriting wrong
+  font from parent. #86
+
 ## 5.0.0
 
 ### Major Changes

package/dist/Select.d.ts

@@ -17,6 +17,7 @@ export declare const selectStyles: {
     menu: (provided: any) => any;
     menuList: (provided: any) => any;
     placeholder: (provided: any) => any;
+    valueContainer: (provided: any) => any;
     singleValue: (provided: any, state: any) => any;
     option: (provided: any, state: any) => any;
     multiValue: (provided: any, state: any) => any;

package/dist/Select.js

@@ -34,13 +34,33 @@ export const selectStyles = {
                     color: "var(--bfc-base-c)"
                 }
             },
+            ".bf-select-small &": {
+                minHeight: "var(--rem32)"
+            },
+            ".bf-select-alert &": {
+                borderColor: state.isFocused ? "var(--bfc-base-c-inverted)" : state.isDisabled ? "transparent" : "var(--bfc-base-c-alert)"
+            },
+            ".bf-select-alert &:hover": {
+                borderColor: state.isFocused ? undefined : state.isDisabled ? "transparent" : "var(--bfc-alert-2)"
+            },
+            ".bf-fieldgroup &": {
+                borderRadius: 0
+            },
+            ".bf-fieldgroup > :first-child &": {
+                borderTopLeftRadius: "var(--bf-radius-s)",
+                borderBottomLeftRadius: "var(--bf-radius-s)"
+            },
+            ".bf-fieldgroup > :last-child &": {
+                borderTopRightRadius: "var(--bf-radius-s)",
+                borderBottomRightRadius: "var(--bf-radius-s)"
+            },
             backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-3)",
             borderWidth: "1px",
             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-s)",
-            minHeight: undefined,
+            minHeight: "var(--rem40)",
             cursor: "text"
         }),
     indicatorSeparator: ()=>({
@@ -48,6 +68,10 @@ export const selectStyles = {
         }),
     indicatorsContainer: (provided)=>({
             ...provided,
+            ".bf-select-small &": {
+                paddingBlock: "0.2187rem"
+            },
+            padding: "0.469rem 0",
             alignItems: "flex-start"
         }),
     clearIndicator: (provided)=>({
@@ -62,6 +86,9 @@ export const selectStyles = {
         }),
     dropdownIndicator: (provided, state)=>({
             ...provided,
+            ".bf-select-small &": {
+                marginRight: 4
+            },
             color: state.isFocused ? "var(--bfc-base-c)" : "var(--bfc-base-c-2)",
             cursor: "pointer",
             padding: "var(--bfs4)",
@@ -69,6 +96,9 @@ export const selectStyles = {
         }),
     input: (provided)=>({
             ...provided,
+            ".bf-select-small &": {
+                marginBlock: 0
+            },
             color: "var(--bfc-base-c)",
             fontFamily: "inherit",
             fontSize: "var(--bf-font-size-l)"
@@ -96,6 +126,13 @@ export const selectStyles = {
             color: "var(--bfc-base-c-2)",
             fontSize: "var(--bf-font-size-l)"
         }),
+    valueContainer: (provided)=>({
+            ...provided,
+            ".bf-select-small &": {
+                padding: "0 8px"
+            },
+            padding: "var(--rem2) 12px"
+        }),
     singleValue: (provided, state)=>({
             ...provided,
             color: state.selectProps.menuIsOpen || state.isDisabled ? "var(--bfc-base-c-2)" : "var(--bfc-base-c)",
@@ -186,13 +223,9 @@ export const selectComponents = {
         const selectId = useUniqueId(inputId);
         const locale = useLocale();
         return /*#__PURE__*/ _jsxs("div", {
-            className: classNames(className, {
-                "bf-select-container": true
-            }, {
-                "bf-select-disabled": isDisabled
-            }, {
-                "bf-select-alert": !isDisabled && state === "alert"
-            }, {
+            className: classNames(className, "bf-select-container", "bf-open-sans", {
+                "bf-select-disabled": isDisabled,
+                "bf-select-alert": !isDisabled && state === "alert",
                 "bf-select-small": small
             }),
             style: style,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intility/bifrost-react-select",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "description": "React select component for Intility's design system, Bifrost.",
   "type": "module",
   "main": "dist/Select.js",
@@ -44,7 +44,7 @@
     "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@intility/bifrost-react": "^5.0.0"
+    "@intility/bifrost-react": "^5.2.1"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.2",