superdesk-ui-framework 5.1.3 → 5.1.4

package/.github/workflows/publish-to-npm.yml

@@ -6,6 +6,8 @@ on:
             - 'develop'
             - 'v3'
             - 'v4'
+            - 'v5.1'
+            - 'v5'
 
 jobs:
     publish:

package/app/styles/_helpers.scss

@@ -346,7 +346,7 @@ h6 {
     white-space: nowrap;
 }
 
-// FONT FAMILY (DEPRECATED)
+// FONT FAMILY
 .sd-text__serif,
 .sd-text--serif {
     font-family: $baseFontFamilySerif;
@@ -358,23 +358,6 @@ h6 {
     font-family: $baseFontFamilyMono;
 }
 
-// FONT FAMILY VARIABLES -------------------------------------------------------------------------
-// Use these utility classes to change the font family of the text. Useful for overriding the font family of the text.
-.font-primary {
-    font-family: var(--font-primary);
-}
-.font-secondary {
-    font-family: var(--font-secondary);
-}
-.font-mono {
-    font-family: var(--font-mono);
-}
-.font-alt {
-    font-family: var(--font-alt);
-}
-
-
-
 // WHITESPACE
 .sd-whitespace--normal,
 .whitespace-normal {
@@ -2212,4 +2195,65 @@ h6 {
     container-type: inline-size;
     container-name: left-panel;
 }
+@container left-panel (width <= 900px) {
+    .new-form-layout {
+        --form-group-gap: var(--gap-3);
+        --form-padding: var(--space--3);
+    }
+}
+@container left-panel (width<= 500px) {
+    .new-form-layout {
+        --form-group-gap: var(--gap-1-5);
+        --form-padding: var(--space--2);
+        --form-layout-gap: var(--gap-2);
+    }
+}
+// ------------------------------------------------------------------------
+
+.new-form-layout {
+    --form-group-gap: var(--gap-5);
+    --form-layout-gap: var(--gap-4);
+    --form-padding: var(--space--5);
+    --form-heading-font-size: clamp(1.8rem, 4cqi, 2.4rem);
+    padding: var(--form-padding);
+    display: flex;
+    flex-direction: column;
+    gap: var(--form-layout-gap);
+    background-color: var(--color-surface-base);
+    border-radius: var(--b-radius--large);
+    border: 1px solid var(--color-line-light);
+    .new-form-heading {
+        font-family: $baseFontFamilySerif;
+        font-weight: 900;
+        font-size: var(--form-heading-font-size);
+        line-height: 1.2;
+    }
+    legend {
+        float: left;
+    }
+}
+.new-form-group {
+    display: flex;
+    gap: var(--form-group-gap);
+    &.new-form-group--grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: var(--form-group-gap);
+    }
+}
+.new-form-group-item {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    &.new-form-group-item--span-2 {
+        grid-column: span 2;
+    }
+    &.new-form-group-item--span-3 {
+        grid-column: span 3;
+    }
+    &.new-form-group-item--span-4 {
+        grid-column: span 4;
+    }
+}
+
 

package/app/styles/_simple-list.scss

@@ -8,7 +8,7 @@ $simple-list-border-color: $neutral-border-color;
     align-self: stretch;
 
     .simple-list__item {
-        padding: var(--space--1) 0;
+        padding: 0.5rem 0;
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -87,7 +87,7 @@ $simple-list-border-color: $neutral-border-color;
 
 .simple-list--dotted {
     .simple-list__item {
-        padding: var(--space--1) 0;
+        padding: 0.8rem 0;
         border-block-end: 1px dotted $simple-list-border-color;
 
         &:first-child {
@@ -111,25 +111,19 @@ $simple-list-border-color: $neutral-border-color;
         }
     }
 }
-.simple-list--comfortable {
-    .simple-list__item {
-        padding: 1.2rem 0;
-    }
-}
 
 .simple-list--comfortable {
     .simple-list__item {
-        padding: var(--space--1-5) 0;
+        padding: 1.2rem 0;
     }
 }
 
 .simple-list--loose {
     .simple-list__item {
-        padding: var(--space--2) 0;
+        padding: 2.4rem 0;
     }
 }
 
-
 .simple-list--no-padding {
     padding: 0 0 2rem 0;
 }

package/app/styles/form-elements/_forms-general.scss

@@ -299,7 +299,7 @@
 
 
 
-/// ----------------------------  FORM LAYOUT (Do not use anymore) --------------------------- ///
+/// ---------------------------- NEW FORM LAYOUT TEST---------------------------- ///
 
 .form__group-new {
 	display: flex;
@@ -388,152 +388,8 @@
 		margin-block-end: $sd-base-increment * 1.5;
 		line-height: 1;
 		color: var(--color-label-text);
+		//text-transform: uppercase;
 		font-weight: 500;
 		letter-spacing: 0.02em;
 	}
 }
-/// --------------------------  FORM LAYOUT (Do not use anymore) END ------------------------ ///
-/// ----------------------------------------------------------------------------------------- ///
-
-
-/// ---------------------------- NEW FORM LAYOUT !!! USE THIS ONE INSTEAD OF THE OLD ONE ---------------------------- ///
-
-.form-layout {
-	container-type: inline-size;
-    container-name: form-container;
-	--form-layout-row-gap: var(--gap-4);
-    --form-padding: 0;
-    --form-heading-font-size: clamp(1.8rem, 4cqi, 2.1rem);
-	--form-heading-margin: 0;
-    padding: var(--form-padding);
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--form-layout-row-gap);
-	width: 100%;
-    .form-heading-new {
-        font-family: $baseFontFamilySerif;
-        font-weight: 900;
-        font-size: var(--form-heading-font-size);
-        line-height: 1.1;
-		margin-block-end: var(--form-heading-margin);
-    }
-    legend {
-        float: left;
-    }
-	&.form-layout--compact {
-		--form-layout-row-gap: var(--gap-2);
-	}
-	&.form-layout--standard {
-		--form-layout-row-gap: var(--gap-4);
-	}
-	&.form-layout--relaxed {
-		--form-layout-row-gap: var(--gap-5);
-	}
-	&.form-layout--preserve-spaces {
-		--form-layout-row-gap: var(--gap-1-5);
-		--form-heading-margin: var(--space--2);
-		.sd-input .sd-input__message-box {
-			min-height: var(--space--3);
-		}
-		&.form-layout--compact {
-			--form-layout-row-gap: var(--gap-0-5);
-			--form-heading-margin: var(--space--2);
-		}
-		&.form-layout--standard {
-			--form-layout-row-gap: var(--gap-1-5);
-			--form-heading-margin: var(--space--2);
-		}
-		&.form-layout--relaxed {
-			--form-layout-row-gap: var(--gap-2);
-			--form-heading-margin: var(--space--1);
-		}
-	}
-	&.form-layout--mb-none {
-		margin-block-end: 0;
-	}
-	&.form-layout--mb-spaces {
-		margin-block-end: var(--form-layout-row-gap);
-	}
-}
-
-.form-group {
-	--form-group-col-gap: var(--gap-5);
-    display: flex;
-	row-gap: var(--form-layout-row-gap);
-    column-gap: var(--form-group-col-gap);
-    &.form-group--grid {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-    }
-	.form-group__text-block {
-		min-height: var(--form-element-height-default);
-		color: inherit;
-		font-size: 1.3rem;
-		display: inline-flex;
-		align-items: center;
-	}
-}
-
-.form-group__wrapper {
-	display: flex;
-	flex-direction: column;
-	width: 100%;
-	row-gap: var(--form-layout-row-gap);
-	.form-group__label {
-		font-size: 1.6rem;
-		font-weight: 500;
-		color: var(--color-text);
-		line-height: 1;
-		margin-block-end: var(--space--0-5);
-	}
-}
-
-.form-group-item {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-	min-height: var(--form-element-height-default);
-    &.form-group-item--span-2 {
-        grid-column: span 2;
-    }
-    &.form-group-item--span-3 {
-        grid-column: span 3;
-    }
-    &.form-group-item--span-4 {
-        grid-column: span 4;
-    }
-	&.form-group-item--auto-width {
-		flex-grow: 0;
-		min-width: 0;
-		flex-basis: auto;
-	}
-	> *:not(.sd-input):not(.form-group-item__inner):not(.sd-check__group-new) {
-		margin-block-start: 1.6rem;
-	}
-	.form-group-item__inner {
-		display: flex;
-		gap: var(--space--1);
-		align-items: flex-start;
-		> *:not(.sd-input) {
-			margin-block-start: 1.6rem;
-		}
-	}
-}
-
-.form-group-item--auto-width {
-	flex-grow: 0;
-	min-width: 0;
-	flex-basis: auto;
-}
-
-@container form-container (width <= 900px) {
-    .form-group {
-        --form-group-col-gap: var(--gap-3);
-    }
-}
-
-@container form-container (width<= 500px) {
-    .form-group {
-        --form-group-col-gap: var(--gap-1-5);
-    }
-}

