Merge branch 'main' into feature/181-radix-ui-combobox

miljodir · Feb 5, 2025 · 54cc905 · 54cc905
2 parents 7126581 + 34790ff
commit 54cc905
Show file tree

Hide file tree

Showing 12 changed files with 48 additions and 78 deletions.
diff --git a/packages/css/package.json b/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-css",
-  "version": "3.10.1",
+  "version": "3.11.0",
   "description": "CSS for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./src/index.css",

diff --git a/packages/css/src/filelist/README.md b/packages/css/src/filelist/README.md
@@ -18,10 +18,8 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
     </div>
 
     <div class="md-filelist__file-actions">
-      <button class="md-filelist__file-actions-button">{downloadIcon}</button>
-
-      <button class="md-filelist__file-actions-button">{deleteIcon}</button>
-      }
+      <MdIconButton className="md-icon-button md-icon-button--plain">{downloadIcon}</MdIconButton>
+      <MdIconButton className="md-icon-button md-icon-button--plain">{deleteIcon}</MdIconButton>
     </div>
   </div>
 

diff --git a/packages/css/src/filelist/filelist.css b/packages/css/src/filelist/filelist.css
@@ -34,33 +34,8 @@
   margin-top: 0.3rem;
 }
 
-/* File actions */
 .md-filelist__file-actions {
   display: flex;
   align-items: center;
   gap: 1rem;
 }
-
-.md-filelist__file-actions-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  background-color: transparent;
-  border-radius: 6.25rem;
-  border: 0;
-  padding: 0.2rem;
-  cursor: pointer;
-  transition: background 0.1s linear;
-}
-
-.md-filelist__file-actions-button:hover {
-  background-color: #fff;
-  transition: background 0.1s linear;
-}
-
-.md-filelist__file-action-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
diff --git a/packages/css/src/messages/AlertMessage.md b/packages/css/src/messages/AlertMessage.md
@@ -15,8 +15,8 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
     {label}
   </div>
 
-  <button className="md-alert-message__button" onClick="{handleClick}">
-    <Icon width="16" height="16" />
-  </button>
+  <MdIconButton className="md-alert-message__button md-icon-button md-icon-button--plain" onClick="{handleClick}">
+   {icon}
+  </MdIconButton>
 </div>
 ```
diff --git a/packages/css/src/messages/README.md b/packages/css/src/messages/README.md
@@ -22,6 +22,6 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
 >
   <div className="md-alert-message__content">{Icon width="20" height="20"} {label}</div>
 
-  <button className="md-alert-message__button" onClick="{handleClick}">{Icon width="16" height="16"}</button>
+  <MdIconButton className="md-alert-message__button md-icon-button md-icon-button--plain" onClick="{handleClick}">{icon}</MdIconButton>
 </div>
 ```
diff --git a/packages/css/src/messages/alertMessage.css b/packages/css/src/messages/alertMessage.css
@@ -58,13 +58,12 @@
 }
 
 .md-alert-message__button {
-  border: 0;
-  background-color: transparent;
-  margin: 0;
-  padding: 1rem;
-  cursor: pointer;
+  margin-right: 0.75rem;
 }
 
+.md-alert-message--error .md-alert-message__button:hover {
+  outline-color: #fff;
+}
 .md-alert-message--error .md-alert-message__button {
   color: #fff;
 }
diff --git a/packages/css/src/modal/README.md b/packages/css/src/modal/README.md
@@ -18,10 +18,10 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
       <MdClickOutsideWrapper class="md-modal__inner-wrapper">
         <div class="md-modal__header">
           <div>{heading}</div>
-          <button class="md-modal__close-button">
-            <MdXIcon class="md-modal__close-button-icon" />
+          <MdIconButton class="md-modal__close-button md-icon-button md-icon-button--plain">
+            <MdXIcon className="md-icon-button__icon"/>
             <!-- Icon for close-button, use the react icon from Miljødir, or you own -->
-          </button>
+          </MdIconButton>
         </div>
         <div class="md-modal__content-inner">MODAL CONTENT GOES HERE</div>
       </MdClickOutsideWrapper>

