Merge branch 'main' into heartsquared/remove-classNameOverride-global…

…-sb-arg
cultureamp · Sep 13, 2023 · 10cb624 · 10cb624
2 parents 271ddd7 + 05bd34d
commit 10cb624
Show file tree

Hide file tree

Showing 27 changed files with 158 additions and 27 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,9 @@
-/packages/**/dist
+/packages/**/dist
+/draft-packages/**/*.js
+/draft-packages/**/*.js.map
+/draft-packages/**/*.d.ts
+/packages/**/*.js
+!/packages/**/*.config.js
+!/packages/**/svgMock.js
+/packages/**/*.js.map
+/packages/**/*.d.ts
diff --git a/draft-packages/form/CHANGELOG.md b/draft-packages/form/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 10.5.0
+
+### Minor Changes
+
+- [#16](https://github.com/cultureamp/kaizen-legacy/pull/16) [`a8c5121`](https://github.com/cultureamp/kaizen-legacy/commit/a8c5121f200cfba7281e1b2e1298647771cd8e71) - add margin top to input and button to match labels from other components
+
 ## 10.4.9
 
 ### Patch Changes

diff --git a/draft-packages/form/KaizenDraft/Form/TextField/TextField.module.scss b/draft-packages/form/KaizenDraft/Form/TextField/TextField.module.scss
@@ -14,6 +14,10 @@
   }
 }
 
+.input {
+  margin-top: $spacing-6;
+}
+
 $input-disabled-opacity: 0.3;
 
 ///////////////////////////////////////////////////

