Skip to content

Commit d65d886

Browse files
rebeccaalpertrebeccaalpert
committed
fix(Buttons): Migrate to PF round buttons
We previously had custom-rolled round buttons. Now that PatternFly supports these, we should remove as much custom styling as possible.
1 parent ba585b9 commit d65d886

11 files changed

Lines changed: 73 additions & 149 deletions

File tree

‎packages/module/src/MessageBar/AttachButton.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type { Ref, FunctionComponent } from 'react';
66
import { forwardRef } from 'react';
77

88
// Import PatternFly components
9-
import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
9+
import { Button, ButtonProps, Tooltip, TooltipProps } from '@patternfly/react-core';
1010
import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection, useDropzone } from 'react-dropzone';
1111
import { PaperclipIcon } from '@patternfly/react-icons/dist/esm/icons/paperclip-icon';
1212

@@ -110,18 +110,16 @@ const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
110110
<Button
111111
variant="plain"
112112
ref={innerRef}
113-
className={`pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
113+
isCircle
114+
className={`pf-chatbot__message-bar-button pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
114115
aria-label={props['aria-label'] || 'Attach'}
115116
isDisabled={isDisabled}
116117
onClick={onClick ?? open}
117-
icon={
118-
<Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
119-
{icon}
120-
</Icon>
121-
}
122-
size={isCompact ? 'sm' : undefined}
118+
size={isCompact ? 'sm' : 'lg'}
123119
{...props}
124-
/>
120+
>
121+
{icon}
122+
</Button>
125123
</Tooltip>
126124
</>
127125
);

