Update the design system

Altinn · Jan 2, 2024 · e278905 · e278905
1 parent 937848d
commit e278905
Show file tree

Hide file tree

Showing 31 changed files with 152 additions and 131 deletions.
diff --git a/frontend/app-development/features/appPublish/components/deploy/DeployDropdown.tsx b/frontend/app-development/features/appPublish/components/deploy/DeployDropdown.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import classes from './DeployDropdown.module.css';
 import { AltinnConfirmDialog } from 'app-shared/components';
 import { StudioSpinner } from '@studio/components';
-import { Button, Select } from '@digdir/design-system-react';
+import { Button, LegacySelect } from '@digdir/design-system-react';
 import { DeploymentStatus, ImageOption } from '../appDeploymentComponent';
 import { formatTimeHHmm } from 'app-shared/pure/date-format';
 import { getAzureDevopsBuildResultUrl } from '../../../../utils/urlHelper';
@@ -47,7 +47,7 @@ export const DeployDropdown = ({
       <div>{t('app_deploy_messages.choose_version')}</div>
       <div className={classes.select} id={`deploy-select-${envName.toLowerCase()}`}>
         {imageOptions.length > 0 && (
-          <Select
+          <LegacySelect
             key={imageOptions.length}
             options={imageOptions || []}
             onChange={(value: string) => setSelectedImageTag(value)}

diff --git a/frontend/app-preview/src/components/AppBarConfig/AppPreviewBarConfig.tsx b/frontend/app-preview/src/components/AppBarConfig/AppPreviewBarConfig.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { RepositoryType } from 'app-shared/types/global';
 import { TFunction } from 'i18next';
-import { Button, Select, LegacyToggleButtonGroup } from '@digdir/design-system-react';
+import { Button, LegacyToggleButtonGroup, LegacySelect } from '@digdir/design-system-react';
 import { AltinnButtonActionItem } from 'app-shared/components/altinnHeader/types';
 import classes from '../AppPreviewSubMenu.module.css';
 import { ArrowCirclepathIcon, EyeIcon, LinkIcon } from '@navikt/aksel-icons';
@@ -65,7 +65,7 @@ export const SubPreviewMenuLeftContent = ({
       </div>
       {layoutSets && (
         <div className={classes.layoutSetSelector}>
-          <Select
+          <LegacySelect
             onChange={(layoutSet) => handleChangeLayoutSet(layoutSet)}
             options={layoutSets.sets.map((layoutSet) => ({
               label: layoutSet.id,

diff --git a/frontend/packages/policy-editor/src/components/ExpandablePolicyCard/ExpandablePolicyCard.tsx b/frontend/packages/policy-editor/src/components/ExpandablePolicyCard/ExpandablePolicyCard.tsx
@@ -3,9 +3,9 @@ import {
   Button,
   Label,
   ErrorMessage,
-  Select,
   Paragraph,
   Textarea,
+  LegacySelect,
 } from '@digdir/design-system-react';
 import { PlusIcon } from '@navikt/aksel-icons';
 import classes from './ExpandablePolicyCard.module.css';
@@ -446,7 +446,7 @@ export const ExpandablePolicyCard = ({
             : t('policy_editor.rule_card_actions_select_add')}
         </Paragraph>
         <div className={classes.dropdownWrapper}>
-          <Select
+          <LegacySelect
             options={actionOptions}
             onChange={(value: string) => value !== null && handleClickActionInList(value)}
             disabled={actionOptions.length === 0}
@@ -467,7 +467,7 @@ export const ExpandablePolicyCard = ({
             : t('policy_editor.rule_card_subjects_select_add')}
         </Paragraph>
         <div className={classes.dropdownWrapper}>
-          <Select
+          <LegacySelect
             options={subjectOptions}
             onChange={(value: string) => value !== null && handleClickSubjectInList(value)}
             disabled={subjectOptions.length === 0}

diff --git a/frontend/packages/policy-editor/src/components/SecurityLevelSelect/SecurityLevelSelect.tsx b/frontend/packages/policy-editor/src/components/SecurityLevelSelect/SecurityLevelSelect.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode, useMemo } from 'react';
 import classes from './SecurityLevelSelect.module.css';
-import { Select, Heading, Label, Paragraph, HelpText, Link } from '@digdir/design-system-react';
+import { Heading, Label, Paragraph, HelpText, Link, LegacySelect } from '@digdir/design-system-react';
 import { useTranslation } from 'react-i18next';
 import { RequiredAuthLevel } from '../../types';
 
@@ -68,7 +68,7 @@ export const SecurityLevelSelect = ({
             </Link>
           </HelpText>
         </div>
-        <Select
+        <LegacySelect
           options={authLevelOptionKeysAsDisplayStrings}
           onChange={(authLevel: RequiredAuthLevel) => onSave(authLevel)}
           value={requiredAuthenticationLevelEndUser}

diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/ItemDataComponent.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector/ItemDataComponent.tsx
@@ -8,7 +8,7 @@ import {
 } from '../../features/editor/schemaEditorSlice';
 import { ReferenceSelectionComponent } from './ReferenceSelectionComponent';
 import { getCombinationOptions } from './helpers/options';
-import { Fieldset, Select, LegacyTextArea, Textfield, Switch } from '@digdir/design-system-react';
+import { Fieldset, LegacyTextArea, Textfield, Switch, LegacySelect } from '@digdir/design-system-react';
 import classes from './ItemDataComponent.module.css';
 import { ItemRestrictions } from './ItemRestrictions';
 import {
@@ -139,7 +139,7 @@ export function ItemDataComponent({ schemaNode }: IItemDataComponentProps) {
         />
       )}
       {isField(schemaNode) && (
-        <Select
+        <LegacySelect
           label={t('schema_editor.type')}
           onChange={(type: FieldType) => onChangeFieldType(type)}
           options={typeOptions}
@@ -166,7 +166,7 @@ export function ItemDataComponent({ schemaNode }: IItemDataComponentProps) {
         </Switch>
       )}
       {isCombination(schemaNode) && (
-        <Select
+        <LegacySelect
           label={t('schema_editor.type')}
           onChange={(combination: string) =>
             onChangeCombinationType(combination as CombinationKind)

diff --git a/...ackages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTab.test.tsx b/...ackages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTab.test.tsx
@@ -175,7 +175,7 @@ describe('ItemFieldsTab', () => {
     const confirmButton = screen.getByRole('button', {
       name: texts['schema_editor.datamodel_field_deletion_confirm'],
     });
-    await waitFor(async () => user.click(confirmButton));
+    await act(() => user.click(confirmButton));
 
     expect(saveDatamodel).toHaveBeenCalledTimes(1);
     const updatedModel = getSavedModel(saveDatamodel);

diff --git a/...src/components/SchemaInspector/ItemRestrictions/StringRestrictions/StringRestrictions.tsx b/...src/components/SchemaInspector/ItemRestrictions/StringRestrictions/StringRestrictions.tsx
@@ -5,11 +5,11 @@ import { RestrictionField } from '../RestrictionField';
 import classes from './StringRestrictions.module.css';
 import {
   Fieldset,
-  Select,
   LegacyTextField,
   Label,
   Switch,
   Textfield,
+  LegacySelect,
 } from '@digdir/design-system-react';
 import type { KeyValuePairs } from 'app-shared/types/KeyValuePairs';
 import { StringFormat, StrRestrictionKey } from '@altinn/schema-model';
@@ -78,7 +78,7 @@ export function StringRestrictions({
   return (
     <>
       <Divider marginless />
-      <Select
+      <LegacySelect
         inputId='format-select-input'
         label={t('format')}
         onChange={(value: string) => setRestriction(StrRestrictionKey.format, value)}

diff --git a/...end/packages/schema-editor/src/components/SchemaInspector/ReferenceSelectionComponent.tsx b/...end/packages/schema-editor/src/components/SchemaInspector/ReferenceSelectionComponent.tsx
@@ -3,7 +3,7 @@ import type { ReferenceNode, UiSchemaNode } from '@altinn/schema-model';
 import { makeDomFriendlyID } from '../../utils/ui-schema-utils';
 import { Keyword } from '@altinn/schema-model';
 import classes from './ReferenceSelectionComponent.module.css';
-import { Select } from '@digdir/design-system-react';
+import { LegacySelect } from '@digdir/design-system-react';
 import { useSchemaEditorAppContext } from '@altinn/schema-editor/hooks/useSchemaEditorAppContext';
 
 export interface IReferenceSelectionProps {
@@ -26,7 +26,7 @@ export function ReferenceSelectionComponent({
   const selectId = makeDomFriendlyID(selectedNode.pointer, { suffix: 'ref-select' });
   return (
     <div>
-      <Select
+      <LegacySelect
         inputId={selectId}
         label={label}
         onChange={(value: string) => onChangeRef(selectedNode.pointer, value)}

diff --git a/frontend/packages/text-editor/src/LangSelector.tsx b/frontend/packages/text-editor/src/LangSelector.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Select, Button } from '@digdir/design-system-react';
+import { Button, LegacySelect } from '@digdir/design-system-react';
 import classes from './LangSelector.module.css';
 import type { LangCode, Option } from './types';
 
@@ -31,7 +31,7 @@ export const LangSelector = ({ onAddLang, options }: ILangSelectorProps) => {
   };
   return (
     <div className={classes.LanguageSelector}>
-      <Select
+      <LegacySelect
         hideLabel={true}
         onChange={handleSelectOnChange}
         options={options}

diff --git a/frontend/packages/ux-editor/src/components/Properties/Properties.module.css b/frontend/packages/ux-editor/src/components/Properties/Properties.module.css
@@ -2,3 +2,7 @@
   background: var(--fds-semantic-surface-neutral-subtle);
   flex: var(--properties-width-fraction);
 }
+
+.accordion {
+  height: 100%; /* TODO: Remove when https://github.com/digdir/designsystem/issues/1292 is resolved. */
+}
diff --git a/frontend/packages/ux-editor/src/components/Properties/Properties.tsx b/frontend/packages/ux-editor/src/components/Properties/Properties.tsx
@@ -50,7 +50,7 @@ export const Properties = () => {
 
   return (
     <div className={classes.root}>
-      <Accordion color='subtle'>
+      <Accordion color='subtle' className={classes.accordion}>
         <Accordion.Item open={openList.includes('content')}>
           <Accordion.Header onHeaderClick={() => toggleOpen('content')}>
             {t('right_menu.content')}

diff --git a/frontend/packages/ux-editor/src/components/TextResource.tsx b/frontend/packages/ux-editor/src/components/TextResource.tsx
@@ -1,5 +1,10 @@
 import React, { useState } from 'react';
-import { Button, Paragraph, Select, SingleSelectOption } from '@digdir/design-system-react';
+import {
+  Button,
+  LegacySelect,
+  LegacySingleSelectOption,
+  Paragraph,
+} from '@digdir/design-system-react';
 import {
   MagnifyingGlassIcon,
   PencilIcon,
@@ -93,7 +98,7 @@ export const TextResource = ({
     handleRemoveTextResource();
   };
 
-  const searchOptions: SingleSelectOption[] = prepend<SingleSelectOption>(
+  const searchOptions: LegacySingleSelectOption[] = prepend<LegacySingleSelectOption>(
     textResources.map((tr) => ({
       label: tr.id,
       value: tr.id,
@@ -117,7 +122,7 @@ export const TextResource = ({
       {isSearchMode && (
         <span className={classes.searchContainer}>
           <span className={classes.select}>
-            <Select
+            <LegacySelect
               hideLabel={true}
               label={t('ux_editor.search_text_resources_label')}
               onChange={(id) => handleIdChange(id === '' ? undefined : id)}

diff --git a/...fig/Expressions/ExpressionContent/ExpressionEditMode/SimpleExpression/DataSourceValue.tsx b/...fig/Expressions/ExpressionContent/ExpressionEditMode/SimpleExpression/DataSourceValue.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {
-  Select,
-  SingleSelectOption,
+  LegacySelect,
+  LegacySingleSelectOption,
   LegacyToggleButtonGroup,
   LegacyTextField,
 } from '@digdir/design-system-react';
@@ -41,7 +41,7 @@ export const DataSourceValue = ({
   const currentValue = isComparableValue ? subExpression.comparableValue : subExpression.value;
   const selectedValueForDisplayIfBoolean = currentValue ? 'true' : 'false';
 
-  const getCorrespondingDataSourceValues = (dataSource: DataSource): SingleSelectOption[] => {
+  const getCorrespondingDataSourceValues = (dataSource: DataSource): LegacySingleSelectOption[] => {
     switch (dataSource) {
       case DataSource.Component:
         return getComponentIds(formLayoutsData);
@@ -66,7 +66,7 @@ export const DataSourceValue = ({
     case DataSource.InstanceContext:
     case DataSource.ApplicationSettings:
       return (
-        <Select
+        <LegacySelect
           label={
             isComparableValue
               ? t('right_menu.expressions_data_source_comparable_value')

diff --git a/...xpressions/ExpressionContent/ExpressionEditMode/SimpleExpression/SubExpressionContent.tsx b/...xpressions/ExpressionContent/ExpressionEditMode/SimpleExpression/SubExpressionContent.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Select } from '@digdir/design-system-react';
+import { Button, LegacySelect } from '@digdir/design-system-react';
 import {
   DataSource,
   expressionDataSourceTexts,
@@ -66,7 +66,7 @@ export const SubExpressionContent = ({
           size='small'
         />
       </div>
-      <Select // TODO: Consider only representing the function selection between the data source dropdowns - where it is actually used. Issue: #10858
+      <LegacySelect // TODO: Consider only representing the function selection between the data source dropdowns - where it is actually used. Issue: #10858
         label={t('right_menu.expressions_function')}
         hideLabel={true}
         onChange={(func: string) => addFunction(func)}
@@ -80,7 +80,7 @@ export const SubExpressionContent = ({
       />
       {allowToSpecifyExpression && (
         <div className={classes.subExpression}>
-          <Select
+          <LegacySelect
             label={t('right_menu.expressions_data_source')}
             hideLabel={true}
             onChange={(dataSource: string) => addDataSource(dataSource, false)}
@@ -107,7 +107,7 @@ export const SubExpressionContent = ({
           <p className={classes.expressionFunction}>
             {expressionFunctionTexts(t)[subExpression.function]}
           </p>
-          <Select
+          <LegacySelect
             label={t('right_menu.expressions_comparable_data_source')}
             hideLabel={true}
             onChange={(compDataSource: string) => addDataSource(compDataSource, true)}

diff --git a/frontend/packages/ux-editor/src/components/config/Expressions/NewExpressionButton.tsx b/frontend/packages/ux-editor/src/components/config/Expressions/NewExpressionButton.tsx
@@ -12,40 +12,40 @@ export interface NewExpressionButtonProps {
 }
 
 export const NewExpressionButton = ({ options, onAddExpression }: NewExpressionButtonProps) => {
-  const [showDropDown, setShowDropDown] = React.useState<boolean>(false);
+  const [showDropdown, setShowDropdown] = React.useState<boolean>(false);
   const t = useText();
   const anchorEl = useRef(null);
 
   return (
     <>
       <Button
-        title={t('right_menu.expressions_add')}
+        aria-expanded={showDropdown}
+        aria-haspopup='menu'
         color='first'
         fullWidth
         icon={<PlusIcon />}
-        id='right_menu.dynamics_add'
+        onClick={() => setShowDropdown(!showDropdown)}
+        ref={anchorEl}
         size='small'
+        title={t('right_menu.expressions_add')}
         variant='secondary'
-        ref={anchorEl}
-        aria-haspopup='menu'
-        aria-expanded={showDropDown}
-        onClick={() => setShowDropDown(!showDropDown)}
       >
         {t('right_menu.expressions_add')}
       </Button>
       <DropdownMenu
         anchorEl={anchorEl.current}
-        placement='bottom'
-        size='medium'
-        open={showDropDown}
         className={classes.dropdownMenu}
+        onClose={() => setShowDropdown(false)}
+        open={showDropdown}
+        placement='bottom'
+        size='small'
       >
         <DropdownMenu.Group heading={t('right_menu.expressions_property')}>
           {options.map((o) => (
             <DropdownMenu.Item
               key={o}
               onClick={() => {
-                setShowDropDown(false);
+                setShowDropdown(false);
                 onAddExpression(o);
               }}
             >

diff --git a/frontend/packages/ux-editor/src/components/config/SelectDataModelComponent.tsx b/frontend/packages/ux-editor/src/components/config/SelectDataModelComponent.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Select } from '@digdir/design-system-react';
+import { LegacySelect } from '@digdir/design-system-react';
 import { useDatamodelMetadataQuery } from '../../hooks/queries/useDatamodelMetadataQuery';
 import { FormField } from '../FormField';
 import { Option } from 'packages/text-editor/src/types';
@@ -62,7 +62,7 @@ export const SelectDataModelComponent = ({
       helpText={helpText}
       label={label}
       renderField={({ fieldProps }) => (
-        <Select
+        <LegacySelect
           {...fieldProps}
           onChange={(e: any) => fieldProps.onChange(e)}
           options={dataModelElementNames}

diff --git a/...ackages/ux-editor/src/components/config/componentSpecificContent/Image/ImageComponent.tsx b/...ackages/ux-editor/src/components/config/componentSpecificContent/Image/ImageComponent.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Select, Textfield } from '@digdir/design-system-react';
+import { LegacySelect, Textfield } from '@digdir/design-system-react';
 import { Fieldset } from '@digdir/design-system-react';
 import classes from './ImageComponent.module.css';
 import { TextResource } from '../../../TextResource';
@@ -118,7 +118,7 @@ export const ImageComponent = ({
           value={selectedPlacement?.[0]?.value}
           propertyPath={`${component.propertyPath}/properties/image/properties/align`}
           renderField={({ fieldProps }) => (
-            <Select {...fieldProps} options={alignOptions} inputId={placementSelectId} />
+            <LegacySelect {...fieldProps} options={alignOptions} inputId={placementSelectId} />
           )}
         />
       </div>

diff --git a/...ackages/ux-editor/src/components/config/componentSpecificContent/Panel/PanelComponent.tsx b/...ackages/ux-editor/src/components/config/componentSpecificContent/Panel/PanelComponent.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Switch, Select } from '@digdir/design-system-react';
+import { Switch, LegacySelect } from '@digdir/design-system-react';
 import type { IGenericEditComponent } from '../../componentConfig';
 import { useText } from '../../../../hooks';
 import { EditTextResourceBinding } from '../../editModal/EditTextResourceBinding';
@@ -50,7 +50,7 @@ export const PanelComponent = ({ component, handleComponentChange }: IGenericEdi
         onChange={handleVariantClick}
         propertyPath={`${component.propertyPath}/properties/variant`}
         renderField={({ fieldProps }) => (
-          <Select
+          <LegacySelect
             {...fieldProps}
             options={Object.values(FormPanelVariant).map((value: FormPanelVariant) => ({
               label: t(`ux_editor.${value}`),

diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Select, Textfield } from '@digdir/design-system-react';
+import { LegacySelect, Textfield } from '@digdir/design-system-react';
 import { IGenericEditComponent } from '../componentConfig';
 import { useOptionListIdsQuery } from '../../../hooks/queries/useOptionListIdsQuery';
 import { useTranslation, Trans } from 'react-i18next';
@@ -53,7 +53,7 @@ export function EditCodeList({ component, handleComponentChange }: IGenericEditC
               value={component.optionsId}
               propertyPath={`${component.propertyPath}/properties/optionsId`}
               renderField={({ fieldProps }) => (
-                <Select
+                <LegacySelect
                   onChange={fieldProps.onChange}
                   options={optionListIds.map((option) => ({
                     label: option,