@intility/bifrost-react-select 4.0.3 → 4.2.0

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 +12 -0
  2. package/dist/Select.d.ts +1 -1
  3. package/dist/Select.js +24 -27
  4. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @intility/bifrost-react-select
2
2
 
3
+ ## 4.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 833a15e4: Fix: update Select styling to allow `menuPlacement="top"` and more closely match DatePicker #754
8
+
9
+ ## 4.1.0
10
+
11
+ ### Minor Changes
12
+
13
+ - ab69807d: Styling changes for Select input #740
14
+
3
15
  ## 4.0.3
4
16
 
5
17
  ### Patch Changes
package/dist/Select.d.ts CHANGED
@@ -20,7 +20,7 @@ export declare const selectStyles: {
20
20
  singleValue: (provided: any, state: any) => any;
21
21
  option: (provided: any, state: any) => any;
22
22
  multiValue: (provided: any, state: any) => any;
23
- multiValueLabel: (provided: any, state: any) => any;
23
+ multiValueLabel: (provided: any) => any;
24
24
  multiValueRemove: (provided: any, state: any) => any;
25
25
  group: (provided: any) => any;
26
26
  groupHeading: (provided: any) => any;
package/dist/Select.js CHANGED
@@ -22,18 +22,18 @@ export const selectStyles = {
22
22
  control: (provided, state)=>({
23
23
  ...provided,
24
24
  "&:hover": {
25
- borderColor: state.isFocused ? "var(--bfc-theme-3)" : "var(--bfc-base-c-inverted-2)",
25
+ borderColor: state.isFocused ? "var(--bfc-base-c-inverted)" : "var(--bfc-base-c-inverted-2)",
26
26
  // Change color of dropdown icon when hover on Select
27
27
  ".bf-select__dropdown-indicator": {
28
- color: "var(--bfc-theme-3)"
28
+ color: "var(--bfc-base-c)"
29
29
  }
30
30
  },
31
31
  backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-3)",
32
32
  borderWidth: "1px",
33
33
  borderStyle: "solid",
34
- borderColor: state.isFocused ? "var(--bfc-theme-3)" : state.isDisabled ? "transparent" : "var(--bfc-base-c-wcag)",
35
- boxShadow: "none",
36
- borderRadius: state.selectProps.menuIsOpen ? " var(--bf-radius-xs) var(--bf-radius-xs) 0 0" : "var(--bf-radius-xs)",
34
+ borderColor: state.isFocused ? "var(--bfc-base-c-inverted)" : state.isDisabled ? "transparent" : "var(--bfc-base-c-wcag)",
35
+ boxShadow: state.isFocused ? "inset 0 0 0 1px var(--bfc-base-c-inverted)" : "none",
36
+ borderRadius: "var(--bf-radius-xs)",
37
37
  minHeight: "var(--bfs40)",
38
38
  cursor: "text"
39
39
  }),
@@ -57,7 +57,7 @@ export const selectStyles = {
57
57
  }),
58
58
  dropdownIndicator: (provided, state)=>({
59
59
  ...provided,
60
- color: state.isDisabled ? "var(--bfc-base-c-2)" : "var(--bfc-theme-1)",
60
+ color: state.isFocused ? "var(--bfc-base-c)" : "var(--bfc-base-c-2)",
61
61
  cursor: "pointer",
62
62
  padding: "var(--bfs4)",
63
63
  marginRight: "var(--bfs8)"
@@ -77,16 +77,14 @@ export const selectStyles = {
77
77
  backgroundColor: "transparent",
78
78
  boxShadow: "none",
79
79
  borderRadius: "none",
80
- marginTop: 0,
81
80
  zIndex: 3
82
81
  }),
83
82
  menuList: (provided)=>({
84
83
  ...provided,
85
84
  backgroundColor: "var(--bfc-base-3)",
86
85
  padding: 0,
87
- border: "1px solid var(--bfc-theme-3)",
88
- borderTop: "none",
89
- borderRadius: "0 0 var(--bf-radius-xs) var(--bf-radius-xs)"
86
+ border: "1px solid var(--bfc-base-c-wcag)",
87
+ borderRadius: "var(--bf-radius-xs)"
90
88
  }),
91
89
  placeholder: (provided)=>({
92
90
  ...provided,
@@ -111,11 +109,11 @@ export const selectStyles = {
111
109
  color: "var(--bfc-theme)"
112
110
  },
113
111
  "& .bf-select-selected-icon": {
114
- color: "var(--bfc-base-c-theme)",
112
+ color: "var(--bfc-base-c)",
115
113
  marginLeft: "var(--bfs4)"
116
114
  },
117
115
  "&:hover": {
118
- backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-1)",
116
+ backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-3)",
119
117
  cursor: state.isDisabled ? "default" : "pointer"
120
118
  },
121
119
  fontSize: "var(--bf-font-size-l)",
@@ -125,31 +123,30 @@ export const selectStyles = {
125
123
  }),
