@intility/bifrost-react-select 4.0.0-beta.5 → 4.0.0-beta.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/Select.js +7 -7
  3. package/package.json +2 -2
  4. package/src/Select.tsx +9 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @intility/bifrost-react-select
2
2
 
3
+ ## 4.0.0-beta.7
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [82ab21b5]
8
+ - Updated dependencies [81af701b]
9
+ - @intility/bifrost-react@4.0.0-beta.6
10
+
11
+ ## 4.0.0-beta.6
12
+
13
+ ### Minor Changes
14
+
15
+ - 6b355639: New styling for inputs, now always outlined. Removed `variant` prop from `<Input>`.
16
+
17
+ ### Patch Changes
18
+
19
+ - Updated dependencies [6b355639]
20
+ - Updated dependencies [6b355639]
21
+ - @intility/bifrost-react@4.0.0-beta.5
22
+
3
23
  ## 4.0.0-beta.5
4
24
 
5
25
  ### Patch Changes
package/dist/Select.js CHANGED
@@ -22,18 +22,17 @@ export const selectStyles = {
22
22
  control: (provided, state)=>({
23
23
  ...provided,
24
24
  "&:hover": {
25
- borderBottomColor: state.isFocused ? "var(--bfc-base-c-theme)" : "var(--bfc-base-c-inverted-2)",
25
+ borderColor: state.isFocused ? "var(--bfc-theme-3)" : "var(--bfc-base-c-inverted-2)",
26
26
  // Change color of dropdown icon when hover on Select
27
27
  ".bf-select__dropdown-indicator": {
28
28
  color: "var(--bfc-theme-3)"
29
29
  }
30
30
  },
31
31
  backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-3)",
32
- border: 0,
33
- borderBottomWidth: "2px",
34
- borderBottomStyle: "solid",
35
- borderBottomColor: state.isFocused ? "var(--bfc-base-c-theme)" : state.isDisabled ? "transparent" : "var(--bfc-base-c-wcag)",
36
- boxShadow: state.isFocused && "0 0 0 1px var(--bfc-theme-3)",
32
+ borderWidth: "1px",
33
+ borderStyle: "solid",
34
+ borderColor: state.isFocused ? "var(--bfc-theme-3)" : state.isDisabled ? "transparent" : "var(--bfc-base-c-wcag)",
35
+ boxShadow: "none",
37
36
  borderRadius: state.selectProps.menuIsOpen ? " var(--bf-radius-xs) var(--bf-radius-xs) 0 0" : "var(--bf-radius-xs)",
38
37
  minHeight: "var(--bfs40)",
39
38
  cursor: "text"
@@ -84,7 +83,8 @@ export const selectStyles = {
84
83
  menuList: (provided)=>({
85
84
  ...provided,
86
85
  padding: 0,
87
- boxShadow: "0 0 0 1px var(--bfc-theme-3)",
86
+ border: "1px solid var(--bfc-theme-3)",
87
+ borderTop: "none",
88
88
  borderRadius: "0 0 var(--bf-radius-xs) var(--bf-radius-xs)"
89
89
  }),
90
90
  placeholder: (provided)=>({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@intility/bifrost-react-select",
3
- "version": "4.0.0-beta.5",
3
+ "version": "4.0.0-beta.7",
4
4
  "description": "React select component for Intility's design system, Bifrost.",
5
5
  "type": "module",
6
6
  "main": "dist/Select.js",
@@ -40,7 +40,7 @@
40
40
  "@fortawesome/fontawesome-svg-core": "^6.4.2",
41
41
  "@fortawesome/free-solid-svg-icons": "^6.4.2",
42
42
  "@fortawesome/react-fontawesome": "^0.2.0",
43
- "@intility/bifrost-react": "4.0.0-beta.4",
43
+ "@intility/bifrost-react": "4.0.0-beta.6",
44
44
  "classnames": "^2.2.6",
45
45
  "react-select": "^5.7.7"
46
46
  }
package/src/Select.tsx CHANGED
@@ -49,8 +49,8 @@ export const selectStyles = {
49
49
  control: (provided, state) => ({
50
50
  ...provided,
51
51
  "&:hover": {
52
- borderBottomColor: state.isFocused
53
- ? "var(--bfc-base-c-theme)"
52
+ borderColor: state.isFocused
53
+ ? "var(--bfc-theme-3)"
54
54
  : "var(--bfc-base-c-inverted-2)",
55
55
  // Change color of dropdown icon when hover on Select
56
56
  ".bf-select__dropdown-indicator": {
@@ -60,15 +60,14 @@ export const selectStyles = {
60
60
  backgroundColor: state.isDisabled
61
61
  ? "var(--bfc-base-dimmed)"
62
62
  : "var(--bfc-base-3)",
63
- border: 0,
64
- borderBottomWidth: "2px",
65
- borderBottomStyle: "solid",
66
- borderBottomColor: state.isFocused
67
- ? "var(--bfc-base-c-theme)"
63
+ borderWidth: "1px",
64
+ borderStyle: "solid",
65
+ borderColor: state.isFocused
66
+ ? "var(--bfc-theme-3)"
68
67
  : state.isDisabled
69
68
  ? "transparent"
70
69
  : "var(--bfc-base-c-wcag)",
71
- boxShadow: state.isFocused && "0 0 0 1px var(--bfc-theme-3)",
70
+ boxShadow: "none",
72
71
  borderRadius: state.selectProps.menuIsOpen
73
72
  ? " var(--bf-radius-xs) var(--bf-radius-xs) 0 0"
74
73
  : "var(--bf-radius-xs)",
@@ -121,7 +120,8 @@ export const selectStyles = {
121
120
  menuList: (provided) => ({
122
121
  ...provided,
123
122
  padding: 0,
124
- boxShadow: "0 0 0 1px var(--bfc-theme-3)",
123
+ border: "1px solid var(--bfc-theme-3)",
124
+ borderTop: "none",
125
125
  borderRadius: "0 0 var(--bf-radius-xs) var(--bf-radius-xs)",
126
126
  }),
127
127
  placeholder: (provided) => ({