@os-design/core 1.0.302 → 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 (8) 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/dist/Modal/index.d.ts.map +1 -1
  5. package/dist/Modal/index.js +4 -5
  6. package/package.json +2 -2
  7. package/src/FormItem/index.tsx +17 -1
  8. package/src/Modal/index.tsx +4 -5
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/dist/Modal/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Modal/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,QAAQ,EAId,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAsB,EAAE,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE3E,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,QAAQ;IACvD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;CACnB;AA2BD,KAAK,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAC7C,eAAO,MAAM,SAAS;;SA+Ed,MAAO,WACT;iGAtEL,CAAC;AAuJF,eAAO,MAAM,aAAa,cAF0B,IAEY,CAAC;AAEjE;;GAEG;AACH,QAAA,MAAM,KAAK,mFA+JV,CAAC;AAIF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Modal/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,QAAQ,EAId,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAsB,EAAE,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE3E,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,QAAQ;IACvD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;CACnB;AA2BD,KAAK,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAC7C,eAAO,MAAM,SAAS;;SA4ElB,MAAO,WAAW;iGAlErB,CAAC;AAsJF,eAAO,MAAM,aAAa,cAF0B,IAEY,CAAC;AAEjE;;GAEG;AACH,QAAA,MAAM,KAAK,mFA+JV,CAAC;AAIF,eAAe,KAAK,CAAC"}
package/dist/Modal/index.js CHANGED
@@ -59,12 +59,12 @@ const contentFadeOut = keyframes`
59
59
  to { transform: translateY(calc(var(--vh, 1vh) * 100 + ${MODAL_BOX_SHADOW_SIZE_EM}em)); }
60
60
  `;
61
61
  const contentFadeInXs = keyframes`
62
- from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }
63
- to { transform: translateY(6em); }
62
+ from { transform: translateX(-50%) translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }
63
+ to { transform: translateX(-50%) translateY(6em); }
64
64
  `;
65
65
  const contentFadeOutXs = keyframes`
66
- from { transform: translateY(6em); }
67
- to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }
66
+ from { transform: translateX(-50%) translateY(6em); }
67
+ to { transform: translateX(-50%) translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }
68
68
  `;
69
69
  const contentVisibleStyles = p => p.visible && css`
70
70
  animation: ${contentFadeIn} ${p.theme.transitionDelay}ms forwards;
@@ -101,7 +101,6 @@ const Content = styled('div', omitEmotionProps('visible', 'size'))`
101
101
  border-radius: ${p => p.theme.borderRadius}em;
102
102
 
103
103
  left: 50%;
104
- margin-left: ${p => -p.theme.modalWidth / 2}em;
105
104
  }
106
105
 
107
106
  ${contentVisibleStyles};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@os-design/core",
3
- "version": "1.0.302",
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": "bebbb1832f82b9c17391e60a8e7a46fc6729dbc4"
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
 
package/src/Modal/index.tsx CHANGED
@@ -153,13 +153,13 @@ const contentFadeOut = keyframes`
153
153
  `;
154
154
 
155
155
  const contentFadeInXs = keyframes`
156
- from { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }
157
- to { transform: translateY(6em); }
156
+ from { transform: translateX(-50%) translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }
157
+ to { transform: translateX(-50%) translateY(6em); }
158
158
  `;
159
159
 
160
160
  const contentFadeOutXs = keyframes`
161
- from { transform: translateY(6em); }
162
- to { transform: translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }
161
+ from { transform: translateX(-50%) translateY(6em); }
162
+ to { transform: translateX(-50%) translateY(calc(-100% - ${MODAL_BOX_SHADOW_SIZE_EM}em)); }
163
163
  `;
164
164
 
165
165
  const contentVisibleStyles = (p) =>
@@ -207,7 +207,6 @@ const Content = styled(
207
207
  border-radius: ${(p) => p.theme.borderRadius}em;
208
208
 
209
209
  left: 50%;
210
- margin-left: ${(p) => -p.theme.modalWidth / 2}em;
211
210
  }
212
211
 
213
212
  ${contentVisibleStyles};