packages/module/src/MessageBar/AttachButton.scss renamed to packages/module/src/MessageBar/Button.scss

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,40 @@
11
// ============================================================================
2-
// Chatbot Footer - Message Bar - Attach
2+
// Chatbot Footer - Message Bar - Shared button styles
33
// ============================================================================
4-
.pf-v6-c-button.pf-chatbot__button--attach {
5-
border-radius: var(--pf-t--global--border--radius--pill);
6-
padding: var(--pf-t--global--spacer--md);
7-
width: 3rem;
8-
height: 3rem;
4+
.pf-v6-c-button.pf-chatbot__message-bar-button {
5+
color: var(--pf-t--global--icon--color--subtle);
96

7+
.pf-v6-c-button__text,
108
.pf-v6-c-button__icon {
11-
color: var(--pf-t--global--icon--color--subtle);
9+
svg {
10+
font-size: var(--pf-t--global--icon--size--xl);
11+
vertical-align: middle;
12+
}
1213
}
1314

1415
// Interactive states
1516
&:hover {
16-
.pf-v6-c-button__icon {
17-
color: var(--pf-t--global--icon--color--regular);
18-
}
17+
color: var(--pf-t--global--icon--color--regular);
1918
}
2019

2120
&:active,
2221
&:focus {
2322
background-color: var(--pf-t--global--color--brand--clicked);
24-
25-
.pf-v6-c-button__icon {
26-
color: var(--pf-t--global--icon--color--inverse);
27-
}
23+
color: var(--pf-t--global--icon--color--inverse);
2824

2925
&:hover,
3026
&:focus {
31-
.pf-v6-c-button__icon {
32-
color: var(--pf-t--global--icon--color--inverse);
33-
}
27+
color: var(--pf-t--global--icon--color--inverse);
3428
}
3529
}
3630
}
3731

3832
// ============================================================================
3933
// Information density styles
4034
// ============================================================================
41-
.pf-v6-c-button.pf-chatbot__button--attach.pf-m-compact {
42-
width: 1.5rem;
43-
height: 1.5rem;
44-
align-items: center;
35+
.pf-v6-c-button.pf-chatbot__message-bar-button.pf-m-compact {
36+
.pf-v6-c-button__text svg,
37+
.pf-v6-c-button__icon svg {
38+
font-size: var(--pf-t--global--icon--size--lg);
39+
}
4540
}

‎packages/module/src/MessageBar/MessageBar.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Import related component scss files.
2-
@import './AttachButton';
2+
@import './Button';
33
@import './MicrophoneButton';
44
@import './SendButton';
55
@import './StopButton';
@@ -60,6 +60,7 @@
6060

6161
&-actions {
6262
display: flex;
63+
flex-shrink: 0;
6364
justify-content: end;
6465
padding-block-start: var(--pf-t--global--spacer--xs);
6566
padding-block-end: var(--pf-t--global--spacer--xs);
@@ -73,6 +74,7 @@
7374

7475
&-actions-group {
7576
display: flex;
77+
flex-shrink: 0;
7678
padding-block-start: var(--pf-t--global--spacer--xs);
7779
padding-block-end: var(--pf-t--global--spacer--xs);
7880
gap: var(--pf-t--global--spacer--gap--action-to-action--plain);

‎packages/module/src/MessageBar/MicrophoneButton.scss‎

Lines changed: 2 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,7 @@
11
// ============================================================================
22
// Chatbot Footer - Message Bar - Microphone
33
// ============================================================================
4-
.pf-v6-c-button.pf-chatbot__button--microphone {
5-
border-radius: var(--pf-t--global--border--radius--pill);
6-
padding: var(--pf-t--global--spacer--md);
7-
width: 3rem;
8-
height: 3rem;
9-
10-
.pf-v6-c-button__icon {
11-
color: var(--pf-t--global--icon--color--subtle);
12-
}
13-
14-
// Interactive states
15-
&:hover,
16-
&:focus {
17-
.pf-v6-c-button__icon {
18-
color: var(--pf-t--global--icon--color--regular);
19-
}
20-
}
21-
4+
.pf-v6-c-button.pf-chatbot__message-bar-button.pf-chatbot__button--microphone {
225
// Active state (while recording voice)
236
&--active {
247
background-color: var(--pf-t--global--color--brand--clicked);
@@ -45,13 +28,4 @@
4528
100% {
4629
box-shadow: 0 0 0 16px rgba(0, 102, 204, 0);
4730
}
48-
}
49-
50-
// ============================================================================
51-
// Information density styles
52-
// ============================================================================
53-
.pf-v6-c-button.pf-chatbot__button--microphone.pf-m-compact {
54-
width: 1.5rem;
55-
height: 1.5rem;
56-
align-items: center;
57-
}
31+
}

‎packages/module/src/MessageBar/MicrophoneButton.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type { FunctionComponent } from 'react';
66
import { useState, useCallback, useEffect } from 'react';
77

88
// Import PatternFly components
9-
import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
9+
import { Button, ButtonProps, Tooltip, TooltipProps } from '@patternfly/react-core';
1010

1111
// Import FontAwesome icons
1212
import { MicrophoneIcon } from '@patternfly/react-icons/dist/esm/icons/microphone-icon';
@@ -106,18 +106,16 @@ export const MicrophoneButton: FunctionComponent<MicrophoneButtonProps> = ({
106106
>
107107
<Button
108108
variant="plain"
109-
className={`pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
109+
className={`pf-chatbot__message-bar-button pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
110+
isCircle
110111
aria-label={props['aria-label'] || (isListening ? 'Stop listening' : 'Use microphone')}
111112
aria-pressed={isListening}
112113
onClick={isListening ? stopListening : startListening}
113-
icon={
114-
<Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
115-
<MicrophoneIcon />
116-
</Icon>
117-
}
118-
size={isCompact ? 'sm' : undefined}
114+
size={isCompact ? 'sm' : 'lg'}
119115
{...props}
120-
/>
116+
>
117+
<MicrophoneIcon />
118+
</Button>
121119
</Tooltip>
122120
);
123121
};

‎packages/module/src/MessageBar/SendButton.scss‎

Lines changed: 3 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,13 @@
11
// ============================================================================
22
// Chatbot Footer - Message Bar - Send
33
// ============================================================================
4-
.pf-v6-c-button.pf-chatbot__button--send {
5-
border-radius: var(--pf-t--global--border--radius--pill);
6-
padding: var(--pf-t--global--spacer--md);
7-
width: 3rem;
8-
height: 3rem;
9-
10-
.pf-v6-c-button__icon {
11-
--pf-v6-c-button__icon--Color: var(--pf-t--global--color--brand--default);
12-
}
13-
4+
.pf-v6-c-button.pf-chatbot__message-bar-button.pf-chatbot__button--send {
5+
color: var(--pf-t--global--color--brand--default);
6+
147
&:hover,
158
&:focus {
169
background-color: rgba(146, 197, 249, 0.25); // --pf-t--global--color--nonstatus--blue--default @ 25%;
1710
color: var(--pf-t--global--color--brand--hover);
18-
19-
.pf-v6-c-button__icon {
20-
color: var(--pf-t--global--color--brand--hover);
21-
}
2211
}
2312
}
2413

@@ -51,12 +40,3 @@
5140
transform: translate3d(0, 0, 0);
5241
}
5342
}
54-
55-
// ============================================================================
56-
// Information density styles
57-
// ============================================================================
58-
.pf-v6-c-button.pf-chatbot__button--send.pf-m-compact {
59-
width: 1.5rem;
60-
height: 1.5rem;
61-
align-items: center;
62-
}

‎packages/module/src/MessageBar/SendButton.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import type { FunctionComponent } from 'react';
55

66
// Import PatternFly components
7-
import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
7+
import { Button, ButtonProps, Tooltip, TooltipProps } from '@patternfly/react-core';
88

99
import { PaperPlaneIcon } from '@patternfly/react-icons/dist/esm/icons/paper-plane-icon';
1010

@@ -43,17 +43,15 @@ export const SendButton: FunctionComponent<SendButtonProps> = ({
4343
>
4444
<Button
4545
variant="plain"
46-
className={`pf-chatbot__button--send ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
46+
isCircle
47+
className={`pf-chatbot__message-bar-button pf-chatbot__button--send ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
4748
aria-label={props['aria-label'] || 'Send'}
4849
onClick={onClick}
49-
icon={
50-
<Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
51-
<PaperPlaneIcon />
52-
</Icon>
53-
}
54-
size={isCompact ? 'sm' : undefined}
50+
size={isCompact ? 'sm' : 'lg'}
5551
{...props}
56-
/>
52+
>
53+
<PaperPlaneIcon />
54+
</Button>
5755
</Tooltip>
5856
);
5957

‎packages/module/src/MessageBar/StopButton.scss‎

Lines changed: 4 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,21 @@
11
// ============================================================================
22
// Chatbot Footer - Message Bar - Stop
33
// ============================================================================
4-
.pf-v6-c-button.pf-chatbot__button--stop {
4+
.pf-v6-c-button.pf-chatbot__message-bar-button.pf-chatbot__button--stop {
55
background-color: var(--pf-t--global--color--brand--default);
6-
border-radius: var(--pf-t--global--border--radius--pill);
7-
padding: var(--pf-t--global--spacer--md);
8-
width: 3rem;
9-
height: 3rem;
10-
display: flex;
11-
justify-content: center;
12-
align-items: center;
13-
14-
.pf-v6-c-button__icon {
15-
color: var(--pf-t--global--icon--color--on-brand--default);
16-
}
6+
color: var(--pf-t--global--icon--color--on-brand--default);
177

188
&:hover {
199
background-color: var(--pf-t--global--color--brand--hover);
2010
}
2111

2212
&:focus {
2313
background-color: var(--pf-t--global--color--brand--clicked);
24-
25-
.pf-v6-c-button__icon {
26-
color: var(--pf-t--global--icon--color--on-brand--default);
27-
}
14+
color: var(--pf-t--global--icon--color--on-brand--default);
2815

2916
&:hover,
3017
&:focus {
31-
.pf-v6-c-button__icon {
32-
color: var(--pf-t--global--icon--color--on-brand--default);
33-
}
18+
color: var(--pf-t--global--icon--color--on-brand--default);
3419
}
3520
}
3621
}
37-
38-
// ============================================================================
39-
// Information density styles
40-
// ============================================================================
41-
.pf-v6-c-button.pf-chatbot__button--stop.pf-m-compact {
42-
width: 1.5rem;
43-
height: 1.5rem;
44-
align-items: center;
45-
}

‎packages/module/src/MessageBar/StopButton.tsx‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import type { FunctionComponent } from 'react';
55

66
// Import PatternFly components
7-
import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
7+
import { Button, ButtonProps, Tooltip, TooltipProps } from '@patternfly/react-core';
88

99
export interface StopButtonProps extends ButtonProps {
1010
/** Callback for when button is clicked */
@@ -40,23 +40,21 @@ export const StopButton: FunctionComponent<StopButtonProps> = ({
4040
{...tooltipProps}
4141
>
4242
<Button
43-
className={`pf-chatbot__button--stop ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
43+
className={`pf-chatbot__message-bar-button pf-chatbot__button--stop ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
4444
variant="link"
45+
isCircle
4546
aria-label={props['aria-label'] || 'Stop'}
4647
onClick={onClick}
47-
icon={
48-
<Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
49-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
50-
<path
51-
d="M0.5 3C0.5 1.62109 1.62109 0.5 3 0.5H13C14.3789 0.5 15.5 1.62109 15.5 3V13C15.5 14.3789 14.3789 15.5 13 15.5H3C1.62109 15.5 0.5 14.3789 0.5 13V3Z"
52-
fill="currentColor"
53-
/>
54-
</svg>
55-
</Icon>
56-
}
57-
size={isCompact ? 'sm' : undefined}
48+
size={isCompact ? 'sm' : 'lg'}
5849
{...props}
59-
/>
50+
>
51+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
52+
<path
53+
d="M0.5 3C0.5 1.62109 1.62109 0.5 3 0.5H13C14.3789 0.5 15.5 1.62109 15.5 3V13C15.5 14.3789 14.3789 15.5 13 15.5H3C1.62109 15.5 0.5 14.3789 0.5 13V3Z"
54+
fill="currentColor"
55+
/>
56+
</svg>
57+
</Button>
6058
</Tooltip>
6159
);
6260

‎packages/module/src/MessageBox/JumpButton.scss‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
align-items: center !important;
1212
justify-content: center !important;
1313
padding: var(--pf-t--global--spacer--md) !important;
14-
border-radius: var(--pf-t--global--border--radius--pill) !important;
1514
--pf-v6-c-button--MinWidth: 2rem !important;
1615
background-color: var(--pf-t--global--background--color--floating--default);
1716
border: 1px solid var(--pf-t--global--border--color--default) !important;
@@ -21,10 +20,17 @@
2120
transition:
2221
background-color var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm),
2322
box-shadow var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm),
24-
transform var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--md),
25-
opacity var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--md) !important;
23+
transform var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--md);
2624
z-index: var(--pf-t--global--z-index--md) !important;
2725

26+
.pf-v6-c-button__text,
27+
.pf-v6-c-button__icon {
28+
svg {
29+
font-size: var(--pf-t--global--icon--size--lg);
30+
vertical-align: middle;
31+
}
32+
}
33+
2834
.pf-v6-c-button__text {
2935
line-height: 1rem;
3036
}

0 commit comments

Comments
 (0)