fix: icons for checkbox and radio

Altinn · Nov 6, 2024 · cdf5653 · cdf5653
1 parent 12b3e4d
commit cdf5653
Show file tree

Hide file tree

Showing 16 changed files with 175 additions and 76 deletions.
diff --git a/lib/components/Dialog/DialogListItem.stories.tsx b/lib/components/Dialog/DialogListItem.stories.tsx
@@ -176,7 +176,6 @@ export const SelectableSelected = (args) => {
   });
 
   const onSelect = ({ id }) => {
-    console.log('XX', id);
     setItems((prevState) => {
       return {
         ...prevState,
@@ -196,6 +195,7 @@ export const SelectableSelected = (args) => {
             <DialogListItem
               {...args}
               title={item.title}
+              onClick={item.selected ? () => onSelect(item) : null}
               selected={item.selected}
               select={{ checked: item?.selected, onChange: () => onSelect(item) }}
             />

diff --git a/lib/components/Dialog/DialogSelect.tsx b/lib/components/Dialog/DialogSelect.tsx
@@ -17,9 +17,7 @@ export const DialogSelect = ({ checked = false, onChange, className }: DialogSel
   return (
     <label className={cx(styles.label, className)}>
       <input type="checkbox" checked={checked} onChange={onChange} className={styles.input} />
-      <div className={styles.checkbox}>
-        <CheckboxIcon checked={checked} />
-      </div>
+      <CheckboxIcon hover={true} checked={checked} className={styles.icon} />
     </label>
   );
 };
diff --git a/lib/components/Dialog/dialogHeadings.module.css b/lib/components/Dialog/dialogHeadings.module.css
@@ -22,8 +22,3 @@
   font-weight: 500;
   color: var(--neutral-text-default);
 }
-
-.headings[data-size="xs"] .avatar,
-.headings[data-size="sm"] .avatar {
-  display: none;
-}
diff --git a/lib/components/Dialog/dialogListItemBase.module.css b/lib/components/Dialog/dialogListItemBase.module.css
@@ -15,7 +15,7 @@
   padding: 1rem;
 }
 
-.link:hover {
+.item[aria-selected="false"] .link:hover {
   outline: 2px solid;
   outline-color: var(--global-base-default);
 }
@@ -24,5 +24,5 @@
   position: absolute;
   top: 0;
   right: 0;
-  margin: 10px;
+  margin: 0.375rem;
 }
diff --git a/lib/components/Dialog/dialogSelect.module.css b/lib/components/Dialog/dialogSelect.module.css
@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: center;
   background-color: transparent;
-  padding: 9px;
+  padding: .75rem;
   border-radius: 50%;
   border: 0;
 }
@@ -17,27 +17,18 @@
   opacity: 0;
 }
 
-.checkbox {
-  /*
-  border: 2px solid;
-  border-radius: 2px;
-  */
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.icon {
+  font-size: 1.25rem;
 }
 
-.label > input:checked + .checkbox {
-  border-color: var(--theme-base-default);
-  background-color: var(--theme-base-default);
-  color: var(--theme-background-subtle);
+.icon {
+  color: var(--theme-base-default);
 }
 
-.label > input:checked + .checkbox {
-  outline: 1px solid red;
+.icon [data-hover="true"] {
+  opacity: 0;
 }
 
-.icon {
-  width: 1.5rem;
-  height: 1.5rem;
+.label:hover [data-hover="true"] {
+  opacity: 1;
 }
diff --git a/lib/components/Icon/CheckboxCheckedIcon.tsx b/lib/components/Icon/CheckboxCheckedIcon.tsx
@@ -0,0 +1,28 @@
+export type CheckboxCheckedIconProps = {
+  title?: string;
+  className?: string;
+};
+
+/**
+ * Checkbox for lists and list items
+ */
+export const CheckboxCheckedIcon = ({ title = 'Checkbox', className }: CheckboxCheckedIconProps) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <title>{title}</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.5 0C1.11929 0 0 1.11929 0 2.5V21.5C0 22.8807 1.11929 24 2.5 24H21.5C22.8807 24 24 22.8807 24 21.5V2.5C24 1.11929 22.8807 0 21.5 0H2.5ZM18.5547 5.76815C19.0142 6.07451 19.1384 6.69538 18.8321 7.1549L11.6321 17.9549C11.4659 18.2042 11.1967 18.3658 10.8985 18.3953C10.6004 18.4249 10.3047 18.3192 10.0929 18.1073L5.29289 13.3073C4.90237 12.9168 4.90237 12.2836 5.29289 11.8931C5.68342 11.5026 6.31658 11.5026 6.70711 11.8931L10.6446 15.8306L17.1679 6.0455C17.4743 5.58598 18.0952 5.4618 18.5547 5.76815Z"
+        fill="black"
+      />
+    </svg>
+  );
+};
diff --git a/lib/components/Icon/CheckboxIcon.stories.ts b/lib/components/Icon/CheckboxIcon.stories.ts
@@ -18,6 +18,13 @@ export const Default: Story = {
   },
 };
 
+export const Hover: Story = {
+  args: {
+    checked: false,
+    hover: true,
+  },
+};
+
 export const Checked: Story = {
   args: {
     checked: true,

diff --git a/lib/components/Icon/CheckboxIcon.tsx b/lib/components/Icon/CheckboxIcon.tsx
@@ -1,29 +1,17 @@
-import cx from 'classnames';
-import styles from './checkboxIcon.module.css';
+import { CheckboxCheckedIcon } from './CheckboxCheckedIcon';
+import { CheckboxUncheckedIcon } from './CheckboxUncheckedIcon';
 
 export type CheckboxIconProps = {
   checked: boolean;
+  hover?: boolean;
   title?: string;
   className?: string;
 };
 
 /**
  * Checkbox for lists and list items
  */
-export const CheckboxIcon = ({ checked, title, className }: CheckboxIconProps) => {
-  return (
-    <div data-checked={checked} className={cx(styles.checkbox, className)}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        strokeWidth={2.5}
-        stroke="currentColor"
-        className={styles.icon}
-      >
-        <title>{title}</title>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-      </svg>
-    </div>
-  );
+export const CheckboxIcon = ({ checked, title = 'checkbox', hover = false, className }: CheckboxIconProps) => {
+  const iconProps = { title, className };
+  return checked ? <CheckboxCheckedIcon {...iconProps} /> : <CheckboxUncheckedIcon {...iconProps} hover={hover} />;
 };
diff --git a/lib/components/Icon/CheckboxUncheckedIcon.tsx b/lib/components/Icon/CheckboxUncheckedIcon.tsx
@@ -0,0 +1,38 @@
+export type CheckboxUncheckedIconProps = {
+  title?: string;
+  className?: string;
+  hover?: boolean;
+};
+
+/**
+ * Checkbox for lists and list items
+ */
+export const CheckboxUncheckedIcon = ({ title = 'Checkbox', className, hover = false }: CheckboxUncheckedIconProps) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <title>{title}</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21.5 2.5H2.5V21.5H21.5V2.5ZM2.5 0C1.11929 0 0 1.11929 0 2.5V21.5C0 22.8807 1.11929 24 2.5 24H21.5C22.8807 24 24 22.8807 24 21.5V2.5C24 1.11929 22.8807 0 21.5 0H2.5Z"
+        fill="black"
+      />
+      {hover && (
+        <path
+          data-hover={true}
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M18.5547 5.76815C19.0142 6.07451 19.1384 6.69538 18.8321 7.1549L11.6321 17.9549C11.4659 18.2042 11.1967 18.3658 10.8985 18.3953C10.6004 18.4249 10.3047 18.3192 10.0929 18.1073L5.29289 13.3073C4.90237 12.9168 4.90237 12.2836 5.29289 11.8931C5.68342 11.5026 6.31658 11.5026 6.70711 11.8931L10.6446 15.8306L17.1679 6.0455C17.4743 5.58598 18.0952 5.4618 18.5547 5.76815Z"
+          fill="currentColor"
+        />
+      )}
+    </svg>
+  );
+};
diff --git a/lib/components/Icon/RadioCheckedIcon.tsx b/lib/components/Icon/RadioCheckedIcon.tsx
@@ -0,0 +1,29 @@
+export type RadioCheckedIconProps = {
+  title?: string;
+  className?: string;
+};
+
+/**
+ * Radio for lists and list items
+ */
+export const RadioCheckedIcon = ({ title = 'Radio', className }: RadioCheckedIconProps) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <title>{title}</title>
+
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z"
+        fill="black"
+      />
+    </svg>
+  );
+};
diff --git a/lib/components/Icon/RadioIcon.stories.ts b/lib/components/Icon/RadioIcon.stories.ts
@@ -18,6 +18,13 @@ export const Default: Story = {
   },
 };
 
