@linzjs/lui 17.1.0 → 17.1.3

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 (14) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/assets/icons/drag_indicator.svg +1 -0
  3. package/dist/assets/icons/left_col.svg +1 -0
  4. package/dist/assets/icons/pop_back.svg +1 -0
  5. package/dist/assets/svg-content.tsx +18 -0
  6. package/dist/components/LuiSearchInput/LuiSearchInput.d.ts +1 -0
  7. package/dist/index.js +21 -11
  8. package/dist/index.js.map +1 -1
  9. package/dist/lui.css +48 -11
  10. package/dist/lui.css.map +1 -1
  11. package/dist/lui.esm.js +21 -11
  12. package/dist/lui.esm.js.map +1 -1
  13. package/dist/scss/Components/LuiSearchInput/LuiSearchInput.scss +59 -14
  14. package/package.json +9 -8
package/dist/scss/Components/LuiSearchInput/LuiSearchInput.scss CHANGED
@@ -1,8 +1,15 @@
1
+ @use '../../Foundation/Variables/BreakpointVars' as breakpoints;
1
2
  @use '../../Foundation/Variables/FormVars' as forms;
2
3
  @use '../../Foundation/Variables/FontVars' as fonts;
3
4
  @use '../../Foundation/Variables/LuiColors' as colors;
4
5
  @use '../../Foundation/Variables/SpacingVars' as spacing;
5
- @use "../../Foundation/Utilities/BoxShadow" as shadow;
6
+ @use '../../Foundation/Utilities/BoxShadow' as shadow;
7
+
8
+ @use "sass:math";
9
+
10
+ $breakpoint: 599px;
11
+ $input-wrapper-height-sm: 48px;
12
+ $input-wrapper-height-lg: 56px;
6
13
 
7
14
  .LuiSearchInput {
8
15
  @include shadow.drop-shadow($size: "sm");
@@ -13,10 +20,13 @@
13
20
  max-width: 600px;
14
21
  border: none;
15
22
 
23
+ transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
24
+
16
25
  &:active,
17
26
  &:focus,
18
27
  &:focus-within {
19
28
  @include shadow.drop-shadow("md");
29
+ border-radius: 3px;
20
30
  }
21
31
  }
22
32
 
@@ -24,23 +34,35 @@
24
34
  position: relative;
25
35
  display: block;
26
36
  border: none;
37
+ width: auto;
38
+ margin-left: 3px;
39
+ margin-right: 3px;
40
+
41
+ min-height: $input-wrapper-height-lg;
42
+
43
+ @media (max-height: $breakpoint) {
44
+ min-height: $input-wrapper-height-sm
45
+ }
27
46
  }
28
47
 
