Merge branch 'main' into chore/auto-generate-release

frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AboutTab/AboutTab.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
 import { TabHeader } from '../../TabHeader';
 import type { AppConfig } from 'app-shared/types/AppConfig';
 import { ErrorMessage } from '@digdir/designsystemet-react';
-import { Divider } from 'app-shared/primitives';
 import { getRepositoryType } from 'app-shared/utils/repository';
 import { useAppConfigMutation } from 'app-development/hooks/mutations';
 import { useAppConfigQuery } from 'app-development/hooks/queries';
@@ -70,7 +69,6 @@ export const AboutTab = (): React.ReactElement => {
         return (
           <>
             <InputFields appConfig={appConfigData} onSave={handleSaveAppConfig} />
-            <Divider marginless />
             <CreatedFor
               repositoryType={repositoryType}
               repository={repositoryData}

frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/components/Tabs/AboutTab/InputFields/InputFields.module.css

@@ -5,4 +5,5 @@
   flex-direction: column;
   gap: var(--field-spacing);
   padding-bottom: var(--field-spacing);
+  border-bottom: var(--studio-border-divider);
 }

frontend/dashboard/components/Resources/Resources.module.css

@@ -1,13 +1,17 @@
+.header {
+  border-bottom: var(--studio-border-divider);
+  padding-bottom: var(--fds-spacing-3);
+}
+
 .wrapper {
   display: flex;
   flex-direction: column;
   gap: var(--ds-spacing-4);
-  padding-bottom: var(--ds-spacing-4);
 }
 
 .resourcesContainer {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--ds-spacing-5);
-  padding-top: var(--ds-spacing-5);
+  gap: var(--fds-spacing-5);
+  padding-block: var(--fds-spacing-5);
 }

frontend/dashboard/components/Resources/Resources.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { ResourceItem } from '../ResourceItem';
-import { Divider } from 'app-shared/primitives';
 import classes from './Resources.module.css';
 import { useTranslation } from 'react-i18next';
