Updated styling for ArrayFieldItemTemplate + README update

rjsf-team · Nov 21, 2023 · 66eeebb · 66eeebb
1 parent 4121305
commit 66eeebb
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,12 @@ it according to semantic versioning. For example, if your PR adds a breaking cha
 should change the heading of the (upcoming) version to include a major version bump.
 
 -->
+# 5.14.4
+
+## @rjsf/fluentui-rc
+- Updated README.md references
+- Fixed width of `ArrayFieldItemTemplate` items
+
 # 5.14.3
 
 ## Dev

diff --git a/packages/fluentui-rc/README.md b/packages/fluentui-rc/README.md
@@ -7,7 +7,7 @@
 <br />
 <p align="center">
   <a href="https://github.com/rjsf-team/react-jsonschema-form">
-    <img src="./logo.png" alt="Logo" width="120" height="120">
+    <img src="https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/fluentui-rc/logo.png?raw=true" alt="Logo" width="120" height="120">
   </a>
 
   <h3 align="center">@rjsf/fluentui-rc</h3>
@@ -120,8 +120,8 @@ GitHub repository: [https://github.com/rjsf-team/react-jsonschema-form](https://
 [contributors-url]: https://github.com/rjsf-team/react-jsonschema-form/graphs/contributors
 [license-shield]: https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square
 [license-url]: https://choosealicense.com/licenses/apache-2.0/
-[npm-shield]: https://img.shields.io/npm/v/@rjsf/fluent-ui/latest.svg?style=flat-square
-[npm-url]: https://www.npmjs.com/package/@rjsf/fluent-ui
-[npm-dl-shield]: https://img.shields.io/npm/dm/@rjsf/fluent-ui.svg?style=flat-square
-[npm-dl-url]: https://www.npmjs.com/package/@rjsf/fluent-ui
-[product-screenshot]: https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/59a8206e148474bea854bbb004f624143fbcbac8/packages/fluent-ui/screenshot.png
+[npm-shield]: https://img.shields.io/npm/v/@rjsf/fluentui-rc/latest.svg?style=flat-square
+[npm-url]: https://www.npmjs.com/package/@rjsf/fluentui-rc
+[npm-dl-shield]: https://img.shields.io/npm/dm/@rjsf/fluentui-rc.svg?style=flat-square
+[npm-dl-url]: https://www.npmjs.com/package/@rjsf/fluentui-rc
+[product-screenshot]: https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/fluentui-rc/screenshot.png?raw=true
diff --git a/packages/fluentui-rc/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx b/packages/fluentui-rc/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
@@ -1,5 +1,14 @@
 import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 import { Flex } from '@fluentui/react-migration-v0-v9';
+import { makeStyles } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  arrayFieldItem: {
+    '> .form-group': {
+      width: '100%',
+    },
+  },
+});
 
 /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
  *
@@ -26,11 +35,14 @@ export default function ArrayFieldItemTemplate<
     uiSchema,
     registry,
   } = props;
+  const classes = useStyles();
   const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
 
   return (
     <Flex vAlign='end'>
-      <Flex>{children}</Flex>
+      <Flex fill className={classes.arrayFieldItem}>
+        {children}
+      </Flex>
       {hasToolbar && (
         <Flex style={{ marginLeft: '8px' }}>
           {(hasMoveUp || hasMoveDown) && (

diff --git a/packages/fluentui-rc/test/__snapshots__/Array.test.tsx.snap b/packages/fluentui-rc/test/__snapshots__/Array.test.tsx.snap
@@ -82,7 +82,7 @@ exports[`array fields array icons 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-string"
@@ -242,7 +242,7 @@ exports[`array fields array icons 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-string"
@@ -622,7 +622,7 @@ exports[`array fields fixed array 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-string"
@@ -669,7 +669,7 @@ exports[`array fields fixed array 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-number"
@@ -1037,7 +1037,7 @@ exports[`with title and description array icons 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-string"
@@ -1213,7 +1213,7 @@ exports[`with title and description array icons 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-string"
@@ -1570,7 +1570,7 @@ exports[`with title and description fixed array 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-string"
@@ -1633,7 +1633,7 @@ exports[`with title and description fixed array 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-number"
@@ -1835,7 +1835,7 @@ exports[`with title and description from both array icons 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-string"
@@ -2011,7 +2011,7 @@ exports[`with title and description from both array icons 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-string"
@@ -2368,7 +2368,7 @@ exports[`with title and description from both fixed array 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-string"
@@ -2431,7 +2431,7 @@ exports[`with title and description from both fixed array 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-number"
@@ -2633,7 +2633,7 @@ exports[`with title and description from uiSchema array icons 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-string"
@@ -2809,7 +2809,7 @@ exports[`with title and description from uiSchema array icons 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-string"
@@ -3166,7 +3166,7 @@ exports[`with title and description from uiSchema fixed array 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-string"
@@ -3229,7 +3229,7 @@ exports[`with title and description from uiSchema fixed array 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-number"
@@ -3389,7 +3389,7 @@ exports[`with title and description with global label off array icons 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-string"
@@ -3537,7 +3537,7 @@ exports[`with title and description with global label off array icons 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-string"
@@ -3845,7 +3845,7 @@ exports[`with title and description with global label off fixed array 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-string"
@@ -3880,7 +3880,7 @@ exports[`with title and description with global label off fixed array 1`] = `
           className="fui-Flex ___14l2n00_8jr2f20 f22iagw fgs5rwf"
         >
           <div
-            className="fui-Flex ___1gzszts_10anl4a f22iagw"
+            className="fui-Flex ___9stze40_16wdn2w f22iagw fly5x3f f1l02sjl fzy362"
           >
             <div
               className="form-group field field-number"