+export const Hover: Story = {
+  args: {
+    checked: false,
+    hover: true,
+  },
+};
+
 export const Checked: Story = {
   args: {
     checked: true,

diff --git a/lib/components/Icon/RadioIcon.tsx b/lib/components/Icon/RadioIcon.tsx
@@ -1,29 +1,17 @@
-import cx from 'classnames';
-import styles from './radioIcon.module.css';
+import { RadioCheckedIcon } from './RadioCheckedIcon';
+import { RadioUncheckedIcon } from './RadioUncheckedIcon';
 
 export type RadioIconProps = {
   checked: boolean;
+  hover?: boolean;
   title?: string;
   className?: string;
 };
 
 /**
- * Radio icon for lists and list items
+ * Radio for lists and list items
  */
-export const RadioIcon = ({ checked, title, className }: RadioIconProps) => {
-  return (
-    <div data-checked={checked} className={cx(styles.radio, className)}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        strokeWidth={2.5}
-        stroke="currentColor"
-        className={styles.icon}
-      >
-        <title>{title}</title>
-        <circle cx="12" cy="12" r="6" fill="currentColor" />
-      </svg>
-    </div>
-  );
+export const RadioIcon = ({ checked, title = 'Radio', hover = false, className }: RadioIconProps) => {
+  const iconProps = { title, className };
+  return checked ? <RadioCheckedIcon {...iconProps} /> : <RadioUncheckedIcon {...iconProps} hover={hover} />;
 };
diff --git a/lib/components/Icon/RadioUncheckedIcon.tsx b/lib/components/Icon/RadioUncheckedIcon.tsx
@@ -0,0 +1,30 @@
+export type RadioUncheckedIconProps = {
+  title?: string;
+  className?: string;
+  hover?: boolean;
+};
+
+/**
+ * Radio for lists and list items
+ */
+export const RadioUncheckedIcon = ({ title = 'Radio', className, hover = false }: RadioUncheckedIconProps) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <title>{title}</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 21.5C17.2467 21.5 21.5 17.2467 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 17.2467 6.75329 21.5 12 21.5ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
+        fill="black"
+      />
+      {hover && <circle data-hover={true} cx="12" cy="12" r="5" fill="black" />}
+    </svg>
+  );
+};
diff --git a/lib/components/Icon/checkboxIcon.module.css b/lib/components/Icon/checkboxIcon.module.css
@@ -1,3 +1,4 @@
+/*
 .checkbox {
   font-size: 1rem;
   border: 2px solid;
@@ -19,3 +20,4 @@
 .checkbox > svg {
   stroke: currentColor;
 }
+  */
diff --git a/lib/components/Menu/MenuOption.tsx b/lib/components/Menu/MenuOption.tsx
@@ -35,8 +35,8 @@ export const MenuOption = ({
   return (
     <MenuItemBase className={styles.label} disabled={disabled} selected={checked} size={size} as="label">
       <input className={styles.input} name={name} value={value} type={type} checked={checked} onChange={onChange} />
-      {type === 'checkbox' && <CheckboxIcon checked={checked} className={styles.icon} />}
-      {type === 'radio' && <RadioIcon checked={checked} className={styles.icon} />}
+      {type === 'checkbox' && <CheckboxIcon checked={checked} hover={true} className={styles.icon} />}
+      {type === 'radio' && <RadioIcon checked={checked} hover={true} className={styles.icon} />}
       <MenuItemLabel title={title} description={description} size={size}>
         {label}
       </MenuItemLabel>

diff --git a/lib/components/Menu/menuOption.module.css b/lib/components/Menu/menuOption.module.css
@@ -9,21 +9,19 @@
 
 .icon {
   font-size: 1rem;
-  border: 2px solid;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.icon > svg {
-  color: transparent;
+.icon {
+  color: var(--theme-base-default);
 }
 
-.label:hover .icon > svg {
-  color: var(--theme-base-default);
+.icon [data-hover="true"] {
+  opacity: 0;
 }
 
-.icon[data-checked="true"] > svg,
-.label:hover .icon[data-checked="true"] > svg {
-  color: var(--theme-background-subtle);
+.label:hover [data-hover="true"] {
+  opacity: 1;
 }