Merge branch 'develop' into 1808-allow-custom-javascript-files

frontend/taipy-gui/packaging/taipy-gui.d.ts

@@ -388,6 +388,8 @@ export interface ColumnDesc {
     lov?: string[];
     /** If true the user can enter any value besides the lov values. */
     freeLov?: boolean;
+    /** If false, the column cannot be sorted */
+    sortable?: boolean;
 }
 /**
  * A cell value type.

frontend/taipy-gui/public/stylekit/controls/button.css

@@ -21,6 +21,10 @@
               MODIFIER CLASSES
 **************************************************/
 
+.taipy-button {
+    margin: 4px 0;
+}
+
 /* fullwidth :  */
 .taipy-button.fullwidth {
     display: flex;

frontend/taipy-gui/public/stylekit/controls/file_download.css

@@ -20,6 +20,9 @@
 /*************************************************
               MODIFIER CLASSES
 **************************************************/
+.taipy-file-download>button {
+    margin: 4px 0;
+}
 
 /* fullwidth :  */
 .taipy-file-download.fullwidth button {

frontend/taipy-gui/public/stylekit/controls/file_selector.css

@@ -20,6 +20,9 @@
 /*************************************************
               MODIFIER CLASSES
 **************************************************/
+.taipy-file-selector .MuiButtonBase-root {
+    margin: 4px 0;
+}
 
 /* fullwidth :  */
 .taipy-file-selector.fullwidth [role='button'] {

frontend/taipy-gui/public/stylekit/controls/selector.css

@@ -22,7 +22,7 @@
 **************************************************/
 
 .taipy-selector {
-  margin: 0;
+  margin: 4px 0;
 }
 
 

frontend/taipy-gui/public/stylekit/controls/slider.css

@@ -26,4 +26,5 @@
     max-width: 100%;
     min-height: 48px;
     align-items: center;
+    margin: 4px 0;
 }

frontend/taipy-gui/public/stylekit/controls/status.css

@@ -25,4 +25,5 @@
     display: inline-flex;
     min-height: 48px;
     padding-top: 0.5em;
+    margin: 4px 0;
 }

frontend/taipy-gui/public/stylekit/controls/toggle.css

@@ -36,6 +36,9 @@
 /*************************************************
               MODIFIER CLASSES
 **************************************************/
+.taipy-toggle {
+    margin: 4px 0;
+}
 
 /* relative : Reset the theme toggle position to fit page flow */
 .taipy-toggle.relative {

frontend/taipy-gui/src/components/Taipy/AutoLoadingTable.spec.tsx

@@ -98,6 +98,7 @@ const tableValue = {
     },
 };
 const tableColumns = JSON.stringify({ Entity: { dfid: "Entity" } });
+const tableWidthColumns = JSON.stringify({ Entity: { dfid: "Entity", width: "100px" }, Country: {dfid: "Country"} });
 
 describe("AutoLoadingTable Component", () => {
     it("renders", async () => {
@@ -132,6 +133,16 @@ describe("AutoLoadingTable Component", () => {
         const { queryByTestId } = render(<AutoLoadingTable data={undefined} defaultColumns={tableColumns} active={false} />);
         expect(queryByTestId("ArrowDownwardIcon")).toBeNull();
     });
+    it("hides sort icons when not sortable", async () => {
+        const { queryByTestId } = render(<AutoLoadingTable data={undefined} defaultColumns={tableColumns} sortable={false} />);
+        expect(queryByTestId("ArrowDownwardIcon")).toBeNull();
+    });
+    it("set width if requested", async () => {
+        const { getByText } = render(<AutoLoadingTable data={undefined} defaultColumns={tableWidthColumns} />);
+        const header = getByText("Entity").closest("tr");
+        expect(header?.firstChild).toHaveStyle({"min-width": "100px"});
+        expect(header?.lastChild).toHaveStyle({"width": "100%"});
+    });
     // keep getting undefined Error from jest, it seems to be linked to the setTimeout that makes the code run after the end of the test :-(
     // https://github.com/facebook/jest/issues/12262
     // Looks like the right way to handle this is to use jest fakeTimers and runAllTimers ...