@pareto-engineering/design-system 4.0.0-alpha.42 → 4.0.0-alpha.44

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 (45) hide show
  1. package/dist/cjs/a/Removable/Removable.js +72 -0
  2. package/dist/cjs/a/Removable/index.js +13 -0
  3. package/dist/cjs/a/Removable/styles.scss +33 -0
  4. package/dist/cjs/a/index.js +8 -1
  5. package/dist/cjs/b/Button/Button.js +2 -1
  6. package/dist/cjs/b/Button/styles.scss +3 -3
  7. package/dist/cjs/f/common/Description/Description.js +5 -4
  8. package/dist/cjs/f/fields/Checkbox/styles.scss +1 -0
  9. package/dist/cjs/f/fields/ChoicesInput/styles.scss +1 -1
  10. package/dist/cjs/f/fields/EditorInput/EditorInput.js +0 -1
  11. package/dist/cjs/f/fields/EditorInput/common/Toolbar.js +64 -0
  12. package/dist/cjs/f/fields/EditorInput/styles.scss +26 -0
  13. package/dist/cjs/f/fields/TextInput/TextInput.js +3 -3
  14. package/dist/es/a/Removable/Removable.js +64 -0
  15. package/dist/es/a/Removable/index.js +2 -0
  16. package/dist/es/a/Removable/styles.scss +33 -0
  17. package/dist/es/a/index.js +2 -1
  18. package/dist/es/b/Button/Button.js +2 -1
  19. package/dist/es/b/Button/styles.scss +3 -3
  20. package/dist/es/f/common/Description/Description.js +5 -4
  21. package/dist/es/f/fields/Checkbox/styles.scss +1 -0
  22. package/dist/es/f/fields/ChoicesInput/styles.scss +1 -1
  23. package/dist/es/f/fields/EditorInput/EditorInput.js +0 -1
  24. package/dist/es/f/fields/EditorInput/common/Toolbar.js +66 -2
  25. package/dist/es/f/fields/EditorInput/styles.scss +26 -0
  26. package/dist/es/f/fields/TextInput/TextInput.js +3 -3
  27. package/package.json +3 -3
  28. package/src/stories/a/AppContext.stories.jsx +2 -2
  29. package/src/stories/a/Removable.stories.jsx +22 -0
  30. package/src/stories/b/SocialMediaButton.stories.jsx +2 -2
  31. package/src/stories/colors.js +2 -0
  32. package/src/ui/a/Removable/Removable.jsx +85 -0
  33. package/src/ui/a/Removable/index.js +2 -0
  34. package/src/ui/a/Removable/styles.scss +33 -0
  35. package/src/ui/a/index.js +1 -0
  36. package/src/ui/b/Button/Button.jsx +2 -0
  37. package/src/ui/b/Button/styles.scss +3 -3
  38. package/src/ui/f/common/Description/Description.jsx +5 -4
  39. package/src/ui/f/fields/Checkbox/styles.scss +1 -0
  40. package/src/ui/f/fields/ChoicesInput/styles.scss +1 -1
  41. package/src/ui/f/fields/EditorInput/EditorInput.jsx +0 -1
  42. package/src/ui/f/fields/EditorInput/common/Toolbar.jsx +103 -1
  43. package/src/ui/f/fields/EditorInput/styles.scss +26 -0
  44. package/src/ui/f/fields/TextInput/TextInput.jsx +2 -1
  45. package/tests/__snapshots__/Storyshots.test.js.snap +1027 -11
package/src/ui/f/fields/EditorInput/styles.scss CHANGED
@@ -15,6 +15,7 @@ $active-background: var(--hard-background-inputs);
15
15
  $default-background: var(--background-inputs);
16
16
  $default-icon-color: var(--on-background-inputs);
17
17
  $disabled-background: var(--background-inputs-30);
18
+ $default-color-menu-padding: .5em .25em;
18
19
 
19
20
  .#{bem.$base}.editor-input {
20
21
  &.#{bem.$base}.input-wrapper {
@@ -62,6 +63,31 @@ $disabled-background: var(--background-inputs-30);
62
63
  }
63
64
  }
64
65
 
66
+ .color-menu-button {
67
+ &:hover {
68
+ > .#{bem.$base}.popover {
69
+ display: block;
70
+ }
71
+ }
72
+
73
+ > .#{bem.$base}.popover {
74
+ padding: $default-color-menu-padding;
75
+
76
+ .color-menu {
77
+ display: flex;
78
+ flex-wrap: wrap;
79
+ gap: calc($default-gap / 2);
80
+ justify-content: center;
81
+ max-width: 10em;
82
+ min-width: 5em;
83
+ }
84
+
85
+ .color-option:hover {
86
+ opacity: .5;
87
+ }
88
+ }
89
+ }
90
+
65
91
  > .content-editable {
66
92
  background: $default-background;
67
93
  border: $default-border;
package/src/ui/f/fields/TextInput/TextInput.jsx CHANGED
@@ -40,7 +40,7 @@ const TextInput = ({
40
40
  inputSpan,
41
41
  desktopInputSpan,
42
42
  symbol,
43
- // ...otherProps
43
+ ...otherProps
44
44
  }) => {
45
45
  useInsertionEffect(() => {
46
46
  import('./styles.scss')
@@ -88,6 +88,7 @@ const TextInput = ({
88
88
  placeholder={placeholder}
89
89
  autoComplete={autoComplete}
90
90
  {...field}
91
+ {...otherProps}
91
92
  />
92
93
  <FormDescription className="s-1" description={description} name={name} />
93
94
  </InputWrapper>