@toptal/picasso-form 1.0.1 → 1.1.0

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-package/src/FormLabel/FormLabel.d.ts +2 -0
  2. package/dist-package/src/FormLabel/FormLabel.d.ts.map +1 -1
  3. package/dist-package/src/FormLabel/FormLabel.js +3 -2
  4. package/dist-package/src/FormLabel/FormLabel.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/FormLabel/FormLabel.tsx +6 -0
  7. package/src/FormLabel/__snapshots__/test.tsx.snap +31 -0
  8. package/src/FormLabel/test.tsx +15 -0
package/dist-package/src/FormLabel/FormLabel.d.ts CHANGED
@@ -20,6 +20,8 @@ export interface Props extends BaseProps, TextLabelProps, HTMLAttributes<HTMLLab
20
20
  size?: SizeType<'medium' | 'large'>;
21
21
  /** Whether label should be aligned to top of the container or not */
22
22
  alignment?: 'top' | 'middle';
23
+ /** Label's end adornment */
24
+ labelEndAdornment?: ReactNode;
23
25
  }
24
26
  export declare const FormLabel: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLabelElement>>;
25
27
  export default FormLabel;
package/dist-package/src/FormLabel/FormLabel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormLabel.d.ts","sourceRoot":"","sources":["../../../src/FormLabel/FormLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,QAAQ,EACT,MAAM,wBAAwB,CAAA;AAO/B,aAAK,aAAa,GAAG,OAAO,GAAG,MAAM,CAAA;AACrC,oBAAY,kBAAkB,GAAG,UAAU,GAAG,UAAU,CAAA;AAExD,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,cAAc,CAAC,gBAAgB,GAAG,eAAe,CAAC;IACpD,2BAA2B;IAC3B,QAAQ,EAAE,SAAS,CAAA;IACnB,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,yEAAyE;IACzE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,uCAAuC;IACvC,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC,QAAQ,GAAG,OAAO,CAAC,CAAA;IACnC,qEAAqE;IACrE,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;CAC7B;AAID,eAAO,MAAM,SAAS,gFAqDpB,CAAA;AAUF,eAAe,SAAS,CAAA"}
1
+ {"version":3,"file":"FormLabel.d.ts","sourceRoot":"","sources":["../../../src/FormLabel/FormLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,QAAQ,EACT,MAAM,wBAAwB,CAAA;AAO/B,aAAK,aAAa,GAAG,OAAO,GAAG,MAAM,CAAA;AACrC,oBAAY,kBAAkB,GAAG,UAAU,GAAG,UAAU,CAAA;AAExD,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,cAAc,CAAC,gBAAgB,GAAG,eAAe,CAAC;IACpD,2BAA2B;IAC3B,QAAQ,EAAE,SAAS,CAAA;IACnB,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,yEAAyE;IACzE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,uCAAuC;IACvC,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC,QAAQ,GAAG,OAAO,CAAC,CAAA;IACnC,qEAAqE;IACrE,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC5B,4BAA4B;IAC5B,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAC9B;AAID,eAAO,MAAM,SAAS,gFAyDpB,CAAA;AAUF,eAAe,SAAS,CAAA"}
package/dist-package/src/FormLabel/FormLabel.js CHANGED
@@ -18,7 +18,7 @@ import styles from './styles';
18
18
  import { useFieldsLayoutContext } from '../FieldsLayout';
19
19
  const useStyles = makeStyles(styles, { name: 'PicassoFormLabel' });
20
20
  export const FormLabel = forwardRef(function FormLabel(props, ref) {
21
- const { children, disabled, htmlFor, className, style, inline, as: Component = 'label', titleCase: propsTitleCase, requiredDecoration, size = 'medium', alignment = 'middle' } = props, rest = __rest(props, ["children", "disabled", "htmlFor", "className", "style", "inline", "as", "titleCase", "requiredDecoration", "size", "alignment"]);
21
+ const { children, disabled, htmlFor, className, style, inline, as: Component = 'label', titleCase: propsTitleCase, requiredDecoration, size = 'medium', alignment = 'middle', labelEndAdornment } = props, rest = __rest(props, ["children", "disabled", "htmlFor", "className", "style", "inline", "as", "titleCase", "requiredDecoration", "size", "alignment", "labelEndAdornment"]);
22
22
  const classes = useStyles(props);
23
23
  const isInline = inline || Component === 'span';
24
24
  const titleCase = useTitleCase(propsTitleCase);
@@ -32,7 +32,8 @@ export const FormLabel = forwardRef(function FormLabel(props, ref) {
32
32
  React.createElement("span", { className: classes[size] },
33
33
  requiredDecoration === 'asterisk' && (React.createElement("span", { className: classes.asterisk }, "*")),
34
34
  titleCase ? toTitleCase(children) : children,
35
- requiredDecoration === 'optional' && ' (optional)')));
35
+ requiredDecoration === 'optional' && ' (optional)',
36
+ labelEndAdornment)));
36
37
  });
