@griddo/ax 11.11.5-rc.0 → 11.11.6

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 (6) hide show
  1. package/package.json +2 -2
  2. package/src/components/Modal/style.tsx +5 -2
  3. package/src/components/SearchField/index.tsx +10 -6
  4. package/src/components/SearchField/style.tsx +48 -27
  5. package/src/locales/en-US.ts +1 -0
  6. package/src/locales/es-ES.ts +1 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@griddo/ax",
3
3
  "description": "Griddo Author Experience",
4
- "version": "11.11.5-rc.0",
4
+ "version": "11.11.6",
5
5
  "authors": [
6
6
  "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
7
7
  "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -217,5 +217,5 @@
217
217
  "publishConfig": {
218
218
  "access": "public"
219
219
  },
220
- "gitHead": "bb066b4260eac09fddc66c2d37f8559b50e7d9b0"
220
+ "gitHead": "fed7cc70b03ba1e4d5e24f99e9a83259e7c5cd49"
221
221
  }
package/src/components/Modal/style.tsx CHANGED
@@ -111,8 +111,11 @@ const SearchWrapper = styled.div`
111
111
  margin-right: ${(p) => p.theme.spacing.xs};
112
112
 
113
113
  & > div {
114
- margin-top: -8px;
115
- margin-bottom: -8px;
114
+ margin-top: -9px;
115
+ margin-bottom: -9px;
116
+ display: flex
117
+ justify-content: center;
118
+ align-items: center;
116
119
  }
117
120
  `;
118
121
 
package/src/components/SearchField/index.tsx CHANGED
@@ -1,5 +1,8 @@
1
- import { Button, Icon } from "@ax/components";
2
1
  import { useEffect, useRef, useState } from "react";
2
+
3
+ import { Button, Icon } from "@ax/components";
4
+ import { LOCALE } from "@ax/locales";
5
+
3
6
  import { Select } from "../Fields";
4
7
 
5
8
  import * as S from "./style";
@@ -98,7 +101,7 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
98
101
  value={inputValue}
99
102
  onChange={handleChange}
100
103
  onKeyDown={handleKeyDown}
101
- placeholder={placeholder}
104
+ placeholder={placeholder || LOCALE.common.typeSomething}
102
105
  closeOnInactive={closeOnInactive}
103
106
  disabled={disabled}
104
107
  data-testid="search-input"
@@ -107,12 +110,13 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
107
110
  inputSize={size}
108
111
  name="searchInput"
109
112
  />
110
- {inputValue.trim() !== "" && searchOnEnter && <S.HelpText>Press ENTER</S.HelpText>}
113
+
114
+ {searchOnEnter && <S.HelpText hide={!inputValue.trim()}>Press ENTER</S.HelpText>}
111
115
  {closeOnInactive || inputValue.length > 0 ? (
112
116
  <S.CloseWrapper data-testid="icon-close-wrapper">
113
- <Button type="button" onClick={handleClick} buttonStyle="minimal">
114
- cerrar
115
- </Button>
117
+ <S.CloseButton type="button" onClick={handleClick} buttonStyle="minimal">
118
+ {LOCALE.common.close}
119
+ </S.CloseButton>
116
120
  </S.CloseWrapper>
117
121
  ) : (
118
122
  <S.IconSearchWrapper disabled={disabled} data-testid="icon-search-wrapper-2">
package/src/components/SearchField/style.tsx CHANGED
@@ -1,6 +1,9 @@
1
+ import { Button } from "@ax/components";
2
+
1
3
  import styled from "styled-components";
2
4
 
3
5
  const Wrapper = styled.div`
6
+ display: flex;
4
7
  position: relative;
5
8
  width: 100%;
6
9
  `;
@@ -8,15 +11,20 @@ const Wrapper = styled.div`
8
11
  const FieldWrapper = styled.div<{ closeOnInactive: boolean; disabled: boolean }>`
9
12
  display: flex;
10
13
  align-items: center;
14
+ justify-content: center;
15
+ background-color: white;
16
+ width: 100%;
17
+ column-gap: ${(p) => p.theme.spacing.xs};
18
+ padding-inline: ${(p) => p.theme.spacing.s};
11
19
  border-color: ${(p) =>
12
20
  p.disabled
13
21
  ? p.theme.color.interactiveDisabled
14
22
  : p.closeOnInactive
15
23
  ? p.theme.color.interactive01
16
24
  : p.theme.color.uiLine};
17
- border-width: ${(p) => (p.closeOnInactive ? "0 0 1px" : "1px")};
25
+ border-width: 1px;
18
26
  border-style: solid;
19
- border-radius: ${(p) => (p.closeOnInactive ? 0 : p.theme.radii.s)};
27
+ border-radius: ${(p) => p.theme.radii.s};
20
28
  &:focus-within {
21
29
  border-color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.interactive01)};
22
30
  }
