Skip to content

fix(Buttons): Migrate to PF round buttons #877

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
rebeccaalpert wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

fix(Buttons): Migrate to PF round buttons #877

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 7 additions & 9 deletions packages/module/src/MessageBar/AttachButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import type { Ref, FunctionComponent } from 'react';
import { forwardRef } from 'react';

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

Expand Down Expand Up @@ -110,18 +110,16 @@ const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
<Button
variant="plain"
ref={innerRef}
className={`pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
isCircle
className={`pf-chatbot__message-bar-button pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
aria-label={props['aria-label'] || 'Attach'}
isDisabled={isDisabled}
onClick={onClick ?? open}
icon={
<Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
{icon}
</Icon>
}
size={isCompact ? 'sm' : undefined}
size={isCompact ? 'sm' : 'lg'}
{...props}
/>
>
{icon}
</Button>
</Tooltip>
</>
);
Expand Down
37 changes: 16 additions & 21 deletions ...s/module/src/MessageBar/AttachButton.scss → packages/module/src/MessageBar/Button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,40 @@
// ============================================================================
// Chatbot Footer - Message Bar - Attach
// Chatbot Footer - Message Bar - Shared button styles
// ============================================================================
.pf-v6-c-button.pf-chatbot__button--attach {
border-radius: var(--pf-t--global--border--radius--pill);
padding: var(--pf-t--global--spacer--md);
width: 3rem;
height: 3rem;
.pf-v6-c-button.pf-chatbot__message-bar-button {
color: var(--pf-t--global--icon--color--subtle);

.pf-v6-c-button__text,
.pf-v6-c-button__icon {
color: var(--pf-t--global--icon--color--subtle);
svg {
font-size: var(--pf-t--global--icon--size--xl);
vertical-align: middle;
}
}

// Interactive states
&:hover {
.pf-v6-c-button__icon {
color: var(--pf-t--global--icon--color--regular);
}
color: var(--pf-t--global--icon--color--regular);
}

&:active,
&:focus {
background-color: var(--pf-t--global--color--brand--clicked);

.pf-v6-c-button__icon {
color: var(--pf-t--global--icon--color--inverse);
}
color: var(--pf-t--global--icon--color--inverse);

&:hover,
&:focus {
.pf-v6-c-button__icon {
color: var(--pf-t--global--icon--color--inverse);
}
color: var(--pf-t--global--icon--color--inverse);
}
}
}

// ============================================================================
// Information density styles
// ============================================================================
.pf-v6-c-button.pf-chatbot__button--attach.pf-m-compact {
width: 1.5rem;
height: 1.5rem;
align-items: center;
.pf-v6-c-button.pf-chatbot__message-bar-button.pf-m-compact {
.pf-v6-c-button__text svg,
.pf-v6-c-button__icon svg {
font-size: var(--pf-t--global--icon--size--lg);
}
}
4 changes: 3 additions & 1 deletion packages/module/src/MessageBar/MessageBar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Import related component scss files.
@import './AttachButton';
@import './Button';
@import './MicrophoneButton';
@import './SendButton';
@import './StopButton';
Expand Down Expand Up @@ -60,6 +60,7 @@

&-actions {
display: flex;
flex-shrink: 0;
justify-content: end;
padding-block-start: var(--pf-t--global--spacer--xs);
padding-block-end: var(--pf-t--global--spacer--xs);
Expand All @@ -73,6 +74,7 @@

&-actions-group {
display: flex;
flex-shrink: 0;
padding-block-start: var(--pf-t--global--spacer--xs);
padding-block-end: var(--pf-t--global--spacer--xs);
gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
Expand Down
30 changes: 2 additions & 28 deletions packages/module/src/MessageBar/MicrophoneButton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,7 @@
// ============================================================================
// Chatbot Footer - Message Bar - Microphone
// ============================================================================
.pf-v6-c-button.pf-chatbot__button--microphone {
border-radius: var(--pf-t--global--border--radius--pill);
padding: var(--pf-t--global--spacer--md);
width: 3rem;
height: 3rem;

.pf-v6-c-button__icon {
color: var(--pf-t--global--icon--color--subtle);
}

// Interactive states
&:hover,
&:focus {
.pf-v6-c-button__icon {
color: var(--pf-t--global--icon--color--regular);
}
}

.pf-v6-c-button.pf-chatbot__message-bar-button.pf-chatbot__button--microphone {
// Active state (while recording voice)
&--active {
background-color: var(--pf-t--global--color--brand--clicked);
Expand All @@ -45,13 +28,4 @@
100% {
box-shadow: 0 0 0 16px rgba(0, 102, 204, 0);
}
}

// ============================================================================
// Information density styles
// ============================================================================
.pf-v6-c-button.pf-chatbot__button--microphone.pf-m-compact {
width: 1.5rem;
height: 1.5rem;
align-items: center;
}
}
16 changes: 7 additions & 9 deletions packages/module/src/MessageBar/MicrophoneButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import type { FunctionComponent } from 'react';
import { useState, useCallback, useEffect } from 'react';

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

// Import FontAwesome icons
import { MicrophoneIcon } from '@patternfly/react-icons/dist/esm/icons/microphone-icon';
Expand Down Expand Up @@ -106,18 +106,16 @@ export const MicrophoneButton: FunctionComponent<MicrophoneButtonProps> = ({
>
<Button
variant="plain"
className={`pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
className={`pf-chatbot__message-bar-button pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
isCircle
aria-label={props['aria-label'] || (isListening ? 'Stop listening' : 'Use microphone')}
aria-pressed={isListening}
onClick={isListening ? stopListening : startListening}
icon={
<Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
<MicrophoneIcon />
</Icon>
}
size={isCompact ? 'sm' : undefined}
size={isCompact ? 'sm' : 'lg'}
{...props}
/>
>
<MicrophoneIcon />
</Button>
</Tooltip>
);
};
Expand Down
26 changes: 3 additions & 23 deletions packages/module/src/MessageBar/SendButton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,13 @@
// ============================================================================
// Chatbot Footer - Message Bar - Send
// ============================================================================
.pf-v6-c-button.pf-chatbot__button--send {
border-radius: var(--pf-t--global--border--radius--pill);
padding: var(--pf-t--global--spacer--md);
width: 3rem;
height: 3rem;

.pf-v6-c-button__icon {
--pf-v6-c-button__icon--Color: var(--pf-t--global--color--brand--default);
}

.pf-v6-c-button.pf-chatbot__message-bar-button.pf-chatbot__button--send {
color: var(--pf-t--global--color--brand--default);

&:hover,
&:focus {
background-color: rgba(146, 197, 249, 0.25); // --pf-t--global--color--nonstatus--blue--default @ 25%;
color: var(--pf-t--global--color--brand--hover);

.pf-v6-c-button__icon {
color: var(--pf-t--global--color--brand--hover);
}
}
}

Expand Down Expand Up @@ -51,12 +40,3 @@
transform: translate3d(0, 0, 0);
}
}

// ============================================================================
// Information density styles
// ============================================================================
.pf-v6-c-button.pf-chatbot__button--send.pf-m-compact {
width: 1.5rem;
height: 1.5rem;
align-items: center;
}
16 changes: 7 additions & 9 deletions packages/module/src/MessageBar/SendButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import type { FunctionComponent } from 'react';

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

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

Expand Down Expand Up @@ -43,17 +43,15 @@ export const SendButton: FunctionComponent<SendButtonProps> = ({
>
<Button
variant="plain"
className={`pf-chatbot__button--send ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
isCircle
className={`pf-chatbot__message-bar-button pf-chatbot__button--send ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
aria-label={props['aria-label'] || 'Send'}
onClick={onClick}
icon={
<Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
<PaperPlaneIcon />
</Icon>
}
size={isCompact ? 'sm' : undefined}
size={isCompact ? 'sm' : 'lg'}
{...props}
/>
>
<PaperPlaneIcon />
</Button>
</Tooltip>
);

Expand Down
32 changes: 4 additions & 28 deletions packages/module/src/MessageBar/StopButton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,21 @@
// ============================================================================
// Chatbot Footer - Message Bar - Stop
// ============================================================================
.pf-v6-c-button.pf-chatbot__button--stop {
.pf-v6-c-button.pf-chatbot__message-bar-button.pf-chatbot__button--stop {
background-color: var(--pf-t--global--color--brand--default);
border-radius: var(--pf-t--global--border--radius--pill);
padding: var(--pf-t--global--spacer--md);
width: 3rem;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;

.pf-v6-c-button__icon {
color: var(--pf-t--global--icon--color--on-brand--default);
}
color: var(--pf-t--global--icon--color--on-brand--default);

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

&:focus {
background-color: var(--pf-t--global--color--brand--clicked);

.pf-v6-c-button__icon {
color: var(--pf-t--global--icon--color--on-brand--default);
}
color: var(--pf-t--global--icon--color--on-brand--default);

&:hover,
&:focus {
.pf-v6-c-button__icon {
color: var(--pf-t--global--icon--color--on-brand--default);
}
color: var(--pf-t--global--icon--color--on-brand--default);
}
}
}

// ============================================================================
// Information density styles
// ============================================================================
.pf-v6-c-button.pf-chatbot__button--stop.pf-m-compact {
width: 1.5rem;
height: 1.5rem;
align-items: center;
}
26 changes: 12 additions & 14 deletions packages/module/src/MessageBar/StopButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import type { FunctionComponent } from 'react';

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

export interface StopButtonProps extends ButtonProps {
/** Callback for when button is clicked */
Expand Down Expand Up @@ -40,23 +40,21 @@ export const StopButton: FunctionComponent<StopButtonProps> = ({
{...tooltipProps}
>
<Button
className={`pf-chatbot__button--stop ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
className={`pf-chatbot__message-bar-button pf-chatbot__button--stop ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
variant="link"
isCircle
aria-label={props['aria-label'] || 'Stop'}
onClick={onClick}
icon={
<Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="currentColor"
/>
</svg>
</Icon>
}
size={isCompact ? 'sm' : undefined}
size={isCompact ? 'sm' : 'lg'}
{...props}
/>
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="currentColor"
/>
</svg>
</Button>
</Tooltip>
);

Expand Down
9 changes: 8 additions & 1 deletion packages/module/src/MessageBox/JumpButton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
align-items: center !important;
justify-content: center !important;
padding: var(--pf-t--global--spacer--md) !important;
border-radius: var(--pf-t--global--border--radius--pill) !important;
--pf-v6-c-button--MinWidth: 2rem !important;
background-color: var(--pf-t--global--background--color--floating--default);
border: 1px solid var(--pf-t--global--border--color--default) !important;
Expand All @@ -25,6 +24,14 @@
opacity var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--md) !important;
z-index: var(--pf-t--global--z-index--md) !important;

.pf-v6-c-button__text,
.pf-v6-c-button__icon {
svg {
font-size: var(--pf-t--global--icon--size--lg);
vertical-align: middle;
}
}

.pf-v6-c-button__text {
line-height: 1rem;
}
Expand Down
Loading
Loading