@hsu-react/ui 2.4.4 → 2.4.5

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.
@@ -12,4 +12,14 @@
12
12
  min-height: inherit;
13
13
  }
14
14
  }
15
+
16
+ // Same guard as Input: once the box is an .ant-input-affix-wrapper, `.ant-input` names
17
+ // the one-line <input> inside it, and an app sizing `.ant-input` like a bare input
18
+ // pushes that inner element out of the box and the text onto the bottom border.
19
+ // Full story in components/Input/index.module.scss.
20
+ &:global(.ant-input-affix-wrapper) > :global(.ant-input),
21
+ :global(.ant-input-affix-wrapper) > :global(.ant-input) {
22
+ height: auto;
23
+ min-height: 0px;
24
+ }
15
25
  }
@@ -19,4 +19,14 @@
19
19
  }
20
20
  }
21
21
  }
22
+
23
+ // Same guard as Input: once the box is an .ant-input-affix-wrapper, `.ant-input` names
24
+ // the one-line <input> inside it, and an app sizing `.ant-input` like a bare input
25
+ // pushes that inner element out of the box and the text onto the bottom border.
26
+ // Full story in components/Input/index.module.scss.
27
+ &:global(.ant-input-affix-wrapper) > :global(.ant-input),
28
+ :global(.ant-input-affix-wrapper) > :global(.ant-input) {
29
+ height: auto;
30
+ min-height: 0px;
31
+ }
22
32
  }
@@ -19,4 +19,23 @@
19
19
  min-height: inherit;
20
20
  }
21
21
  }
22
+
23
+ // Keep the inner <input> one line tall, whatever the app says about `.ant-input`.
24
+ //
25
+ // `.ant-input` is two different elements depending on the shape: on a bare antd input
26
+ // it is the bordered box itself, but as soon as there is a clear button, a prefix or a
27
+ // suffix — and this component turns allowClear on by default, so there almost always
28
+ // is one — the box becomes `.ant-input-affix-wrapper` and `.ant-input` moves to the
29
+ // <input> inside it. Apps carry the bare-input habit over and write
30
+ // `.some-form .ant-input { height: 32px }` meaning the box; that height lands on the
31
+ // inner input instead, which is then taller than the ~22px the wrapper's padding
32
+ // leaves it, hangs out of the bottom, and drags the text down onto the border.
33
+ //
34
+ // Three classes, so it outweighs the two-class selectors apps typically write; an app
35
+ // that really means the inner input can still say so with one more level.
36
+ &:global(.ant-input-affix-wrapper) > :global(.ant-input),
37
+ :global(.ant-input-affix-wrapper) > :global(.ant-input) {
38
+ height: auto;
39
+ min-height: 0px;
40
+ }
22
41
  }
@@ -12,4 +12,14 @@
12
12
  min-height: inherit;
13
13
  }
14
14
  }
15
+
16
+ // Same guard as Input: once the box is an .ant-input-affix-wrapper, `.ant-input` names
17
+ // the one-line <input> inside it, and an app sizing `.ant-input` like a bare input
18
+ // pushes that inner element out of the box and the text onto the bottom border.
19
+ // Full story in components/Input/index.module.scss.
20
+ &:global(.ant-input-affix-wrapper) > :global(.ant-input),
21
+ :global(.ant-input-affix-wrapper) > :global(.ant-input) {
22
+ height: auto;
23
+ min-height: 0px;
24
+ }
15
25
  }
@@ -19,4 +19,14 @@
19
19
  }
20
20
  }
21
21
  }
22
+
23
+ // Same guard as Input: once the box is an .ant-input-affix-wrapper, `.ant-input` names
24
+ // the one-line <input> inside it, and an app sizing `.ant-input` like a bare input
25
+ // pushes that inner element out of the box and the text onto the bottom border.
26
+ // Full story in components/Input/index.module.scss.
27
+ &:global(.ant-input-affix-wrapper) > :global(.ant-input),
28
+ :global(.ant-input-affix-wrapper) > :global(.ant-input) {
29
+ height: auto;
30
+ min-height: 0px;
31
+ }
22
32
  }