126
124
  multiValue: (provided, state)=>({
127
125
  ...provided,
128
- backgroundColor: state.isDisabled ? "var(--bfc-base-c-inverted-2)" : "var(--bfc-theme-c)",
129
- borderRadius: "var(--bf-radius-xs)"
126
+ backgroundColor: "var(--bfc-base)",
127
+ borderRadius: "var(--bf-radius-xs)",
128
+ border: state.isDisabled ? "1px solid var(--bfc-base-c-disabled)" : "var(--bf-border)",
129
+ opacity: state.isDisabled ? 0.5 : 1
130
130
  }),
131
- multiValueLabel: (provided, state)=>({
131
+ multiValueLabel: (provided)=>({
132
132
  ...provided,
133
- color: state.isDisabled ? "var(--bfc-base-1)" : "var(--bfc-base-c-theme)",
134
- fontSize: "var(--bf-font-size-m)"
133
+ fontSize: "var(--bf-font-size-m)",
134
+ padding: "2px 4px 2px 8px",
135
+ color: "inherit"
135
136
  }),
136
137
  multiValueRemove: (provided, state)=>({
137
138
  ...provided,
138
- color: state.isDisabled ? "var(--bfc-base-1)" : state.isFocused ? "var(--bfc-theme-c-base-3)" : "var(--bfc-theme-1)",
139
- borderRadius: "unset",
140
- borderTopRightRadius: "var(--bf-radius-xs)",
141
- borderBottomRightRadius: "var(--bf-radius-xs)",
142
- paddingLeft: "var(--bfs2)",
143
- paddingRight: "var(--bfs2)",
144
- marginLeft: "var(--bfs2)",
139
+ color: "var(--bfc-base-c-2)",
140
+ paddingLeft: 5,
141
+ paddingRight: 5,
145
142
  background: state.isFocused && "var(--bfc-theme-2)",
146
143
  "&:hover": {
147
- color: "var(--bfc-theme-c-base-3)",
144
+ color: "var(--bfc-base-c-1)",
148
145
  cursor: "pointer",
149
- background: "var(--bfc-theme)"
146
+ background: "var(--bfc-base-2)"
150
147
  },
151
148
  "&:active": {
152
- background: "var(--bfc-theme-2)"
149
+ background: "var(--bfc-base-3)"
153
150
  },
154
151
  svg: {
155
152
  marginTop: "1px"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@intility/bifrost-react-select",
3
- "version": "4.0.3",
3
+ "version": "4.2.0",
4
4
  "description": "React select component for Intility's design system, Bifrost.",
5
5
  "type": "module",
6
6
  "main": "dist/Select.js",
@@ -39,7 +39,7 @@
39
39
  "@intility/bifrost-react": "^4.0.2"
40
40
  },
41
41
  "devDependencies": {
42
- "@intility/bifrost-react": "^4.2.3"
42
+ "@intility/bifrost-react": "^4.5.1"
43
43
  },
44
44
  "dependencies": {
45
45
  "@fortawesome/fontawesome-svg-core": "^6.4.2",