diff --git a/draft-packages/form/KaizenDraft/Form/TextField/TextField.tsx b/draft-packages/form/KaizenDraft/Form/TextField/TextField.tsx
@@ -85,6 +85,7 @@ export const TextField = ({
         id={`${id}-field-input`}
         automationId={`${id}-field-input`}
         ariaDescribedBy={ariaDescribedBy}
+        classNameOverride={styles.input}
         disabled={disabled}
         reversed={reversed}
         status={status}

diff --git a/draft-packages/form/package.json b/draft-packages/form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/draft-form",
-  "version": "10.4.9",
+  "version": "10.5.0",
   "description": "The draft Form component",
   "scripts": {
     "prepublishOnly": "tsc --project tsconfig.dist.json",

diff --git a/draft-packages/table/CHANGELOG.md b/draft-packages/table/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Change Log
 
+## 5.9.5
+
+### Patch Changes
+
+- [#19](https://github.com/cultureamp/kaizen-legacy/pull/19) [`130cb0c`](https://github.com/cultureamp/kaizen-legacy/commit/130cb0cc61b864fcbe2aac0291381212240be6f2) - fix checkbox focus on table header row
+
+- Updated dependencies [[`a8c5121`](https://github.com/cultureamp/kaizen-legacy/commit/a8c5121f200cfba7281e1b2e1298647771cd8e71)]:
+  - @kaizen/draft-form@10.5.0
+
 ## 5.9.4
 
 ### Patch Changes

diff --git a/draft-packages/table/KaizenDraft/Table/Table.module.scss b/draft-packages/table/KaizenDraft/Table/Table.module.scss
@@ -70,6 +70,10 @@ $row-height-data-variant: 48px;
 .headerRowCell .headerRowCellTooltip {
   display: flex;
   align-items: stretch;
+}
+
+// overflow has to be set at this level as well as on the heading for some reason ¯\_(ツ)_/¯
+.headerRowCell.headerRowCellNoWrap .headerRowCellTooltip {
   overflow: hidden;
 }
 

diff --git a/draft-packages/table/package.json b/draft-packages/table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/draft-table",
-  "version": "5.9.4",
+  "version": "5.9.5",
   "description": "The draft Table component",
   "scripts": {
     "prepublishOnly": "tsc --project tsconfig.dist.json",
@@ -27,7 +27,7 @@
   "dependencies": {
     "@kaizen/component-base": "^1.1.7",
     "@kaizen/component-library": "^16.9.3",
-    "@kaizen/draft-form": "^10.4.9",
+    "@kaizen/draft-form": "^10.5.0",
     "@kaizen/draft-tooltip": "^5.4.47",
     "@kaizen/typography": "^2.3.11",
     "classnames": "^2.3.2"

diff --git a/packages/date-picker/CHANGELOG.md b/packages/date-picker/CHANGELOG.md
@@ -1,5 +1,28 @@
 # Change Log
 
+## 6.3.2
+
+### Patch Changes
+
+- [#24](https://github.com/cultureamp/kaizen-legacy/pull/24) [`948b07c`](https://github.com/cultureamp/kaizen-legacy/commit/948b07c671aa8c364741ee2fe1bc5aeb47d96a0a) - Align spacing and disabled state with DatePicker
+
+## 6.3.1
+
+### Patch Changes
+
+- [#20](https://github.com/cultureamp/kaizen-legacy/pull/20) [`40474b5`](https://github.com/cultureamp/kaizen-legacy/commit/40474b5345f913876bf9574a5d2372d6f3d7d914) - align text right for rtl
+
+## 6.3.0
+
+### Minor Changes
+
+- [#16](https://github.com/cultureamp/kaizen-legacy/pull/16) [`a8c5121`](https://github.com/cultureamp/kaizen-legacy/commit/a8c5121f200cfba7281e1b2e1298647771cd8e71) - add margin top to input and button to match labels from other components
+
+### Patch Changes
+
+- Updated dependencies [[`a8c5121`](https://github.com/cultureamp/kaizen-legacy/commit/a8c5121f200cfba7281e1b2e1298647771cd8e71)]:
+  - @kaizen/draft-form@10.5.0
+
 ## 6.2.5
 
 ### Patch Changes

diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/date-picker",
-  "version": "6.2.5",
+  "version": "6.3.2",
   "description": "Date Picker component",
   "scripts": {
     "prepublishOnly": "tsc --project tsconfig.dist.json",
@@ -28,7 +28,7 @@
     "@internationalized/date": "^3.4.0",
     "@kaizen/a11y": "^1.7.12",
     "@kaizen/component-base": "^1.1.7",
-    "@kaizen/draft-form": "^10.4.9",
+    "@kaizen/draft-form": "^10.5.0",
     "@kaizen/draft-tooltip": "^5.4.47",
     "@kaizen/typography": "^2.3.11",
     "@popperjs/core": "^2.11.8",

diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.module.scss b/packages/date-picker/src/DateRangePicker/DateRangePicker.module.scss
@@ -31,8 +31,13 @@ $placeholder-opacity: 0.7;
   background-clip: padding-box;
   border: $border-solid-border-width $border-solid-border-style $color-gray-500;
   border-radius: $border-solid-border-radius;
+  margin-top: $spacing-6;
   padding: 0 $button-base-padding-horizontal;
 
+  [dir="rtl"] & {
+    text-align: right;
+  }
+
   &:focus-visible:not([disabled]),
   &:hover:not([disabled]) {
     background-color: $color-gray-200;

diff --git a/packages/date-picker/src/TimeField/TimeField.module.scss b/packages/date-picker/src/TimeField/TimeField.module.scss
@@ -22,6 +22,10 @@ $story-className--timefield-focus: ":global(.story__timefield-focus)";
   color: $color-purple-800;
 }
 
+.heading {
+  margin-bottom: $spacing-6;
+}
+
 .input {
   display: inline-flex;
   align-items: center;

diff --git a/packages/date-picker/src/TimeField/TimeField.tsx b/packages/date-picker/src/TimeField/TimeField.tsx
@@ -97,7 +97,15 @@ const TimeFieldComponent = ({
   )
   return (
     <div className={classNameOverride}>
-      <Heading tag="div" variant="heading-6" {...labelProps}>
+      <Heading
+        tag="div"
+        variant="heading-6"
+        {...labelProps}
+        classNameOverride={classnames(
+          styles.heading,
+          state.isDisabled && styles.isDisabled
+        )}
+      >
         {label}
       </Heading>
       <div className={styles.wrapper}>

diff --git a/packages/date-picker/src/_subcomponents/DateInput/DateInput.module.scss b/packages/date-picker/src/_subcomponents/DateInput/DateInput.module.scss
@@ -1,3 +1,9 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+
 .dateInput {
   width: 100%;
 }
+
+.input {
+  margin-top: $spacing-6;
+}
diff --git a/packages/date-picker/src/_subcomponents/DateInput/DateInput.tsx b/packages/date-picker/src/_subcomponents/DateInput/DateInput.tsx
@@ -34,6 +34,7 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
         inputRef={isRefObject(ref) ? ref : undefined}
         id={id}
         autoComplete="off"
+        classNameOverride={styles.input}
         disabled={disabled}
         reversed={isReversed}
         {...inputProps}

diff --git a/packages/rich-text-editor/CHANGELOG.md b/packages/rich-text-editor/CHANGELOG.md
@@ -1,5 +1,29 @@
 # Change Log
 
+## 3.0.0
+
+### Major Changes
+
+- [#29](https://github.com/cultureamp/kaizen-legacy/pull/29) [`c377231`](https://github.com/cultureamp/kaizen-legacy/commit/c37723116f29b628631ff0298ae64841c9c3a882) - Rename `value` prop to reflect uncontrolled form field
+
+  To conform to React naming convention for form control props.
+  Uncontrolled form fields take a `defaultValue` to indicate that
+  changes to this prop's value will not update the mounted component.
+  Rather, the component manages its current value as internal state,
+  and notifies subscribers via `onChange` when it changes.
+
+  Consumers will need to update their code to the new prop name. E.g. before:
+
+  ```jsx
+  <RichTextEditor value={…}>
+  ```
+
+  and after:
+
+  ```jsx
+  <RichTextEditor defaultValue={…}>
+  ```
+
 ## 2.2.11
 
 ### Patch Changes

diff --git a/packages/rich-text-editor/docs/EditableRichTextContent.stories.tsx b/packages/rich-text-editor/docs/EditableRichTextContent.stories.tsx
@@ -60,7 +60,7 @@ function InlineEditor(props: {
             { name: "bulletList", group: "list" },
             { name: "link", group: "link" },
           ]}
-          value={rteData}
+          defaultValue={rteData}
           onChange={handleOnChange}
         />
         <Box mt={0.5} style={{ display: "flex", justifyContent: "end" }}>

diff --git a/packages/rich-text-editor/docs/RichTextEditor.stories.tsx b/packages/rich-text-editor/docs/RichTextEditor.stories.tsx
@@ -9,7 +9,7 @@ import dummyContent from "./dummyContent.json"
 import dummyMalformedContent from "./dummyMalformedContent.json"
 
 type RTEStory = StoryFn<
-  Omit<RichTextEditorProps, "value" | "onChange" | "aria-labelledby">
+  Omit<RichTextEditorProps, "defaultValue" | "onChange" | "aria-labelledby">
 >
 
 export default {
@@ -32,7 +32,7 @@ export const Default: RTEStory = ({ labelText, ...args }) => {
   return (
     <RichTextEditor
       labelText={labelText}
-      value={rteData}
+      defaultValue={rteData}
       onChange={handleOnChange}
       {...args}
     />
@@ -60,7 +60,7 @@ export const WithData: RTEStory = ({ labelText, ...args }) => {
   return (
     <RichTextEditor
       labelText={labelText}
-      value={rteData}
+      defaultValue={rteData}
       onChange={handleOnChange}
       {...args}
     />
@@ -89,7 +89,7 @@ export const WithBadData: RTEStory = ({ labelText, ...args }) => {
   return (
     <RichTextEditor
       labelText={labelText}
-      value={rteData}
+      defaultValue={rteData}
       onChange={handleOnChange}
       {...args}
     />
@@ -121,14 +121,14 @@ export const WithDescriptionAndValidationMessage: RTEStory = ({
     <>
       <RichTextEditor
         labelText={labelText}
-        value={rteData}
+        defaultValue={rteData}
         onChange={handleOnChange}
         status="error"
         {...args}
       />
       <RichTextEditor
         labelText={labelText}
-        value={rteData}
+        defaultValue={rteData}
         onChange={handleOnChange}
         status="caution"
         {...args}

diff --git a/packages/rich-text-editor/package.json b/packages/rich-text-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/rich-text-editor",
-  "version": "2.2.11",
+  "version": "3.0.0",
   "description": "The RichTextEditor component",
   "scripts": {
     "prepublishOnly": "tsc --project tsconfig.dist.json",

diff --git a/packages/rich-text-editor/src/RichTextEditor/RichTextEditor.spec.stories.tsx b/packages/rich-text-editor/src/RichTextEditor/RichTextEditor.spec.stories.tsx
@@ -21,7 +21,7 @@ const TestBase: Story = {
     return (
       <RichTextEditor
         labelText="Label"
-        value={rteData}
+        defaultValue={rteData}
         onChange={handleOnChange}
         rows={3}
         controls={[

diff --git a/packages/rich-text-editor/src/RichTextEditor/RichTextEditor.spec.tsx b/packages/rich-text-editor/src/RichTextEditor/RichTextEditor.spec.tsx
@@ -18,8 +18,11 @@ const getSelectionOfNode = (node: Node): void => {
 }
 
 const TestRTE = (
-  args: Omit<RichTextEditorProps, "value" | "onChange" | "aria-labelledby"> & {
-    rteMockData?: RichTextEditorProps["value"]
+  args: Omit<
+    RichTextEditorProps,
+    "defaultValue" | "onChange" | "aria-labelledby"
+  > & {
+    rteMockData?: RichTextEditorProps["defaultValue"]
   }
 ): JSX.Element => {
   const { rteMockData, ...rest } = args
@@ -34,7 +37,7 @@ const TestRTE = (
         { name: "orderedList", group: "list" },
         { name: "bulletList", group: "list" },
       ]}
-      value={rteData}
+      defaultValue={rteData}
       onChange={handleOnChange}
       {...rest}
     />

diff --git a/packages/rich-text-editor/src/RichTextEditor/RichTextEditor.tsx b/packages/rich-text-editor/src/RichTextEditor/RichTextEditor.tsx
@@ -23,10 +23,10 @@ import styles from "./RichTextEditor.module.scss"
 
 export interface BaseRichTextEditorProps
   extends OverrideClassName<
-    Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "content">
+    Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue">
   > {
   onChange: (content: ProseMirrorState.EditorState) => void
-  value: EditorContentArray
+  defaultValue: EditorContentArray
   controls?: ToolbarItems[]
   /**
    * Sets a default min-height for the editable area in units of body paragraph line height, similar to the 'rows' attribute on <textarea>.
@@ -64,7 +64,7 @@ export type RichTextEditorProps = RTEWithLabelText | RTEWithLabelledBy
 export const RichTextEditor = (props: RichTextEditorProps): JSX.Element => {
   const {
     onChange,
-    value,
+    defaultValue,
     labelText,
     "aria-labelledby": labelledBy,
     classNameOverride,
@@ -93,7 +93,8 @@ export const RichTextEditor = (props: RichTextEditorProps): JSX.Element => {
             type: "doc",
             // we're converting empty arrays to the ProseMirror default "empty" state because when
             // given an empty array ProseMirror returns undefined, breaking the type
-            content: value?.length > 0 ? value : [{ type: "paragraph" }],
+            content:
+              defaultValue?.length > 0 ? defaultValue : [{ type: "paragraph" }],
           }),
           schema,
           plugins: getPlugins(controls, schema),

diff --git a/packages/select/CHANGELOG.md b/packages/select/CHANGELOG.md
@@ -1,5 +1,26 @@
 # Change Log
 
+## 6.20.1
+
+### Patch Changes
+
+- [#27](https://github.com/cultureamp/kaizen-legacy/pull/27) [`1d5f879`](https://github.com/cultureamp/kaizen-legacy/commit/1d5f8790adecd927612059b965628deb31a5ac82) - fix Select label font colour when disabled
+
+## 6.20.0
+
+### Minor Changes
+
+- [#21](https://github.com/cultureamp/kaizen-legacy/pull/21) [`3f71968`](https://github.com/cultureamp/kaizen-legacy/commit/3f71968135c8174e7c2d442f3095faa58e9bb504) - Add classNameOverride to MultiSelectOption.
+
+## 6.19.1
+
+### Patch Changes
+
+- [#17](https://github.com/cultureamp/kaizen-legacy/pull/17) [`9b8dc9e`](https://github.com/cultureamp/kaizen-legacy/commit/9b8dc9e9fa99d69ab21feba77fbc0ed706fc3986) - use margin-inline so that icon spacing swaps in rtl
+
+- Updated dependencies [[`a8c5121`](https://github.com/cultureamp/kaizen-legacy/commit/a8c5121f200cfba7281e1b2e1298647771cd8e71)]:
+  - @kaizen/draft-form@10.5.0
+
 ## 6.19.0
 
 ### Minor Changes