diff --git a/package-lock.json b/package-lock.json index 1604a4df..2a4e27d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mui/material": "^5.15.13", "@mui/x-date-pickers": "^5.0.20", "@tanstack/react-table": "^8.13.2", - "@tedi-design-system/core": "3.0.1", + "@tedi-design-system/core": "3.2.0", "classnames": "^2.5.1", "draft-js": "^0.11.7", "draftjs-md-converter": "^1.5.2", @@ -7979,9 +7979,9 @@ } }, "node_modules/@tedi-design-system/core": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@tedi-design-system/core/-/core-3.0.1.tgz", - "integrity": "sha512-ioet8RlFmWjg8fic4WUuYeavLiqUsKx3vFGZzzXkL91xNNjHexNVKhhtMLLkpCywzOc2tKXMx3AYdDhu2dsbwg==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@tedi-design-system/core/-/core-3.2.0.tgz", + "integrity": "sha512-R9gpmprRT8qCGeJ8Frhz2yiJQ9bJM1Yp3mvWHeX2a6600hWh3mKXvhARSLFAF6im83FEFmOoKwdIOr4nfy8Qbg==", "engines": { "node": ">=18.0.0", "npm": ">=8.0.0" diff --git a/package.json b/package.json index 6fcde260..3fba459c 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "@mui/material": "^5.15.13", "@mui/x-date-pickers": "^5.0.20", "@tanstack/react-table": "^8.13.2", - "@tedi-design-system/core": "3.0.1", + "@tedi-design-system/core": "3.2.0", "classnames": "^2.5.1", "draft-js": "^0.11.7", "draftjs-md-converter": "^1.5.2", diff --git a/src/tedi/components/buttons/button-content/button-content.module.scss b/src/tedi/components/buttons/button-content/button-content.module.scss index 27c5ab3c..15a153cd 100644 --- a/src/tedi/components/buttons/button-content/button-content.module.scss +++ b/src/tedi/components/buttons/button-content/button-content.module.scss @@ -399,11 +399,16 @@ $btn-width-large: 3.72rem; height: auto; min-height: auto; padding: 0; + font-size: var(--body-link-size-regular); text-align: left; text-decoration: none; background: none; border: none; + &.tedi-btn--small { + font-size: var(--body-link-size-responsive); + } + @include link-variant( var(--link-primary-default), var(--link-primary-hover), @@ -411,12 +416,22 @@ $btn-width-large: 3.72rem; var(--link-primary-focus) ); - .tedi-btn__icon--left { - margin-right: var(--button-sm-inner-spacing); + .tedi-btn__inner { + .tedi-btn__icon--left { + display: inline; + margin-right: var(--button-sm-inner-spacing); + vertical-align: middle; + } + + .tedi-btn__icon--right { + display: inline; + margin-left: var(--button-sm-inner-spacing); + vertical-align: middle; + } } - .tedi-btn__icon--right { - margin-left: var(--button-sm-inner-spacing); + .tedi-btn__icon-responsive { + font-size: var(--link-icon-responsive); } } diff --git a/src/tedi/components/buttons/button-content/button-content.tsx b/src/tedi/components/buttons/button-content/button-content.tsx index dff0edab..604d47c7 100644 --- a/src/tedi/components/buttons/button-content/button-content.tsx +++ b/src/tedi/components/buttons/button-content/button-content.tsx @@ -144,14 +144,12 @@ const InternalButtonContent = forwardRef( const getIcon = (location: string, icon: string | IconWithoutBackgroundProps): JSX.Element => { const iconBEM = cn(styles['tedi-btn__icon'], styles[`tedi-btn__icon--${location}`], { [styles['tedi-btn__spinner']]: isLoading, + [styles['tedi-btn__icon-responsive']]: Component === 'a' && size === 'small', }); - const isLink = visualType === 'link'; - const defaultIconProps: Partial = { size: size === 'large' ? 24 : 18, className: iconBEM, - ...(isLink ? { display: 'inline' } : {}), }; const iconProps: IconWithoutBackgroundProps =