@pingux/astro 2.1.0-alpha.1 → 2.1.0-alpha.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 (5) hide show
  1. package/lib/cjs/components/TextAreaField/TextAreaField.js +5 -4
  2. package/lib/cjs/recipes/LinkedListView.stories.js +5 -27
  3. package/lib/components/TextAreaField/TextAreaField.js +5 -4
  4. package/lib/recipes/LinkedListView.stories.js +5 -27
  5. package/package.json +1 -1
package/lib/cjs/components/TextAreaField/TextAreaField.js CHANGED
@@ -131,10 +131,11 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
131
131
  rows: rows,
132
132
  variant: "forms.textarea.baseField"
133
133
  }, fieldControlInputProps, {
134
- sx: slots !== null && slots !== void 0 && slots.inContainer ? {
135
- paddingRight: '35px'
136
- } : {
137
- overflow: 'hidden'
134
+ // DO NOT put paddingRight and overflow into sx object.
135
+ /// It will cause issue with resizing in Safari browser.
136
+ paddingRight: (slots === null || slots === void 0 ? void 0 : slots.inContainer) && 35,
137
+ style: {
138
+ overflow: !(slots !== null && slots !== void 0 && slots.inContainer) && 'hidden'
138
139
  },
139
140
  "aria-invalid": status === 'error' && true,
140
141
  "aria-describedby": helperText && helperTextId
package/lib/cjs/recipes/LinkedListView.stories.js CHANGED
@@ -170,35 +170,10 @@ var sx = {
170
170
  marginRight: 'auto'
171
171
  }
172
172
  },
173
- listViewItem: {
174
- minHeight: '75px',
175
- padding: 1,
176
- '&.has-inset-separator': {
177
- '&:before': {
178
- borderBottom: '1px solid',
179
- borderBottomColor: 'line.light',
180
- bottom: 0,
181
- content: '""',
182
- position: 'absolute',
183
- right: 0,
184
- width: 'calc(100% - 43px)'
185
- }
186
- },
187
- '&.is-focused': {
188
- '&:after': {
189
- borderBottomColor: 'focus',
190
- bottom: 0,
191
- content: '""',
192
- position: 'absolute',
193
- right: 0,
194
- width: 'calc(100% - 43px)'
195
- }
196
- }
197
- },
198
173
  topBracket: {
199
174
  top: 50,
200
175
  left: 12,
201
- bottom: 0,
176
+ bottom: -1,
202
177
  position: 'absolute'
203
178
  }
204
179
  };
@@ -446,7 +421,10 @@ var Default = function Default(_ref) {
446
421
  textValue: item.name,
447
422
  "data-id": item.key,
448
423
  listItemProps: {
449
- sx: sx.listViewItem
424
+ variant: 'listViewItem.linkedViewContainer',
425
+ sx: {
426
+ padding: 1
427
+ }
450
428
  }
451
429
  }), (0, _react2.jsx)(ListElement, (0, _extends2["default"])({
452
430
  isParent: item.childrenObjects,
package/lib/components/TextAreaField/TextAreaField.js CHANGED
@@ -121,10 +121,11 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
121
121
  rows: rows,
122
122
  variant: "forms.textarea.baseField"
123
123
  }, fieldControlInputProps, {
124
- sx: slots !== null && slots !== void 0 && slots.inContainer ? {
125
- paddingRight: '35px'
126
- } : {
127
- overflow: 'hidden'
124
+ // DO NOT put paddingRight and overflow into sx object.
125
+ /// It will cause issue with resizing in Safari browser.
126
+ paddingRight: (slots === null || slots === void 0 ? void 0 : slots.inContainer) && 35,
127
+ style: {
128
+ overflow: !(slots !== null && slots !== void 0 && slots.inContainer) && 'hidden'
128
129
  },
129
130
  "aria-invalid": status === 'error' && true,
130
131
  "aria-describedby": helperText && helperTextId
package/lib/recipes/LinkedListView.stories.js CHANGED
@@ -156,35 +156,10 @@ var sx = {
156
156
  marginRight: 'auto'
157
157
  }
158
158
  },
159
- listViewItem: {
160
- minHeight: '75px',
161
- padding: 1,
162
- '&.has-inset-separator': {
163
- '&:before': {
164
- borderBottom: '1px solid',
165
- borderBottomColor: 'line.light',
166
- bottom: 0,
167
- content: '""',
168
- position: 'absolute',
169
- right: 0,
170
- width: 'calc(100% - 43px)'
171
- }
172
- },
173
- '&.is-focused': {
174
- '&:after': {
175
- borderBottomColor: 'focus',
176
- bottom: 0,
177
- content: '""',
178
- position: 'absolute',
179
- right: 0,
180
- width: 'calc(100% - 43px)'
181
- }
182
- }
183
- },
184
159
  topBracket: {
185
160
  top: 50,
186
161
  left: 12,
187
- bottom: 0,
162
+ bottom: -1,
188
163
  position: 'absolute'
189
164
  }
190
165
  };
@@ -432,7 +407,10 @@ export var Default = function Default(_ref) {
432
407
  textValue: item.name,
433
408
  "data-id": item.key,
434
409
  listItemProps: {
435
- sx: sx.listViewItem
410
+ variant: 'listViewItem.linkedViewContainer',
411
+ sx: {
412
+ padding: 1
413
+ }
436
414
  }
437
415
  }), ___EmotionJSX(ListElement, _extends({
438
416
  isParent: item.childrenObjects,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.1.0-alpha.1",
3
+ "version": "2.1.0-alpha.3",
4
4
  "description": "PingUX themeable React component library",
5
5
  "repository": {
6
6
  "type": "git",