Skip to content

Commit 1e72bc0

Browse files
committed
feat: add new icons for medium megaphone, thumb down fill, and thumb up fill; update ClipboardButton to support borderLess variant
1 parent 1dc3999 commit 1e72bc0

6 files changed

Lines changed: 25 additions & 7 deletions

File tree

Lines changed: 5 additions & 0 deletions
Loading
Lines changed: 3 additions & 0 deletions
Loading
Lines changed: 3 additions & 0 deletions
Loading

src/Common/ClipboardButton/ClipboardButton.tsx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,6 @@ export const ClipboardButton = ({
9999

100100
const iconClassName = `icon-dim-${iconSize} dc__no-shrink`
101101

102-
const ariaLabel = `Copy ${content}`
103-
104102
const renderIcon = () => (
105103
<div className="flex">
106104
{copied ? <Check className={iconClassName} /> : <ICCopy className={iconClassName} />}
@@ -109,10 +107,10 @@ export const ClipboardButton = ({
109107

110108
const tooltipContent = copied ? copiedTippyText : initialTippyText
111109

112-
if (variant === 'button--secondary') {
110+
if (variant === 'button--secondary' || variant === 'borderLess') {
113111
return (
114112
<Button
115-
variant={ButtonVariantType.secondary}
113+
variant={variant === 'button--secondary' ? ButtonVariantType.secondary : ButtonVariantType.borderLess}
116114
dataTestId="clippy-button"
117115
icon={renderIcon()}
118116
size={size}
@@ -121,19 +119,18 @@ export const ClipboardButton = ({
121119
content: tooltipContent,
122120
}}
123121
showTooltip
124-
ariaLabel={ariaLabel}
122+
ariaLabel="Copy to Clipboard"
125123
style={ButtonStyleType.neutral}
126124
/>
127125
)
128126
}
129127

130128
return (
131129
<Tooltip content={tooltipContent} alwaysShowTippyOnHover>
132-
{/* TODO: semantically buttons should not be nested; fix later */}
133130
<button
134131
type="button"
135132
className={`dc__outline-none-imp p-0 flex dc__transparent--unstyled dc__no-border ${rootClassName}`}
136-
aria-label={ariaLabel}
133+
aria-label="Copy to Clipboard"
137134
onClick={handleCopyContent}
138135
>
139136
{renderIcon()}

src/Common/ClipboardButton/types.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ export type ClipboardProps = (
2828
variant: 'button--secondary'
2929
size: ComponentSizeType
3030
}
31+
| {
32+
variant: 'borderLess'
33+
size: ComponentSizeType
34+
}
3135
) & {
3236
content: string
3337
/**

src/Shared/Components/Icon/Icon.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,7 @@ import { ReactComponent as ICLogs } from '@IconsV2/ic-logs.svg'
211211
import { ReactComponent as ICMagicWand } from '@IconsV2/ic-magic-wand.svg'
212212
import { ReactComponent as ICMagnifyingGlass } from '@IconsV2/ic-magnifying-glass.svg'
213213
import { ReactComponent as ICMediumDelete } from '@IconsV2/ic-medium-delete.svg'
214+
import { ReactComponent as ICMediumMegaphone } from '@IconsV2/ic-medium-megaphone.svg'
214215
import { ReactComponent as ICMediumPaintbucket } from '@IconsV2/ic-medium-paintbucket.svg'
215216
import { ReactComponent as ICMegaphoneLeft } from '@IconsV2/ic-megaphone-left.svg'
216217
import { ReactComponent as ICMegaphoneRight } from '@IconsV2/ic-megaphone-right.svg'
@@ -301,7 +302,9 @@ import { ReactComponent as ICTerminal } from '@IconsV2/ic-terminal.svg'
301302
import { ReactComponent as ICTerminalFill } from '@IconsV2/ic-terminal-fill.svg'
302303
import { ReactComponent as ICThermometer } from '@IconsV2/ic-thermometer.svg'
303304
import { ReactComponent as ICThumbDown } from '@IconsV2/ic-thumb-down.svg'
305+
import { ReactComponent as ICThumbDownFill } from '@IconsV2/ic-thumb-down-fill.svg'
304306
import { ReactComponent as ICThumbUp } from '@IconsV2/ic-thumb-up.svg'
307+
import { ReactComponent as ICThumbUpFill } from '@IconsV2/ic-thumb-up-fill.svg'
305308
import { ReactComponent as ICTimeoutDash } from '@IconsV2/ic-timeout-dash.svg'
306309
import { ReactComponent as ICTimer } from '@IconsV2/ic-timer.svg'
307310
import { ReactComponent as ICTrafficSignal } from '@IconsV2/ic-traffic-signal.svg'
@@ -540,6 +543,7 @@ export const iconMap = {
540543
'ic-magic-wand': ICMagicWand,
541544
'ic-magnifying-glass': ICMagnifyingGlass,
542545
'ic-medium-delete': ICMediumDelete,
546+
'ic-medium-megaphone': ICMediumMegaphone,
543547
'ic-medium-paintbucket': ICMediumPaintbucket,
544548
'ic-megaphone-left': ICMegaphoneLeft,
545549
'ic-megaphone-right': ICMegaphoneRight,
@@ -629,7 +633,9 @@ export const iconMap = {
629633
'ic-terminal-fill': ICTerminalFill,
630634
'ic-terminal': ICTerminal,
631635
'ic-thermometer': ICThermometer,
636+
'ic-thumb-down-fill': ICThumbDownFill,
632637
'ic-thumb-down': ICThumbDown,
638+
'ic-thumb-up-fill': ICThumbUpFill,
633639
'ic-thumb-up': ICThumbUp,
634640
'ic-timeout-dash': ICTimeoutDash,
635641
'ic-timer': ICTimer,

0 commit comments

Comments
 (0)