@os-design/core 1.0.303 → 1.0.304

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/dist/FormItem/index.d.ts +5 -0
  2. package/dist/FormItem/index.d.ts.map +1 -1
  3. package/dist/FormItem/index.js +9 -0
  4. package/package.json +2 -2
  5. package/src/FormItem/index.tsx +17 -1
package/dist/FormItem/index.d.ts CHANGED
@@ -22,6 +22,11 @@ export interface FormItemProps extends JsxDivProps, WithSize {
22
22
  * @default false
23
23
  */
24
24
  optional?: boolean;
25
+ /**
26
+ * Extra content rendered inside the label.
27
+ * @default undefined
28
+ */
29
+ labelExtra?: React.ReactNode;
25
30
  }
26
31
  /**
27
32
  * The wrapper of the field.
package/dist/FormItem/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormItem/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAM9D,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,QAAQ;IAC1D;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6BD;;GAEG;AACH,QAAA,MAAM,QAAQ,0GAmDb,CAAC;AAIF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormItem/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAM9D,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,QAAQ;IAC1D;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAoCD;;GAEG;AACH,QAAA,MAAM,QAAQ,0GAuDb,CAAC;AAIF,eAAe,QAAQ,CAAC"}
package/dist/FormItem/index.js CHANGED
@@ -19,6 +19,12 @@ const Optional = styled.span`
19
19
  color: ${p => clr(p.theme.formItemColorOptional)};
20
20
  margin-left: 0.3em;
21
21
  `;
22
+ const LabelExtra = styled.span`
23
+ display: inline-flex;
24
+ align-items: center;
25
+
26
+ margin-left: 0.3em;
27
+ `;
22
28
  const Help = styled.div`
23
29
  margin-top: 0.1em;
24
30
  font-size: ${p => p.theme.sizes.small}em;
@@ -36,6 +42,7 @@ const FormItem = /*#__PURE__*/forwardRef(({
36
42
  help,
37
43
  error,
38
44
  optional = false,
45
+ labelExtra,
39
46
  id,
40
47
  children,
41
48
  ...rest
@@ -57,6 +64,8 @@ const FormItem = /*#__PURE__*/forwardRef(({
57
64
  htmlFor: fieldId,
58
65
  children: [label, optional && /*#__PURE__*/_jsxs(Optional, {
59
66
  children: ["(", optionalText, ")"]
67
+ }), labelExtra && /*#__PURE__*/_jsx(LabelExtra, {
68
+ children: labelExtra
60
69
  })]
61
70
  }), /*#__PURE__*/_jsx("div", {
62
71
  id: fieldId,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@os-design/core",
3
- "version": "1.0.303",
3
+ "version": "1.0.304",
4
4
  "license": "UNLICENSED",
5
5
  "repository": "git@gitlab.com:os-team/libs/os-design.git",
6
6
  "type": "module",
@@ -58,5 +58,5 @@
58
58
  "react": "18",
59
59
  "react-dom": "18"
60
60
  },
61
- "gitHead": "0ef5d7b8bcfefd958d3a51f5181cd6de2ef5ae27"
61
+ "gitHead": "c77ed4290c60bb8c971cf1bb45140a5f7745a361"
62
62
  }
package/src/FormItem/index.tsx CHANGED
@@ -28,6 +28,11 @@ export interface FormItemProps extends JsxDivProps, WithSize {
28
28
  * @default false
29
29
  */
30
30
  optional?: boolean;
31
+ /**
32
+ * Extra content rendered inside the label.
33
+ * @default undefined
34
+ */
35
+ labelExtra?: React.ReactNode;
31
36
  }
32
37
 
33
38
  const Container = styled('div', omitEmotionProps('size'))<WithSize>`
@@ -47,6 +52,13 @@ const Optional = styled.span`
47
52
  margin-left: 0.3em;
48
53
  `;
49
54
 
55
+ const LabelExtra = styled.span`
56
+ display: inline-flex;
57
+ align-items: center;
58
+
59
+ margin-left: 0.3em;
60
+ `;
61
+
50
62
  const Help = styled.div`
51
63
  margin-top: 0.1em;
52
64
  font-size: ${(p) => p.theme.sizes.small}em;
@@ -61,7 +73,10 @@ const Error = styled(Help)`
61
73
  * The wrapper of the field.
62
74
  */
63
75
  const FormItem = forwardRef<HTMLDivElement, FormItemProps>(
64
- ({ label, help, error, optional = false, id, children, ...rest }, ref) => {
76
+ (
77
+ { label, help, error, optional = false, labelExtra, id, children, ...rest },
78
+ ref
79
+ ) => {
65
80
  const { optionalText } = useContext(FormConfigContext);
66
81
 
67
82
  const containerId = useMemo(
@@ -82,6 +97,7 @@ const FormItem = forwardRef<HTMLDivElement, FormItemProps>(
82
97
  <Label htmlFor={fieldId}>
83
98
  {label}
84
99
  {optional && <Optional>({optionalText})</Optional>}
100
+ {labelExtra && <LabelExtra>{labelExtra}</LabelExtra>}
85
101
  </Label>
86
102
  )}
87
103