diff --git a/packages/css/src/modal/modal.css b/packages/css/src/modal/modal.css
@@ -59,17 +59,7 @@
 }
 
 .md-modal__close-button {
-  padding-right: 2rem;
-  padding-left: 2rem;
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-  cursor: pointer;
-}
-
-.md-modal__close-button-icon {
-  width: 1.125rem;
-  height: 1.125rem;
+  margin-right: 2rem;
 }
 
 .md-modal__content-inner {

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-react",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "description": "React-komponenter for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./dist/index.js",

diff --git a/packages/react/src/fileList/MdFileList.tsx b/packages/react/src/fileList/MdFileList.tsx
@@ -1,6 +1,7 @@
 import classnames from 'classnames';
 import React from 'react';
 
+import MdIconButton from '../iconButton/MdIconButton';
 import MdDeleteIcon from '../icons/MdDeleteIcon';
 import MdDocIcon from '../icons/MdDocIcon';
 import MdDownloadIcon from '../icons/MdDownloadIcon';
@@ -81,55 +82,59 @@ const MdFileList: React.FunctionComponent<MdFileListProps> = ({
 
               <div className="md-filelist__file-actions">
                 {!hideDownload && onDownloadFile && 'url' in file && (
-                  <button
+                  <MdIconButton
+                    theme="plain"
                     type="button"
+                    showTooltip
                     aria-label="Last ned fil"
-                    className="md-filelist__file-actions-button"
                     onClick={() => {
                       onDownloadFile(file);
                     }}
                   >
-                    <MdDownloadIcon aria-hidden="true" className="md-filelist__file-action-icon" />
-                  </button>
+                    <MdDownloadIcon />
+                  </MdIconButton>
                 )}
 
                 {allowDelete && onRemoveFile && (
-                  <button
+                  <MdIconButton
+                    theme="plain"
+                    showTooltip
                     type="button"
                     aria-label="Slett fil"
-                    className="md-filelist__file-actions-button"
                     onClick={() => {
                       onRemoveFile(file);
                     }}
                   >
-                    <MdDeleteIcon aria-hidden="true" className="md-filelist__file-action-icon" />
-                  </button>
+                    <MdDeleteIcon />
+                  </MdIconButton>
                 )}
 
                 {allowEdit && onEditFile && (
-                  <button
+                  <MdIconButton
                     type="button"
+                    showTooltip
+                    theme="plain"
                     aria-label="Rediger fil"
-                    className="md-filelist__file-actions-button"
                     onClick={() => {
                       onEditFile(file);
                     }}
                   >
-                    <MdEditIcon aria-hidden="true" className="md-filelist__file-action-icon" />
-                  </button>
+                    <MdEditIcon />
+                  </MdIconButton>
                 )}
 
                 {!hidePrint && onPrintFile && fileEnding && printableFileTypes.includes(fileEnding) && (
-                  <button
+                  <MdIconButton
                     type="button"
+                    theme="plain"
+                    showTooltip
                     aria-label="Skriv ut fil"
-                    className="md-filelist__file-actions-button"
                     onClick={() => {
                       onPrintFile(file);
                     }}
                   >
-                    <MdPrintIcon aria-hidden="true" className="md-filelist__file-action-icon" />
-                  </button>
+                    <MdPrintIcon />
+                  </MdIconButton>
                 )}
               </div>
             </div>

diff --git a/packages/react/src/messages/MdAlertMessage.tsx b/packages/react/src/messages/MdAlertMessage.tsx
@@ -1,5 +1,6 @@
 import classnames from 'classnames';
 import React from 'react';
+import MdIconButton from '../iconButton/MdIconButton';
 import MdCheckIcon from '../icons/MdCheckIcon';
 import MdInfoIcon from '../icons/MdInfoIcon';
 import MdWarningIcon from '../icons/MdWarningIcon';
@@ -73,16 +74,17 @@ const MdAlertMessage: React.FC<MdAlertMessageProps> = ({
       </div>
 
       {!!closable && onClose && (
-        <button
+        <MdIconButton
+          className="md-alert-message__button"
+          theme="plain"
           type="button"
           aria-label="Lukk"
-          className="md-alert-message__button"
           onClick={e => {
             return clickHandler(e);
           }}
         >
-          <MdXIcon aria-hidden="true" width="16" height="16" />
-        </button>
+          <MdXIcon />
+        </MdIconButton>
       )}
     </div>
   );

diff --git a/packages/react/src/modal/MdModal.tsx b/packages/react/src/modal/MdModal.tsx
@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import React, { useEffect, useRef } from 'react';
-
+import MdIconButton from '../iconButton/MdIconButton';
 import MdXIcon from '../icons/MdXIcon';
 import MdClickOutsideWrapper from '../utils/MdClickOutsideWrapper';
 
@@ -111,16 +111,17 @@ const MdModal: React.FunctionComponent<MdModalProps> = ({
                 {headingIcon}
                 {heading}
               </div>
-              <button
+              <MdIconButton
                 type="button"
+                theme="plain"
                 className="md-modal__close-button"
                 onClick={e => {
                   closeModal(e);
                 }}
                 aria-label="Lukk"
               >
-                <MdXIcon className="md-modal__close-button-icon" />
-              </button>
+                <MdXIcon />
+              </MdIconButton>
             </div>
             <div className="md-modal__content-inner">{children}</div>
           </MdClickOutsideWrapper>