@@ -19,4 +19,23 @@
19
19
  min-height: inherit;
20
20
  }
21
21
  }
22
+
23
+ // Keep the inner <input> one line tall, whatever the app says about `.ant-input`.
24
+ //
25
+ // `.ant-input` is two different elements depending on the shape: on a bare antd input
26
+ // it is the bordered box itself, but as soon as there is a clear button, a prefix or a
27
+ // suffix — and this component turns allowClear on by default, so there almost always
28
+ // is one — the box becomes `.ant-input-affix-wrapper` and `.ant-input` moves to the
29
+ // <input> inside it. Apps carry the bare-input habit over and write
30
+ // `.some-form .ant-input { height: 32px }` meaning the box; that height lands on the
31
+ // inner input instead, which is then taller than the ~22px the wrapper's padding
32
+ // leaves it, hangs out of the bottom, and drags the text down onto the border.
33
+ //
34
+ // Three classes, so it outweighs the two-class selectors apps typically write; an app
35
+ // that really means the inner input can still say so with one more level.
36
+ &:global(.ant-input-affix-wrapper) > :global(.ant-input),
37
+ :global(.ant-input-affix-wrapper) > :global(.ant-input) {
38
+ height: auto;
39
+ min-height: 0px;
40
+ }
22
41
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hsu-react/ui",
3
- "version": "2.4.4",
3
+ "version": "2.4.5",
4
4
  "description": "一套基于 React + Ant Design 的中后台业务组件库",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -12,4 +12,14 @@
12
12
  min-height: inherit;
13
13
  }
14
14
  }
15
+
16
+ // Same guard as Input: once the box is an .ant-input-affix-wrapper, `.ant-input` names
17
+ // the one-line <input> inside it, and an app sizing `.ant-input` like a bare input
18
+ // pushes that inner element out of the box and the text onto the bottom border.
19
+ // Full story in components/Input/index.module.scss.
20
+ &:global(.ant-input-affix-wrapper) > :global(.ant-input),
21
+ :global(.ant-input-affix-wrapper) > :global(.ant-input) {
22
+ height: auto;
23
+ min-height: 0px;
24
+ }
15
25
  }
@@ -19,4 +19,14 @@
19
19
  }
20
20
  }
21
21
  }
22
+
23
+ // Same guard as Input: once the box is an .ant-input-affix-wrapper, `.ant-input` names
24
+ // the one-line <input> inside it, and an app sizing `.ant-input` like a bare input
25
+ // pushes that inner element out of the box and the text onto the bottom border.
26
+ // Full story in components/Input/index.module.scss.
27
+ &:global(.ant-input-affix-wrapper) > :global(.ant-input),
28
+ :global(.ant-input-affix-wrapper) > :global(.ant-input) {
29
+ height: auto;
30
+ min-height: 0px;
31
+ }
22
32
  }
@@ -19,4 +19,23 @@
19
19
  min-height: inherit;
20
20
  }
21
21
  }
22
+
23
+ // Keep the inner <input> one line tall, whatever the app says about `.ant-input`.
24
+ //
25
+ // `.ant-input` is two different elements depending on the shape: on a bare antd input
26
+ // it is the bordered box itself, but as soon as there is a clear button, a prefix or a
27
+ // suffix — and this component turns allowClear on by default, so there almost always
28
+ // is one — the box becomes `.ant-input-affix-wrapper` and `.ant-input` moves to the
29
+ // <input> inside it. Apps carry the bare-input habit over and write
30
+ // `.some-form .ant-input { height: 32px }` meaning the box; that height lands on the
31
+ // inner input instead, which is then taller than the ~22px the wrapper's padding
32
+ // leaves it, hangs out of the bottom, and drags the text down onto the border.
33
+ //
34
+ // Three classes, so it outweighs the two-class selectors apps typically write; an app
35
+ // that really means the inner input can still say so with one more level.
36
+ &:global(.ant-input-affix-wrapper) > :global(.ant-input),
37
+ :global(.ant-input-affix-wrapper) > :global(.ant-input) {
38
+ height: auto;
39
+ min-height: 0px;
40
+ }
22
41
  }