Merge pull request #2972 from pie-framework/fix/PD-5450

fix: missing spacing PD-5450

Author: CarlaCostea

package.json

@@ -89,31 +89,31 @@
     "@jest/test-sequencer": "29.7.0",
     "@types/d3-array": "3.0.3",
     "@pie-lib/categorize": "1.2.0-next.3",
-    "@pie-lib/charting": "6.2.0-next.29",
-    "@pie-lib/config-ui": "12.2.0-next.29",
+    "@pie-lib/charting": "6.2.0-next.35",
+    "@pie-lib/config-ui": "12.2.0-next.35",
     "@pie-lib/controller-utils": "1.2.0-next.3",
-    "@pie-lib/correct-answer-toggle": "3.2.0-next.7",
-    "@pie-lib/drag": "3.2.0-next.8",
-    "@pie-lib/editable-html": "12.2.0-next.13",
-    "@pie-lib/editable-html-tip-tap": "1.2.0-next.28",
+    "@pie-lib/correct-answer-toggle": "3.2.0-next.8",
+    "@pie-lib/drag": "3.2.0-next.9",
+    "@pie-lib/editable-html": "12.2.0-next.15",
+    "@pie-lib/editable-html-tip-tap": "1.2.0-next.34",
     "@pie-lib/feedback": "1.2.0-next.3",
-    "@pie-lib/graphing-solution-set": "3.2.0-next.28",
+    "@pie-lib/graphing-solution-set": "3.2.0-next.34",
     "@pie-lib/graphing-utils": "2.2.0-next.3",
-    "@pie-lib/graphing": "3.2.0-next.28",
+    "@pie-lib/graphing": "3.2.0-next.34",
     "@pie-lib/icons": "3.2.0-next.4",
-    "@pie-lib/mask-markup": "2.2.0-next.29",
+    "@pie-lib/mask-markup": "2.2.0-next.35",
     "@pie-lib/math-evaluator": "3.2.0-next.4",
     "@pie-lib/math-input": "7.2.0-next.12",
     "@pie-lib/math-rendering-accessible": "4.2.0-next.4",
     "@pie-lib/math-rendering": "4.2.0-next.3",
-    "@pie-lib/math-toolbar": "2.2.0-next.14",
-    "@pie-lib/plot": "3.2.0-next.27",
-    "@pie-lib/render-ui": "5.2.0-next.7",
-    "@pie-lib/rubric": "1.2.0-next.29",
+    "@pie-lib/math-toolbar": "2.2.0-next.15",
+    "@pie-lib/plot": "3.2.0-next.34",
+    "@pie-lib/render-ui": "5.2.0-next.8",
+    "@pie-lib/rubric": "1.2.0-next.35",
     "@pie-lib/scoring-config": "4.2.0-next.3",
     "@pie-lib/style-utils": "1.2.0-next.3",
     "@pie-lib/test-utils": "1.2.0-next.3",
-    "@pie-lib/text-select": "2.2.0-next.7",
+    "@pie-lib/text-select": "2.2.0-next.9",
     "@pie-lib/tools": "1.2.0-next.4",
     "@pie-lib/translator": "3.2.0-next.3",
     "@pie-framework/mathquill": "1.2.1-beta.1"

packages/boilerplate-item-type/configure/package.json

@@ -11,9 +11,9 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "12.2.0-next.29",
-    "@pie-lib/editable-html-tip-tap": "1.2.0-next.28",
-    "@pie-lib/render-ui": "5.2.0-next.7",
+    "@pie-lib/config-ui": "12.2.0-next.35",
+    "@pie-lib/editable-html-tip-tap": "1.2.0-next.34",
+    "@pie-lib/render-ui": "5.2.0-next.8",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",
     "prop-types": "^15.6.2",

packages/boilerplate-item-type/package.json

@@ -13,7 +13,7 @@
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-player-events": "^0.1.0",
     "@pie-lib/math-rendering": "4.2.0-next.3",
-    "@pie-lib/render-ui": "5.2.0-next.7",
+    "@pie-lib/render-ui": "5.2.0-next.8",
     "prop-types": "^15.6.1",
     "react": "18.3.1",
     "react-dom": "18.3.1"

packages/calculator/configure/package.json

@@ -11,7 +11,7 @@
     "@mui/material": "^7.3.4",
     "@pie-framework/material-ui-calculator": "4.0.0",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "12.2.0-next.29",
+    "@pie-lib/config-ui": "12.2.0-next.35",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },

packages/categorize/configure/package.json