29
48
  .LuiSearchInput-input {
30
49
  @include fonts.font-regular();
31
50
  @include forms.formPlaceholder;
32
- margin-bottom: 0;
33
- height: spacing.$unit-xl;
51
+
52
+ $input-height: 24px;
53
+
54
+ height: $input-height;
34
55
  color: colors.$charcoal;
35
56
  caret-color: colors.$charcoal;
36
57
  border: none;
37
- padding: {
38
- top: spacing.$unit-sm;
39
- right: spacing.$unit-lg;
40
- bottom: spacing.$unit-sm;
41
- left: spacing.$unit-xl;
42
- }
43
58
  width: 100%;
59
+ margin-top: 16px;
60
+ padding-left: 48px;
61
+ padding-right: 48px;
62
+
63
+ @media (max-height: $breakpoint) {
64
+ margin-top: math.div($input-wrapper-height-sm - $input-height, 2);
65
+ }
44
66
 
45
67
  &:focus-visible {
46
68
  outline-width: 0;
@@ -49,8 +71,13 @@
49
71
 
50
72
  .LuiSearchInput-startIconPosition {
51
73
  position: absolute;
52
- left: 7px;
53
- top: 17%;
74
+ left: 15px;
75
+ top: 16px;
76
+
77
+ $icon-height: 24px;
78
+ @media (max-height: $breakpoint) {
79
+ top: math.div($input-wrapper-height-sm - $icon-height, 2);
80
+ }
54
81
 
55
82
  svg {
56
83
  fill: colors.$fuscous;
@@ -59,8 +86,17 @@
59
86
 
60
87
  .LuiSearchInput-iconPosition {
61
88
  position: absolute;
62
- right: 7px;
63
- top: 17%;
89
+ right: 15px;
90
+ top: 16px;
91
+
92
+ $icon-height: 24px;
93
+ @media (max-height: $breakpoint) {
94
+ top: math.div($input-wrapper-height-sm - $icon-height, 2);
95
+ }
96
+
97
+ &:hover {
98
+ cursor: pointer;
99
+ }
64
100
 
65
101
  svg {
66
102
  fill: colors.$fuscous;
@@ -70,6 +106,10 @@
70
106
  .LuiSearchInput-results {
71
107
  max-height: 275px;
72
108
  overflow: auto;
109
+
110
+ @media (max-height: breakpoints.$breakpoint2) {
111
+ max-height: 218px;
112
+ }
73
113
  }
74
114
 
75
115
  .LuiSearchInput-resultEntry {
@@ -79,7 +119,7 @@
79
119
  padding: 5px 20px;
80
120
  line-height: 24px;
81
121
  color: colors.$charcoal;
82
- height: 40px;
122
+ min-height: 40px;
83
123
 
84
124
  &.selected {
85
125
  background-color: colors.$polar;
@@ -118,3 +158,8 @@
118
158
  margin-right: 10px;
119
159
  background-color: colors.$lily;
120
160
  }
161
+
162
+ .LuiSearchInput-skeletonItem {
163
+ margin: 9px 0;
164
+ height: 20px;
165
+ }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "17.1.0",
2
+ "version": "17.1.3",
3
3
  "license": "MIT",
4
4
  "repository": {
5
5
  "type": "git",
@@ -79,16 +79,16 @@
79
79
  "@semantic-release/changelog": "^5.0.1",
80
80
  "@semantic-release/git": "^9.0.0",
81
81
  "@size-limit/preset-small-lib": "^7.0.8",
82
- "@storybook/addon-a11y": "^6.3.12",
83
- "@storybook/addon-docs": "^6.3.12",
84
- "@storybook/addon-essentials": "^6.3.12",
82
+ "@storybook/addon-a11y": "^6.5.0",
83
+ "@storybook/addon-docs": "^6.5.0",
84
+ "@storybook/addon-essentials": "^6.5.0",
85
85
  "@storybook/addon-info": "^5.3.21",
86
- "@storybook/addon-links": "^6.3.12",
86
+ "@storybook/addon-links": "^6.5.0",
87
87
  "@storybook/addon-storysource": "6.4.19",
88
- "@storybook/addons": "^6.3.12",
88
+ "@storybook/addons": "^6.5.0",
89
89
  "@storybook/preset-scss": "^1.0.3",
90
- "@storybook/react": "^6.3.12",
91
- "@storybook/theming": "^6.3.12",
90
+ "@storybook/react": "^6.5.0",
91
+ "@storybook/theming": "^6.5.0",
92
92
  "@testing-library/jest-dom": "^5.8.0",
93
93
  "@testing-library/react": "^10.0.4",
94
94
  "@testing-library/user-event": "^10.4.0",
@@ -145,6 +145,7 @@
145
145
  "@szhsin/react-menu": "^2.3.3",
146
146
  "camelcase": "^6.0.0",
147
147
  "clsx": "^1.1.0",
148
+ "container-query-polyfill": "0.1.2",
148
149
  "formik": "^2.1.4",
149
150
  "lottie-web": "^5.9.1",
150
151
  "react-loading-skeleton": "^3.1.0",