@gympass/yoga 7.108.1 → 7.108.2

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 (5) hide show
  1. package/cjs/Chips/native/Chips.js +1 -5
  2. package/cjs/Chips/web/Chips.js +18 -33
  3. package/esm/Chips/native/Chips.js +1 -5
  4. package/esm/Chips/web/Chips.js +18 -33
  5. package/package.json +2 -2
package/cjs/Chips/native/Chips.js CHANGED
@@ -108,11 +108,7 @@ const Wrapper = import_styled_components.default.View.attrs(({ theme: { yoga } }
108
108
  ` : ""}
109
109
  `;
110
110
  const StyledChips = (0, import_styled_components.default)(import_Text.default)`
111
- font-size: ${import_Theme.theme.fontSizes.xsmall}px;
112
- line-height: ${import_Theme.theme.lineHeights.xsmall}px;
113
-
114
111
  flex-shrink: 1;
115
-
116
112
  ${({ disabled }) => disabled ? import_styled_components.css`
117
113
  color: ${import_Theme.theme.colors.text.disabled};
118
114
  ` : ""}
@@ -178,7 +174,7 @@ const Chips = import_react.default.forwardRef(
178
174
  StyledChips,
179
175
  {
180
176
  disabled,
181
- as: selected ? import_Text.default.Bold : import_Text.default,
177
+ as: selected || disabled ? import_Text.default.Overline : import_Text.default.Caption,
182
178
  selected,
183
179
  numberOfLines: 1,
184
180
  children
package/cjs/Chips/web/Chips.js CHANGED
@@ -68,16 +68,9 @@ var import_yoga_common = require("@gympass/yoga-common");
68
68
  var import_Theme = require("../../Theme");
69
69
  var import_Icon = __toESM(require("../../Icon"));
70
70
  var import_Counter = __toESM(require("./Counter"));
71
+ var import_Text = __toESM(require("../../Text"));
71
72
  const BORDER_OPACITY = 0.4;
72
73
  const BORDER_PRESSED_OPACITY = 0.6;
73
- const Text = import_styled_components.default.span`
74
- display: inline-block;
75
- box-sizing: border-box;
76
-
77
- white-space: nowrap;
78
- overflow: hidden;
79
- text-overflow: ellipsis;
80
- `;
81
74
  const Wrapper = import_styled_components.default.button`
82
75
  height: 32px;
83
76
  max-width: 216px;
@@ -92,16 +85,7 @@ const Wrapper = import_styled_components.default.button`
92
85
 
93
86
  ${(_a) => {
94
87
  var _b = _a, { selected, justAnIcon } = _b, props = __objRest(_b, ["selected", "justAnIcon"]);
95
- const {
96
- spacing,
97
- borders,
98
- colors,
99
- radii,
100
- baseFont,
101
- fontSizes,
102
- fontWeights,
103
- lineHeights
104
- } = (0, import_Theme.theme)(props);
88
+ const { spacing, borders, colors, radii } = (0, import_Theme.theme)(props);
105
89
  const commonStyles = `
106
90
 
107
91
  padding: ${justAnIcon ? `${spacing.xxsmall}px` : `${spacing.xxsmall}px ${spacing.xsmall}px`};
@@ -109,18 +93,15 @@ const Wrapper = import_styled_components.default.button`
109
93
  border-radius: ${radii.circle}px;
110
94
  border-width: ${borders.small}px;
111
95
 
112
- font-family: ${baseFont.family};
113
- font-size: ${fontSizes.xsmall}px;
114
- line-height: ${lineHeights.xsmall}px;
115
-
116
96
  :not(:last-child) {
117
97
  margin-right: ${spacing.xxsmall}px;
118
98
  }
119
99
 
120
100
  &[disabled] {
121
101
  background-color: ${colors.elements.backgroundAndDisabled};
122
- color: ${colors.text.disabled};
123
-
102
+ p {
103
+ color: ${colors.text.disabled};
104
+ }
124
105
  border-color: ${colors.elements.backgroundAndDisabled};
125
106
 
126
107
  cursor: not-allowed;
@@ -138,13 +119,15 @@ const Wrapper = import_styled_components.default.button`
138
119
  return `
139
120
  ${commonStyles}
140
121
 
122
+ p {
123
+ color: ${colors.white};
124
+ }
125
+
141
126
  background-color: ${colors.secondary};
142
- color: ${colors.white};
127
+
143
128
 
144
129
  border-color: transparent;
145
130
 
146
- font-weight: ${fontWeights.bold};
147
-
148
131
  &:hover:enabled {
149
132
  border-color: ${colors.secondary};
150
133
  }
@@ -164,17 +147,18 @@ const Wrapper = import_styled_components.default.button`
164
147
  border-color: ${(0, import_yoga_common.hexToRgb)(colors.secondary, BORDER_OPACITY)};
165
148
 
166
149
  background-color: ${colors.white};
167
- color: ${colors.secondary};
168
-
169
- font-weight: ${fontWeights.regular};
170
-
150
+ p {
151
+ color: ${colors.secondary};
152
+ }
171
153
  &:hover:enabled {
172
154
  border-color: ${colors.secondary};
173
155
  }
174
156
 
175
157
  &:active:enabled {
176
158
  border-color: ${(0, import_yoga_common.hexToRgb)(colors.secondary, BORDER_PRESSED_OPACITY)};
177
- color: ${(0, import_yoga_common.hexToRgb)(colors.secondary, BORDER_PRESSED_OPACITY)};
159
+ p {
160
+ color: ${(0, import_yoga_common.hexToRgb)(colors.secondary, BORDER_PRESSED_OPACITY)};
161
+ }
178
162
 
179
163
  svg {
180
164
  fill: ${(0, import_yoga_common.hexToRgb)(colors.secondary, BORDER_PRESSED_OPACITY)};
@@ -208,6 +192,7 @@ const Chips = import_react.default.forwardRef(
208
192
  ]);
209
193
  const [FirstIcon, SecondIcon] = icons;
210
194
  const justAnIcon = (icons[0] || icons[1]) && !children;
195
+ const TextComponent = selected || disabled ? import_Text.default.Overline : import_Text.default.Caption;
211
196
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
212
197
  Wrapper,
213
198
  __spreadProps(__spreadValues({
@@ -231,7 +216,7 @@ const Chips = import_react.default.forwardRef(
231
216
  }
232
217
  }
233
218
  ),
234
- children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children }),
219
+ children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextComponent, { children }),
235
220
  selected && counter && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Counter.default, { value: counter }),