package/app-typescript/components/Form/index.tsx

@@ -7,6 +7,3 @@ export {InputWrapper} from './InputWrapper';
 export {InputBase} from './InputBase';
 export {InputNew} from './InputNew';
 export {FormRowNew} from './FormRowNew';
-export {FormLayout} from './FormLayout';
-export {FormGroupV2} from './FormGroupV2';
-export {FormGroupItem} from './FormGroupItem';

package/dist/components/Index.tsx

@@ -85,7 +85,6 @@ import {ObjectFitUtilitiesDoc} from './utilities/ObjectFitUtilities';
 import {ObjectPositionUtilitiesDoc} from './utilities/ObjectPositionUtilities';
 import LoaderDoc from './Loader';
 import CardDoc from './Card';
-import FormLayoutDoc from './FormLayout';
 
 interface IPages {
     [group: string]: {
@@ -305,10 +304,6 @@ const pages: IPages = {
     formComponents: {
         name: 'Form Components',
         items: {
-            'form-layout': {
-                name: 'Form Layout',
-                component: FormLayoutDoc,
-            },
             inputs: {
                 name: 'Inputs',
                 component: InputsDoc,

package/dist/examples.bundle.css

@@ -1,4 +1,4 @@
-@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic,500italic,700italic,300,300italic);@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:200,300,400&subset=latin-ext);@import url(https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap);/*
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic,500italic,700italic,300,300italic);@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:200,300,400&subset=latin-ext);/*
  * Derived from einaros's Sons of Obsidian theme at
  * http://studiostyl.es/schemes/son-of-obsidian by
  * Alex Ford of CodeTunnel: