Skip to content

Commit 660d4ef

Browse files
JWittmeyerJWittmeyer
authored
Cognition UI Facelift (#50)
* Add option for button icon classes * Additions for ui facelisft * PR comment
1 parent 1cca1ca commit 660d4ef

File tree

3 files changed

+28
-5
lines changed

3 files changed

+28
-5
lines changed

‎components/KernDropdown.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ export default function KernDropdown(props: KernDropdownProps) {
197197
disabled={isDisabled && !props.ignoreDisabledForSearch}
198198
placeholder="Type to search..." />
199199
<MemoIconChevronDown
200-
className={`h-5 w-5 absolute right-0 mr-3 -mt-7 ${isDisabled && !props.ignoreDisabledForSearch ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
200+
className={`h-5 w-5 absolute right-0 mr-3 -mt-7 ${isDisabled && !props.ignoreDisabledForSearch ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'} ${props.buttonIconClasses}`}
201201
aria-hidden="true"
202202
/>
203203
</div> : <>
@@ -212,14 +212,17 @@ export default function KernDropdown(props: KernDropdownProps) {
212212
) : (<Menu.Button onClick={toggleDropdown} className={`inline-flex w-full justify-between items-center rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 shadow-sm focus:outline-none focus:ring-2
213213
focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-100 disabled:opacity-50 disabled:cursor-not-allowed ${props.buttonClasses ?? ''} ${props.buttonCaptionBgColor ?? 'bg-white hover:bg-gray-50'}`}
214214
disabled={isDisabled && !props.hasCheckboxes}>
215-
{!props.hasCheckboxesThreeStates && props.buttonName}
215+
<div className='flex items-center gap-x-1'>
216+
{props.buttonPrefixIcon}
217+
{!props.hasCheckboxesThreeStates && props.buttonName}
218+
</div>
216219
{props.hasCheckboxesThreeStates && <label
217220
className="truncate cursor-pointer text-sm">{getDropdownDisplayText(props.options, "EMPTY")}
218221
<span style={{ color: '#4e46e5' }}>{getDropdownDisplayText(props.options, "NOT_NEGATED")}</span>
219222
<span style={{ color: '#ef4444' }}>{getDropdownDisplayText(props.options, "NEGATED")}</span>
220223
</label>}
221224
<MemoIconChevronDown
222-
className="-mr-1 ml-2 h-5 w-5"
225+
className={`-mr-1 ml-2 h-5 w-5 ${props.buttonIconClasses}`}
223226
aria-hidden="true"
224227
/>
225228
</Menu.Button>)}

‎components/SVGIcon.tsx

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
import { MemoIconBolt, MemoIconChevronDown, MemoIconCode, MemoIconDotsVertical, MemoIconEdit, MemoIconExternalLink, MemoIconFileInfo, MemoIconFilePencil, MemoIconLoader, MemoIconPlayerPlayFilled, MemoIconShieldCheckFilled, MemoIconShieldFilled, MemoIconSquare, MemoIconSquareCheck, MemoIconTrash } from './kern-icons/icons';
1+
import { IconHammer, IconSettingsFilled, IconZoomIn, IconZoomOut } from '@tabler/icons-react';
2+
import { MemoIconBolt, MemoIconChevronDown, MemoIconCode, MemoIconDotsVertical, MemoIconEdit, MemoIconExternalLink, MemoIconFileInfo, MemoIconFilePencil, MemoIconLoader, MemoIconPlayerPlayFilled, MemoIconPlus, MemoIconSettings, MemoIconShieldCheckFilled, MemoIconShieldFilled, MemoIconSquare, MemoIconSquareCheck, MemoIconTrash } from './kern-icons/icons';
23

34
export const SUPPORTED_ICONS = ['IconCode', 'IconBolt', 'IconSquareCheck', 'IconSquare', 'IconPlayerPlayFilled', 'IconTrash', 'IconExternalLink',
4-
'IconLoader', 'IconFilePencil', 'IconFileInfo', 'IconEdit', 'IconShieldFilled', 'IconShieldCheckFilled'
5+
'IconLoader', 'IconFilePencil', 'IconFileInfo', 'IconEdit', 'IconShieldFilled', 'IconShieldCheckFilled', 'IconPlus', 'IconSettings', 'IconSettingsFilled',
6+
'IconHammer', 'IconZoomIn', 'IconZoomOut'
7+
58
]
69

710
type SVGIconProps = {
@@ -43,6 +46,18 @@ export default function SVGIcon(props: SVGIconProps) {
4346
return <MemoIconShieldFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
4447
case 'IconShieldCheckFilled':
4548
return <MemoIconShieldCheckFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
49+
case 'IconPlus':
50+
return <MemoIconPlus size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
51+
case 'IconSettings':
52+
return <MemoIconSettings size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
53+
case 'IconSettingsFilled':
54+
return <IconSettingsFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
55+
case 'IconHammer':
56+
return <IconHammer size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
57+
case 'IconZoomIn':
58+
return <IconZoomIn size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
59+
case 'IconZoomOut':
60+
return <IconZoomOut size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
4661
default: return <MemoIconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
4762
}
4863

‎types/dropdown.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import React from "react";
2+
13
/**
24
* Optionset for kern dropdown
35
* @buttonName {string} - The name of the button
@@ -12,6 +14,7 @@
1214
* @doNotUseTextArray {boolean} - If the dropdown should not use the text array
1315
* @disabledOptions {boolean[], optional} - disables the dropdown option (needs to be the exact same length as the optionArray)
1416
* @buttonClasses {string} - The classes that will be applied to the button
17+
* @buttonIconClasses {string} - The classes that will be applied to the chevron down icon of the button
1518
* @tooltipsArray {string[]} - The array of tooltips that will be applied to the dropdown items (needs to be the exact same length as the optionArray)
1619
* @tooltipArrayPlacement {string} - The placement of the tooltips in the dropdown items
1720
* @hasSearchBar {boolean} - If the dropdown has a search bar
@@ -55,6 +58,8 @@ export type KernDropdownProps = {
5558
doNotUseTextArray?: boolean;
5659
disabledOptions?: boolean[];
5760
buttonClasses?: string;
61+
buttonIconClasses?: string;
62+
buttonPrefixIcon?: React.ReactNode;
5863
tooltipsArray?: string[];
5964
tooltipArrayPlacement?: "bottom" | "left" | "right" | "top" | "topStart" | "topEnd" | "leftStart" | "leftEnd" | "bottomStart" | "bottomEnd" | "rightStart" | "rightEnd";
6065
hasSearchBar?: boolean;

0 commit comments

Comments
 (0)