236
221
  FirstIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
237
222
  import_Icon.default,
package/esm/Chips/native/Chips.js CHANGED
@@ -77,11 +77,7 @@ const Wrapper = styled.View.attrs(({ theme: { yoga } }) => {
77
77
  ` : ""}
78
78
  `;
79
79
  const StyledChips = styled(Text)`
80
- font-size: ${theme.fontSizes.xsmall}px;
81
- line-height: ${theme.lineHeights.xsmall}px;
82
-
83
80
  flex-shrink: 1;
84
-
85
81
  ${({ disabled }) => disabled ? css`
86
82
  color: ${theme.colors.text.disabled};
87
83
  ` : ""}
@@ -147,7 +143,7 @@ const Chips = React.forwardRef(
147
143
  StyledChips,
148
144
  {
149
145
  disabled,
150
- as: selected ? Text.Bold : Text,
146
+ as: selected || disabled ? Text.Overline : Text.Caption,
151
147
  selected,
152
148
  numberOfLines: 1,
153
149
  children
package/esm/Chips/web/Chips.js CHANGED
@@ -37,16 +37,9 @@ import { hexToRgb } from "@gympass/yoga-common";
37
37
  import { theme } from "../../Theme";
38
38
  import Icon from "../../Icon";
39
39
  import Counter from "./Counter";
40
+ import Text from "../../Text";
40
41
  const BORDER_OPACITY = 0.4;
41
42
  const BORDER_PRESSED_OPACITY = 0.6;
42
- const Text = styled.span`
43
- display: inline-block;
44
- box-sizing: border-box;
45
-
46
- white-space: nowrap;
47
- overflow: hidden;
48
- text-overflow: ellipsis;
49
- `;
50
43
  const Wrapper = styled.button`
51
44
  height: 32px;
52
45
  max-width: 216px;
@@ -61,16 +54,7 @@ const Wrapper = styled.button`
61
54
 
62
55
  ${(_a) => {
63
56
  var _b = _a, { selected, justAnIcon } = _b, props = __objRest(_b, ["selected", "justAnIcon"]);
64
- const {
65
- spacing,
66
- borders,
67
- colors,
68
- radii,
69
- baseFont,
70
- fontSizes,
71
- fontWeights,
72
- lineHeights
73
- } = theme(props);
57
+ const { spacing, borders, colors, radii } = theme(props);
74
58
  const commonStyles = `
75
59
 
76
60
  padding: ${justAnIcon ? `${spacing.xxsmall}px` : `${spacing.xxsmall}px ${spacing.xsmall}px`};
@@ -78,18 +62,15 @@ const Wrapper = styled.button`
78
62
  border-radius: ${radii.circle}px;
79
63
  border-width: ${borders.small}px;
80
64
 
81
- font-family: ${baseFont.family};
82
- font-size: ${fontSizes.xsmall}px;
83
- line-height: ${lineHeights.xsmall}px;
84
-
85
65
  :not(:last-child) {
86
66
  margin-right: ${spacing.xxsmall}px;
87
67
  }
88
68
 
89
69
  &[disabled] {
90
70
  background-color: ${colors.elements.backgroundAndDisabled};
91
- color: ${colors.text.disabled};
92
-
71
+ p {
72
+ color: ${colors.text.disabled};
73
+ }
93
74
  border-color: ${colors.elements.backgroundAndDisabled};
94
75
 
95
76
  cursor: not-allowed;
@@ -107,13 +88,15 @@ const Wrapper = styled.button`
107
88
  return `
108
89
  ${commonStyles}
109
90
 
91
+ p {
92
+ color: ${colors.white};
93
+ }
94
+
110
95
  background-color: ${colors.secondary};
111
- color: ${colors.white};
96
+
112
97
 
113
98
  border-color: transparent;
114
99
 
115
- font-weight: ${fontWeights.bold};
116
-
117
100
  &:hover:enabled {
118
101
  border-color: ${colors.secondary};
119
102
  }
@@ -133,17 +116,18 @@ const Wrapper = styled.button`
133
116
  border-color: ${hexToRgb(colors.secondary, BORDER_OPACITY)};
134
117
 
135
118
  background-color: ${colors.white};
136
- color: ${colors.secondary};
137
-
138
- font-weight: ${fontWeights.regular};
139
-
119
+ p {
120
+ color: ${colors.secondary};
121
+ }
140
122
  &:hover:enabled {
141
123
  border-color: ${colors.secondary};
142
124
  }
143
125
 
144
126
  &:active:enabled {
145
127
  border-color: ${hexToRgb(colors.secondary, BORDER_PRESSED_OPACITY)};
146
- color: ${hexToRgb(colors.secondary, BORDER_PRESSED_OPACITY)};
128
+ p {
129
+ color: ${hexToRgb(colors.secondary, BORDER_PRESSED_OPACITY)};
130
+ }
147
131
 
148
132
  svg {
149
133
  fill: ${hexToRgb(colors.secondary, BORDER_PRESSED_OPACITY)};
@@ -177,6 +161,7 @@ const Chips = React.forwardRef(
177
161
  ]);
178
162
  const [FirstIcon, SecondIcon] = icons;
179
163
  const justAnIcon = (icons[0] || icons[1]) && !children;
164
+ const TextComponent = selected || disabled ? Text.Overline : Text.Caption;
180
165
  return /* @__PURE__ */ jsxs(
181
166
  Wrapper,
182
167
  __spreadProps(__spreadValues({
@@ -200,7 +185,7 @@ const Chips = React.forwardRef(
200
185
  }
201
186
  }
202
187
  ),
203
- children && /* @__PURE__ */ jsx(Text, { children }),
188
+ children && /* @__PURE__ */ jsx(TextComponent, { children }),
204
189
  selected && counter && !disabled && /* @__PURE__ */ jsx(Counter, { value: counter }),
205
190
  FirstIcon && /* @__PURE__ */ jsx(
206
191
  Icon,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gympass/yoga",
3
- "version": "7.108.1",
3
+ "version": "7.108.2",
4
4
  "description": "Gympass component library",
5
5
  "main": "./cjs",
6
6
  "types": "./typings/index.d.ts",
@@ -57,7 +57,7 @@
57
57
  "react-native": "0.72.3",
58
58
  "styled-components": "^4.4.0"
59
59
  },
60
- "gitHead": "90d26ef35fee2b0323bbbac3cef453f829f1770d",
60
+ "gitHead": "332b0673dc10bf427dc8664aa774d0f7ea3156ee",
61
61
  "module": "./esm",
62
62
  "private": false,
63
63
  "react-native": "./cjs/index.native.js"