From e7e5041e376c737e386f86c8cc585f8e3ff805d0 Mon Sep 17 00:00:00 2001 From: ewsgit Date: Tue, 12 May 2026 21:25:12 +0100 Subject: [PATCH] add image type to iconButtons --- .../iconButton/UKIconButton.module.scss | 80 +++++++------------ src/components/iconButton/UKIconButton.tsx | 3 + 2 files changed, 34 insertions(+), 49 deletions(-) diff --git a/src/components/iconButton/UKIconButton.module.scss b/src/components/iconButton/UKIconButton.module.scss index e09aad6..b923cda 100644 --- a/src/components/iconButton/UKIconButton.module.scss +++ b/src/components/iconButton/UKIconButton.module.scss @@ -29,6 +29,12 @@ margin-right var(--uk-sys-motion-duration-50) var(--uk-sys-motion-easing-linear), border-radius var(--border-radius-duration, var(--uk-sys-motion-duration-50)) var(--uk-sys-motion-easing-linear); + >img { + display: block; + width: var(--icon-size); + height: var(--icon-size); + } + &::before { content: ""; position: absolute; @@ -386,10 +392,8 @@ color: rgb(var(--uk-sys-color-on-surface-variant)); &::before { - background-color: rgb( - var(--uk-sys-color-on-surface-variant), - var(--uk-sys-state-pressed-state-layer-opacity) - ); + background-color: rgb(var(--uk-sys-color-on-surface-variant), + var(--uk-sys-state-pressed-state-layer-opacity)); } } @@ -397,10 +401,8 @@ color: rgb(var(--uk-sys-color-on-primary)); &::before { - background-color: rgb( - var(--uk-sys-color-on-surface-variant), - var(--uk-sys-state-pressed-state-layer-opacity) - ); + background-color: rgb(var(--uk-sys-color-on-surface-variant), + var(--uk-sys-state-pressed-state-layer-opacity)); } } } @@ -445,20 +447,16 @@ color: rgb(var(--uk-sys-color-on-secondary-container)); &::before { - background-color: rgb( - var(--uk-sys-color-on-secondary-container), - var(--uk-sys-state-focus-state-layer-opacity) - ); + background-color: rgb(var(--uk-sys-color-on-secondary-container), + var(--uk-sys-state-focus-state-layer-opacity)); } &[data-type="toggle"] { color: rgb(var(--uk-sys-color-on-secondary-container)); &::before { - background-color: rgb( - var(--uk-sys-color-on-secondary-container), - var(--uk-sys-state-focus-state-layer-opacity) - ); + background-color: rgb(var(--uk-sys-color-on-secondary-container), + var(--uk-sys-state-focus-state-layer-opacity)); } } @@ -475,20 +473,16 @@ color: rgb(var(--uk-sys-color-on-secondary-container)); &::before { - background-color: rgb( - var(--uk-sys-color-on-secondary-container), - var(--uk-sys-state-hover-state-layer-opacity) - ); + background-color: rgb(var(--uk-sys-color-on-secondary-container), + var(--uk-sys-state-hover-state-layer-opacity)); } &[data-type="toggle"] { color: rgb(var(--uk-sys-color-on-secondary-container)); &::before { - background-color: rgb( - var(--uk-sys-color-on-secondary-container), - var(--uk-sys-state-over-state-layer-opacity) - ); + background-color: rgb(var(--uk-sys-color-on-secondary-container), + var(--uk-sys-state-over-state-layer-opacity)); } } @@ -505,20 +499,16 @@ color: rgb(var(--uk-sys-color-on-secondary-container)); &::before { - background-color: rgb( - var(--uk-sys-color-on-secondary-container), - var(--uk-sys-state-pressed-state-layer-opacity) - ); + background-color: rgb(var(--uk-sys-color-on-secondary-container), + var(--uk-sys-state-pressed-state-layer-opacity)); } &[data-type="toggle"] { color: rgb(var(--uk-sys-color-on-surface-variant)); &::before { - background-color: rgb( - var(--uk-sys-color-on-secondary-container), - var(--uk-sys-state-pressed-state-layer-opacity) - ); + background-color: rgb(var(--uk-sys-color-on-secondary-container), + var(--uk-sys-state-pressed-state-layer-opacity)); } } @@ -579,10 +569,8 @@ color: rgb(var(--uk-sys-color-on-surface-variant)); &::before { - background-color: rgb( - var(--uk-sys-color-on-secondary-container), - var(--uk-sys-state-focus-state-layer-opacity) - ); + background-color: rgb(var(--uk-sys-color-on-secondary-container), + var(--uk-sys-state-focus-state-layer-opacity)); } } @@ -630,10 +618,8 @@ color: rgb(var(--uk-sys-color-on-surface-variant)); &::before { - background-color: rgb( - var(--uk-sys-color-on-surface-variant), - var(--uk-sys-state-pressed-state-layer-opacity) - ); + background-color: rgb(var(--uk-sys-color-on-surface-variant), + var(--uk-sys-state-pressed-state-layer-opacity)); } } @@ -641,10 +627,8 @@ color: rgb(var(--uk-sys-color-inverse-on-surface)); &::before { - background-color: rgb( - var(--uk-sys-color-inverse-on-surface), - var(--uk-sys-state-pressed-state-layer-opacity) - ); + background-color: rgb(var(--uk-sys-color-inverse-on-surface), + var(--uk-sys-state-pressed-state-layer-opacity)); } } } @@ -742,10 +726,8 @@ color: rgb(var(--uk-sys-color-on-surface-variant)); &::before { - background-color: rgb( - var(--uk-sys-color-on-surface-variant), - var(--uk-sys-state-pressed-state-layer-opacity) - ); + background-color: rgb(var(--uk-sys-color-on-surface-variant), + var(--uk-sys-state-pressed-state-layer-opacity)); } } @@ -778,4 +760,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/components/iconButton/UKIconButton.tsx b/src/components/iconButton/UKIconButton.tsx index a10aee6..96009be 100644 --- a/src/components/iconButton/UKIconButton.tsx +++ b/src/components/iconButton/UKIconButton.tsx @@ -11,6 +11,7 @@ import styles from "./UKIconButton.module.scss"; const UKIconButton: Component<{ icon: string; + iconType?: "icon" | "image"; alt: string; onClick: (event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void; width?: IconButtonWidth; @@ -46,7 +47,9 @@ const UKIconButton: Component<{ class={clsx(props.class, styles.root)} aria-label={props.alt} > + {props.iconType === "image" ? : {props.icon} +} ); }; -- 2.51.2