@@ -16,11 +16,11 @@
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-configure-events": "^1.3.0",
     "@pie-lib/categorize": "1.2.0-next.3",
-    "@pie-lib/config-ui": "12.2.0-next.29",
-    "@pie-lib/drag": "3.2.0-next.8",
-    "@pie-lib/editable-html-tip-tap": "1.2.0-next.28",
+    "@pie-lib/config-ui": "12.2.0-next.35",
+    "@pie-lib/drag": "3.2.0-next.9",
+    "@pie-lib/editable-html-tip-tap": "1.2.0-next.34",
     "@pie-lib/math-rendering": "4.2.0-next.3",
-    "@pie-lib/render-ui": "5.2.0-next.7",
+    "@pie-lib/render-ui": "5.2.0-next.8",
     "@pie-lib/translator": "3.2.0-next.3",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",

packages/categorize/configure/src/design/categories/RowLabel.jsx

@@ -5,8 +5,9 @@ import EditableHtml from '@pie-lib/editable-html-tip-tap';
 import { InputContainer } from '@pie-lib/render-ui';
 
 const RowLabelContainer = styled(InputContainer)(({ theme }) => ({
-  paddingTop: theme.spacing(2),
   width: '100%',
+  paddingTop: theme.spacing(1),
+  marginTop: theme.spacing(1),
 }));
 
 export const RowLabel = ({

packages/categorize/configure/src/design/categories/alternateResponses.jsx

@@ -11,8 +11,8 @@ const CategoriesContainer = styled('div')(({ theme }) => ({
 
 const CategoriesHolder = styled('div')(({ theme }) => ({
   display: 'grid',
-  gridRowGap: `${theme.spacing(1)}px`,
-  gridColumnGap: `${theme.spacing(1)}px`,
+  gridRowGap: theme.spacing(1),
+  gridColumnGap: theme.spacing(1),
 }));
 
 const RowLabel = styled('div')({

packages/categorize/configure/src/design/categories/category.jsx

@@ -20,9 +20,7 @@ const StyledCard = styled(Card, {
 }));
 
 const StyledCardActions = styled(CardActions)(({ theme }) => ({
-  padding: 0,
-  paddingBottom: 0,
-  paddingTop: theme.spacing(1),
+  padding: `${theme.spacing(1)} 0 0`,
 }));
 
 const CategoryHeader = styled('div')(({ theme }) => ({
@@ -97,7 +95,7 @@ export class Category extends React.Component {
       mathMlOptions = {},
     } = this.props;
     const isCategoryHeaderDisabled = !!alternateResponseIndex || alternateResponseIndex === 0;
-    
+
     return (
       <StyledCard isDuplicated={isDuplicated}>
         <span>

packages/categorize/configure/src/design/categories/droppable-placeholder.jsx

@@ -11,6 +11,7 @@ const log = debug('@pie-element:categorize:configure');
 const HelperText = styled('div')(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
+  justifyContent: 'center',
   fontSize: theme.typography.fontSize - 2,
   color: `rgba(${theme.palette.common.black}, 0.4)`,
   width: '100%',
@@ -19,10 +20,6 @@ const HelperText = styled('div')(({ theme }) => ({
 
 const Helper = () => <HelperText>Drag your correct answers here</HelperText>;
 
-const DroppablePlaceholderContainer = styled('div')({
-  minHeight: '100px',
-});
-
 const Previews = ({ alternateResponseIndex, category, choices, onDeleteChoice }) => (
   <React.Fragment>
     {(choices || []).map((c, index) =>
@@ -68,7 +65,6 @@ const DroppablePlaceHolder = ({
 
   return (
     <div ref={setNodeRef}>
-      <DroppablePlaceholderContainer>
         <PlaceHolder
           isOver={isOver}
           extraStyles={{
@@ -87,7 +83,6 @@ const DroppablePlaceHolder = ({
             />
           )}
         </PlaceHolder>
-      </DroppablePlaceholderContainer>
     </div>
   );
 };

packages/categorize/configure/src/design/categories/index.jsx

@@ -20,8 +20,8 @@ const CategoriesContainer = styled('div')(({ theme }) => ({
 
 const CategoriesHolder = styled('div')(({ theme }) => ({
   display: 'grid',
-  gridRowGap: `${theme.spacing(1)}px`,
-  gridColumnGap: `${theme.spacing(1)}px`,
+  gridRowGap: theme.spacing(1),
+  gridColumnGap: theme.spacing(1),
 }));
 
 const StyledTooltip = styled(Tooltip)(({ theme }) => ({