37
38
  FormLabel.defaultProps = {
38
39
  as: 'label',
package/dist-package/src/FormLabel/FormLabel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormLabel.js","sourceRoot":"","sources":["../../../src/FormLabel/FormLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAM3B,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAEnD,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAA;AA2BxD,MAAM,SAAS,GAAG,UAAU,CAAe,MAAM,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,CAAA;AAEhF,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAA0B,SAAS,SAAS,CAC7E,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAK,EACL,MAAM,EACN,EAAE,EAAE,SAAS,GAAG,OAAO,EACvB,SAAS,EAAE,cAAc,EACzB,kBAAkB,EAClB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,QAAQ,KAElB,KAAK,EADJ,IAAI,UACL,KAAK,EAbH,iIAaL,CAAQ,CAAA;IAET,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAEhC,MAAM,QAAQ,GAAG,MAAM,IAAI,SAAS,KAAK,MAAM,CAAA;IAC/C,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,CAAC,CAAA;IAC9C,MAAM,EAAE,MAAM,EAAE,GAAG,sBAAsB,EAAE,CAAA;IAE3C,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CACX,OAAO,CAAC,IAAI,EACZ;YACE,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC5B,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,QAAQ;YAC1B,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE,MAAM,KAAK,YAAY;YACnD,CAAC,OAAO,CAAC,YAAY,CAAC,EACpB,MAAM,KAAK,YAAY,IAAI,SAAS,KAAK,KAAK;SACjD,EACD,SAAS,CACV,EACD,KAAK,EAAE,KAAK;QAEZ,8BAAM,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC;YAC3B,kBAAkB,KAAK,UAAU,IAAI,CACpC,8BAAM,SAAS,EAAE,OAAO,CAAC,QAAQ,QAAU,CAC5C;YAEA,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ;YAC5C,kBAAkB,KAAK,UAAU,IAAI,aAAa,CAC9C,CACG,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,SAAS,CAAC,YAAY,GAAG;IACvB,EAAE,EAAE,OAAO;IACX,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,QAAQ;CACf,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,eAAe,SAAS,CAAA"}
1
+ {"version":3,"file":"FormLabel.js","sourceRoot":"","sources":["../../../src/FormLabel/FormLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAM3B,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAEnD,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAA;AA6BxD,MAAM,SAAS,GAAG,UAAU,CAAe,MAAM,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,CAAA;AAEhF,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAA0B,SAAS,SAAS,CAC7E,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAK,EACL,MAAM,EACN,EAAE,EAAE,SAAS,GAAG,OAAO,EACvB,SAAS,EAAE,cAAc,EACzB,kBAAkB,EAClB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,QAAQ,EACpB,iBAAiB,KAEf,KAAK,EADJ,IAAI,UACL,KAAK,EAdH,sJAcL,CAAQ,CAAA;IAET,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAEhC,MAAM,QAAQ,GAAG,MAAM,IAAI,SAAS,KAAK,MAAM,CAAA;IAC/C,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,CAAC,CAAA;IAC9C,MAAM,EAAE,MAAM,EAAE,GAAG,sBAAsB,EAAE,CAAA;IAE3C,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CACX,OAAO,CAAC,IAAI,EACZ;YACE,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC5B,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,QAAQ;YAC1B,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE,MAAM,KAAK,YAAY;YACnD,CAAC,OAAO,CAAC,YAAY,CAAC,EACpB,MAAM,KAAK,YAAY,IAAI,SAAS,KAAK,KAAK;SACjD,EACD,SAAS,CACV,EACD,KAAK,EAAE,KAAK;QAEZ,8BAAM,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC;YAC3B,kBAAkB,KAAK,UAAU,IAAI,CACpC,8BAAM,SAAS,EAAE,OAAO,CAAC,QAAQ,QAAU,CAC5C;YAEA,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ;YAE5C,kBAAkB,KAAK,UAAU,IAAI,aAAa;YAElD,iBAAiB,CACb,CACG,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,SAAS,CAAC,YAAY,GAAG;IACvB,EAAE,EAAE,OAAO;IACX,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,QAAQ;CACf,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,eAAe,SAAS,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso-form",
3
- "version": "1.0.1",
3
+ "version": "1.1.0",
4
4
  "description": "Toptal UI components library - Form",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/FormLabel/FormLabel.tsx CHANGED
@@ -37,6 +37,8 @@ export interface Props
37
37
  size?: SizeType<'medium' | 'large'>
38
38
  /** Whether label should be aligned to top of the container or not */
39
39
  alignment?: 'top' | 'middle'
40
+ /** Label's end adornment */
41
+ labelEndAdornment?: ReactNode
40
42
  }
41
43
 
42
44
  const useStyles = makeStyles<Theme, Props>(styles, { name: 'PicassoFormLabel' })
@@ -57,6 +59,7 @@ export const FormLabel = forwardRef<HTMLLabelElement, Props>(function FormLabel(
57
59
  requiredDecoration,
58
60
  size = 'medium',
59
61
  alignment = 'middle',
62
+ labelEndAdornment,
60
63
  ...rest
61
64
  } = props
62
65
 
@@ -90,7 +93,10 @@ export const FormLabel = forwardRef<HTMLLabelElement, Props>(function FormLabel(
90
93
  )}
91
94
 
92
95
  {titleCase ? toTitleCase(children) : children}
96
+
93
97
  {requiredDecoration === 'optional' && ' (optional)'}
98
+
99
+ {labelEndAdornment}
94
100
  </span>
95
101
  </Component>
96
102
  )
package/src/FormLabel/__snapshots__/test.tsx.snap CHANGED
@@ -82,6 +82,37 @@ exports[`FormLabel required with (optional) 1`] = `
82
82
  </div>
83
83
  `;
84
84
 
85
+ exports[`FormLabel required with (optional) and with \`labelEndAdornment\` 1`] = `
86
+ <div>
87
+ <div
88
+ class="Picasso-root"
89
+ >
90
+ <form
91
+ class=""
92
+ >
93
+ <div
94
+ class="PicassoFormField-root"
95
+ data-field-has-error="false"
96
+ >
97
+ <label
98
+ class="PicassoFormLabel-root"
99
+ >
100
+ <span
101
+ class="PicassoFormLabel-medium"
102
+ >
103
+ Label
104
+ (optional)
105
+ <span>
106
+ label end adornment
107
+ </span>
108
+ </span>
109
+ </label>
110
+ </div>
111
+ </form>
112
+ </div>
113
+ </div>
114
+ `;
115
+
85
116
  exports[`FormLabel required with asterisk 1`] = `
86
117
  <div>
87
118
  <div
package/src/FormLabel/test.tsx CHANGED
@@ -16,6 +16,7 @@ const TestFormLabel = ({
16
16
  titleCase,
17
17
  htmlFor,
18
18
  inline,
19
+ labelEndAdornment,
19
20
  }: OmitInternalProps<Props>) => {
20
21
  return (
21
22
  <Form>
@@ -26,6 +27,7 @@ const TestFormLabel = ({
26
27
  titleCase={titleCase}
27
28
  htmlFor={htmlFor}
28
29
  inline={inline}
30
+ labelEndAdornment={labelEndAdornment}
29
31
  >
30
32
  {children}
31
33
  </FormLabel>
@@ -64,6 +66,19 @@ describe('FormLabel', () => {
64
66
  expect(container).toMatchSnapshot()
65
67
  })
66
68
 
69
+ it('required with (optional) and with `labelEndAdornment`', () => {
70
+ const { container } = render(
71
+ <TestFormLabel
72
+ labelEndAdornment={<span>label end adornment</span>}
73
+ requiredDecoration='optional'
74
+ >
75
+ Label
76
+ </TestFormLabel>
77
+ )
78
+
79
+ expect(container).toMatchSnapshot()
80
+ })
81
+
67
82
  it('required with asterisk', () => {
68
83
  const { container } = render(
69
84
  <TestFormLabel requiredDecoration='asterisk'>Label</TestFormLabel>