Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

11809 fix size for text and icon in binding datamodell #11818

Merged
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,12 @@
padding-block: 0.75rem;
}

.linkedDatamodelIcon {
font-size: 1rem;
JamalAlabdullah marked this conversation as resolved.
Show resolved Hide resolved
}

.selectedOption {
gap: var(--fds-spacing-1);
word-break: break-word;
font-size: small;
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { SelectDataModelComponent } from '../SelectDataModelComponent';
import { useDatamodelMetadataQuery } from '../../../hooks/queries/useDatamodelMetadataQuery';
import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
import { LinkIcon } from '@studio/icons';
import { Button, Paragraph } from '@digdir/design-system-react';
import { Button } from '@digdir/design-system-react';
import classes from './EditDataModelBindings.module.css';
import { InputActionWrapper } from 'app-shared/components/InputActionWrapper';

Expand Down Expand Up @@ -104,7 +104,11 @@ export const EditDataModelBindings = ({
helpText={helpText}
/>
) : (
selectedOption && <SelectedOption selectedOption={selectedOption} />
selectedOption && (
<span className={classes.selectedOption}>
<SelectedOption selectedOption={selectedOption} />
</span>
)
)}
</div>
</InputActionWrapper>
Expand All @@ -116,8 +120,8 @@ export const EditDataModelBindings = ({
const SelectedOption = ({ selectedOption }: { selectedOption: string }) => {
return (
<div className={classes.linkedDatamodelContainer}>
<LinkIcon />
<Paragraph className={classes.selectedOption}>{selectedOption}</Paragraph>
<LinkIcon className={classes.linkedDatamodelIcon} />
{selectedOption}
</div>
);
};
Loading