@@ -31,33 +39,33 @@ const Input = styled.input<{
31
39
  ${(p) => p.theme.textStyle.fieldContent};
32
40
  color: ${(p) => p.theme.color.textHighEmphasis};
33
41
  background-color: ${(p) => p.theme.color.interactiveBackground};
34
- flex: 1 1 auto;
35
42
  height: ${(p) => (p.inputSize === "XXS" ? "32px" : p.inputSize === "XS" ? "40px" : p.theme.spacing.l)};
36
- padding-left: ${(p) => p.theme.spacing.s};
37
- padding-right: ${(p) => (p.closeOnInactive ? p.theme.spacing.xl : "0")};
38
43
  border: none;
39
- border-radius: ${(p) => (p.closeOnInactive ? 0 : p.theme.radii.s)};
44
+ border-radius: ${(p) => p.theme.radii.s};
45
+ margin-right: auto;
46
+ flex: 1 1 auto;
47
+ min-width: unset;
48
+ max-width: unset;
49
+ width: 100%;
50
+ &:active,
51
+ &:focus {
52
+ outline: none;
53
+ }
54
+
55
+ /*
40
56
  width: ${(p) =>
41
57
  p.small || ["S", "XS", "XXS"].includes(p.inputSize)
42
58
  ? `calc(${p.theme.spacing.xl} * 2)`
43
59
  : p.inputSize === "L"
44
60
  ? `calc(${p.theme.spacing.xl} * 6)`
45
61
  : `calc(${p.theme.spacing.xl} * 4)`};
46
-
47
- &:active,
48
- &:focus {
49
- outline: none;
50
- }
62
+ */
51
63
  `;
52
64
 
53
65
  const IconSearchWrapper = styled.div<{ onClick?: () => void; disabled: boolean }>`
54
- position: absolute;
55
- right: ${(p) => p.theme.spacing.s};
56
- top: 50%;
57
- width: ${(p) => p.theme.spacing.m};
66
+ margin-left: auto;
58
67
  height: ${(p) => p.theme.spacing.m};
59
68
  cursor: ${(p) => (p.onClick ? "pointer" : "default")};
60
- transform: translateY(-50%);
61
69
  svg {
62
70
  path {
63
71
  fill: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.interactive01)};
@@ -65,25 +73,28 @@ const IconSearchWrapper = styled.div<{ onClick?: () => void; disabled: boolean }
65
73
  }
66
74
  `;
67
75
 
68
- const HelpText = styled.div`
76
+ const HelpText = styled.div<{ hide?: boolean }>`
77
+ display: ${(p) => (p.hide ? "none" : "block")};
78
+ visibility: ${(p) => (p.hide ? "hidden" : "visible")};
79
+ min-width: fit-content;
69
80
  ${(p) => p.theme.textStyle.uiXS};
70
81
  color: ${(p) => p.theme.color.textLowEmphasis};
71
82
  font-style: italic;
72
- position: absolute;
73
- right: 64px;
74
- top: 50%;
75
- transform: translateY(-50%);
76
83
  `;
77
84
 
78
85
  const CloseWrapper = styled.div`
79
- position: absolute;
80
- right: ${(p) => p.theme.spacing.xxs};
81
- top: 50%;
82
86
  cursor: pointer;
83
- transform: translateY(-50%);
87
+ display: flex;
88
+ min-width: fit-content;
84
89
  `;
85
90
 
86
- const FilterWrapper = styled.div``;
91
+ const CloseButton = styled(Button)`
92
+ margin: 0 !important;
93
+ `;
94
+
95
+ const FilterWrapper = styled.div`
96
+ min-width: fit-content;
97
+ `;
87
98
 
88
99
  const Separator = styled.div`
89
100
  border-right: 1px solid ${(p) => p.theme.color.uiLine};
@@ -92,4 +103,14 @@ const Separator = styled.div`
92
103
  margin-left: ${(p) => p.theme.spacing.s};
93
104
  `;
94
105
 
95
- export { Wrapper, IconSearchWrapper, FieldWrapper, Input, HelpText, CloseWrapper, FilterWrapper, Separator };
106
+ export {
107
+ CloseButton,
108
+ CloseWrapper,
109
+ FieldWrapper,
110
+ FilterWrapper,
111
+ HelpText,
112
+ IconSearchWrapper,
113
+ Input,
114
+ Separator,
115
+ Wrapper,
116
+ };
package/src/locales/en-US.ts CHANGED
@@ -26,6 +26,7 @@ export const enUS = {
26
26
  moving: "moving",
27
27
  deactivating: "deactivating",
28
28
  activating: "activating",
29
+ typeSomething: "Type something",
29
30
  },
30
31
  fields: {
31
32
  tags: {
package/src/locales/es-ES.ts CHANGED
@@ -26,6 +26,7 @@ export const esES = {
26
26
  moving: "moviendo",
27
27
  deactivating: "desactivando",
28
28
  activating: "activando",
29
+ typeSomething: "Escribe algo",
29
30
  },
30
31
  fields: {
31
32
  tags: {