+import { StudioHeading } from '@studio/components';
+
 interface Resource {
   label: string;
   description: string;
@@ -216,8 +217,9 @@ export function Resources() {
   const { t } = useTranslation();
   return (
     <div className={classes.wrapper}>
-      <h2>{t('dashboard.resources')}</h2>
-      <Divider marginless />
+      <StudioHeading level={2} size='sm' className={classes.header}>
+        {t('dashboard.resources')}
+      </StudioHeading>
       <div className={classes.resourcesContainer}>
         {resources.map((resource, index) => (
           <ResourceItem

frontend/libs/studio-components/src/style/studio-variables.css

@@ -10,4 +10,6 @@
   --studio-property-button-vertical-spacing: calc(var(--studio-property-vertical-gap) / 2);
   --studio-property-fieldset-spacing: var(--fds-spacing-3);
   --studio-modal-spacing: var(--fds-spacing-6);
+
+  --studio-border-divider: 1px solid var(--fds-semantic-border-divider-default);
 }

frontend/packages/schema-editor/src/components/NoItemSelectedMessage/NoItemSelectedMessage.module.css

@@ -0,0 +1,7 @@
+.noItem {
+  margin: 0;
+  border-bottom: var(--studio-border-divider);
+  width: 100%;
+  padding-block: var(--fds-spacing-5);
+  text-align: center;
+}

frontend/packages/schema-editor/src/components/NoItemSelectedMessage/NoItemSelectedMessage.tsx

@@ -0,0 +1,13 @@
+import React, { type ReactElement } from 'react';
+import classes from './NoItemSelectedMessage.module.css';
+import { StudioLabelAsParagraph } from '@studio/components';
+import { useTranslation } from 'react-i18next';
+
+export const NoItemSelectedMessage = (): ReactElement => {
+  const { t } = useTranslation();
+  return (
+    <StudioLabelAsParagraph size='sm' className={classes.noItem}>
+      {t('schema_editor.no_item_selected')}
+    </StudioLabelAsParagraph>
+  );
+};

frontend/packages/schema-editor/src/components/NoItemSelectedMessage/index.ts

@@ -0,0 +1 @@
+export { NoItemSelectedMessage } from './NoItemSelectedMessage';

frontend/packages/schema-editor/src/components/SchemaInspector/CustomProperties.module.css

@@ -1,6 +1,8 @@
 .root {
   display: flex;
   flex-direction: column;
+  border-top: var(--studio-border-divider);
+  padding-top: var(--fds-spacing-5);
 }
 
 .listItem {
@@ -36,9 +38,6 @@
   align-items: center;
 }
 
-.deleteButton {
-}
-
 .unknownFormatValue {
   display: inline-flex;
   gap: 0.5rem;

frontend/packages/schema-editor/src/components/SchemaInspector/CustomProperties.tsx

@@ -92,7 +92,6 @@ export const CustomProperties = ({ path }: CustomPropertiesProps) => {
             <span>{renderInput(key)}</span>
           </span>
           <StudioButton
-            className={classes.deleteButton}
             icon={<TrashIcon />}
             onClick={() => deleteCustomProperty(key)}
             title={t('general.delete')}

frontend/packages/schema-editor/src/components/SchemaInspector/ItemDataComponent.module.css

@@ -4,6 +4,11 @@
   gap: 2rem;
 }
 
+.fieldSet {
+  border-top: var(--studio-border-divider);
+  padding-top: var(--fds-spacing-8);
+}
+
 .fieldSet > div {
   display: flex;
   flex-direction: column;

frontend/packages/schema-editor/src/components/SchemaInspector/ItemDataComponent.tsx

@@ -26,7 +26,6 @@ import {
   changeNameInPointer,
 } from '@altinn/schema-model';
 import { makeDomFriendlyID } from '../../utils/ui-schema-utils';
-import { Divider } from 'app-shared/primitives';
 import { useTranslation } from 'react-i18next';
 import { CustomProperties } from '@altinn/schema-editor/components/SchemaInspector/CustomProperties';
 import { NameField } from './NameField';
@@ -174,15 +173,9 @@ export function ItemDataComponent({ schemaNode }: IItemDataComponentProps) {
             </Switch>
           )}
           <ItemRestrictions schemaNode={schemaNode} />
-          <Divider marginless />
-        </>
-      )}
-      {hasCustomProps && (
-        <>
-          <CustomProperties path={schemaPointer} />
-          <Divider marginless />
         </>
       )}
+      {hasCustomProps && <CustomProperties path={schemaPointer} />}
       <Fieldset legend={t('schema_editor.descriptive_fields')} className={classes.fieldSet}>
         <div>
           <Textfield

frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/ArrayRestrictions/ArrayRestrictions.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import type { RestrictionItemProps } from '../ItemRestrictions';
 import { ArrRestrictionKey } from '@altinn/schema-model';
 import { Switch } from '@digdir/designsystemet-react';
-import { Divider } from 'app-shared/primitives';
 import { useTranslation } from 'react-i18next';
 import classes from './ArrayRestrictions.module.css';
 import { StudioTextfield } from '@studio/components';
+import { ItemWrapper } from '../ItemWrapper';
 
 export function ArrayRestrictions({
   restrictions,
@@ -14,8 +14,7 @@ export function ArrayRestrictions({
 }: RestrictionItemProps) {
   const { t } = useTranslation();
   return (
-    <>
-      <Divider marginless />
+    <ItemWrapper>
       <div className={classes.items}>
         <div className={classes.item}>
           <StudioTextfield
@@ -59,6 +58,6 @@ export function ArrayRestrictions({
           {t('schema_editor.' + ArrRestrictionKey.uniqueItems)}
         </Switch>
       </div>
-    </>
+    </ItemWrapper>
   );
 }

frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/EnumList/EnumField/EnumField.tsx

@@ -53,6 +53,7 @@ export const EnumField = ({
         onChange={handleChange}
         onKeyDown={onKeyDown}
         error={!isValid}
+        size='sm'
       />
       <StudioButton
         title={t('schema_editor.delete_field')}
@@ -62,7 +63,7 @@ export const EnumField = ({
         onClick={() => onDelete()}
         color='danger'
         variant='tertiary'
-        size='medium'
+        size='sm'
       />
     </div>
   );

frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/EnumList/EnumList.module.css

@@ -0,0 +1,4 @@
+.enumListFieldsset {
+  border-top: var(--studio-border-divider);
+  padding-top: var(--fds-spacing-5);
+}

frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/EnumList/EnumList.tsx

@@ -55,6 +55,8 @@ export const EnumList = ({ schemaNode }: EnumListProps): JSX.Element => {
     <Fieldset
       legend={t('schema_editor.enum_legend')}
       description={!schemaNode.enum?.length && t('schema_editor.enum_empty')}
+      size='sm'
+      className={classes.enumListFieldsset}
     >
       {duplicateValues !== null && (
         <ErrorMessage>{t('schema_editor.enum_error_duplicate')}</ErrorMessage>

frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/ItemRestrictions.tsx

@@ -17,7 +17,6 @@ import { ObjectRestrictions } from './ObjectRestrictions';
 import { StringRestrictions } from './StringRestrictions';
 import classes from './ItemRestrictions.module.css';
 import { Switch } from '@digdir/designsystemet-react';
-import { Divider } from 'app-shared/primitives';
 import { useTranslation } from 'react-i18next';
 import type { KeyValuePairs } from 'app-shared/types/KeyValuePairs';
 import { useSchemaEditorAppContext } from '@altinn/schema-editor/hooks/useSchemaEditorAppContext';
@@ -82,10 +81,7 @@ export const ItemRestrictions = ({ schemaNode }: ItemRestrictionsProps) => {
       {isArray && <ArrayRestrictions {...restrictionProps} />}
       {isField(schemaNode) &&
         [FieldType.String, FieldType.Integer, FieldType.Number].includes(schemaNode.fieldType) && (
-          <>
-            <Divider marginless />
-            <EnumList schemaNode={schemaNode} />
-          </>
+          <EnumList schemaNode={schemaNode} />
         )}
     </>
   );

frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/ItemWrapper/ItemWrapper.module.css

@@ -0,0 +1,7 @@
+.itemWrapper {
+  border-top: var(--studio-border-divider);
+  padding-top: var(--fds-spacing-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--fds-spacing-8);
+}

frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/ItemWrapper/ItemWrapper.tsx

@@ -0,0 +1,8 @@
+import React, { type HTMLAttributes, type ReactElement } from 'react';
+import classes from './ItemWrapper.module.css';
+
+type ItemWrapperProps = HTMLAttributes<HTMLDivElement>;
+
+export const ItemWrapper = ({ children }: ItemWrapperProps): ReactElement => (
+  <div className={classes.itemWrapper}>{children}</div>
+);

frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/ItemWrapper/index.ts

@@ -0,0 +1 @@
+export { ItemWrapper } from './ItemWrapper';

frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/NumberRestrictions/NumberRestrictions.tsx

@@ -3,7 +3,6 @@ import React, { useReducer } from 'react';
 import type { RestrictionItemProps } from '../ItemRestrictions';
 import type { KeyValuePairs } from 'app-shared/types/KeyValuePairs';
 import { IntRestrictionKey } from '@altinn/schema-model';
-import { Divider } from 'app-shared/primitives';
 import { useTranslation } from 'react-i18next';
 import classes from './NumberRestrictions.module.css';
 import { ErrorMessage, Switch, Label } from '@digdir/designsystemet-react';
@@ -18,6 +17,7 @@ import {
 import { NumberRestrictionsError } from '@altinn/schema-editor/types';
 import { valueExists } from '@altinn/schema-editor/utils/value';
 import { StudioTextfield } from '@studio/components';
+import { ItemWrapper } from '../ItemWrapper';
 
 export interface NumberRestrictionsProps extends RestrictionItemProps {
   isInteger: boolean;
@@ -83,8 +83,7 @@ export function NumberRestrictions({
   };
 
   return (
-    <>
-      <Divider marginless />
+    <ItemWrapper>
       <div>
         <Label htmlFor='schema_editor.minimum_'>{t(minLabel)}</Label>
         <div className={classes.formatFieldsRowContent}>
@@ -152,6 +151,6 @@ export function NumberRestrictions({
           />
         </div>
       </div>
-    </>
+    </ItemWrapper>
   );
 }

frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/ObjectRestrictions/ObjectRestrictions.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import type { RestrictionItemProps } from '../ItemRestrictions';
 import { ObjRestrictionKey } from '@altinn/schema-model';
 import { RestrictionField } from '../RestrictionField';
-import { Divider } from 'app-shared/primitives';
 import { useTranslation } from 'react-i18next';
+import { ItemWrapper } from '../ItemWrapper';
 
 export function ObjectRestrictions({
   restrictions,
@@ -13,8 +13,7 @@ export function ObjectRestrictions({
   const { t } = useTranslation();
   const defaults = Object.values(ObjRestrictionKey);
   return defaults?.length ? (
-    <>
-      <Divider />
+    <ItemWrapper>
       {defaults.map((key) => (
         <RestrictionField
           key={key}
@@ -26,6 +25,6 @@ export function ObjectRestrictions({
           onChangeValue={onChangeRestrictionValue}
         />
       ))}
-    </>
+    </ItemWrapper>
   ) : null;
 }

frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/RestrictionField/RestrictionField.tsx

@@ -39,6 +39,7 @@ export const RestrictionField = ({
         onChange={handleChange}
         readOnly={readOnly}
         value={value ?? ''}
+        size='sm'
       />
     </div>
   );

frontend/packages/schema-editor/src/components/SchemaInspector/ItemRestrictions/StringRestrictions/StringRestrictions.module.css

@@ -11,8 +11,10 @@
 .lengthFields {
   display: flex;
   flex-direction: row;
-  gap: 2rem;
+  gap: var(--fds-spacing-8);
   justify-content: space-between;
+  border-bottom: var(--studio-border-divider);
+  padding-bottom: var(--fds-spacing-8);
 }
 
 .lengthField {