Skip to content

Commit 3f8c19b

Browse files
MartinCupelaMartinCupela
committed
feat: introduce button variant props
1 parent 6c0c0ea commit 3f8c19b

24 files changed

+132
-198
lines changed

‎src/components/Attachment/AttachmentActions.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,9 @@ const UnMemoizedAttachmentActions = (props: AttachmentActionsProps) => {
7070
<span>{text}</span>
7171
{actions.map((action, index) => (
7272
<Button
73+
appearance='ghost'
7374
className={clsx(
7475
`str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--${action.style}`,
75-
'str-chat__button--ghost',
76-
'str-chat__button--secondary',
7776
)}
7877
data-testid={`${action.name}`}
7978
data-value={action.value}
@@ -82,6 +81,7 @@ const UnMemoizedAttachmentActions = (props: AttachmentActionsProps) => {
8281
ref={(element) => {
8382
buttonRefs.current[index] = element;
8483
}}
84+
variant='secondary'
8585
>
8686
{action.text ? (knownActionText[action.text] ?? t(action.text)) : null}
8787
</Button>

‎src/components/Attachment/components/PlaybackRateButton.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ export const PlaybackRateButton = ({ children, onClick }: PlaybackRateButtonProp
99
className={clsx('str-chat__message_attachment__playback-rate-button')}
1010
data-testid='playback-rate-button'
1111
onClick={onClick}
12-
type='button'
1312
>
1413
{children}
1514
</Button>

‎src/components/Button/PlayButton.tsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,13 @@ export type PlayButtonProps = ComponentProps<'button'> & {
99

1010
export const PlayButton = ({ className, isPlaying, ...props }: PlayButtonProps) => (
1111
<Button
12-
{...props}
13-
className={clsx(
14-
'str-chat__button-play',
15-
'str-chat__button--secondary',
16-
'str-chat__button--outline',
17-
'str-chat__button--size-sm',
18-
'str-chat__button--circular',
19-
className,
20-
)}
12+
appearance='outline'
13+
circular
14+
className={clsx('str-chat__button-play', className)}
2115
data-testid={isPlaying ? 'pause-audio' : 'play-audio'}
16+
size='sm'
17+
variant='secondary'
18+
{...props}
2219
>
2320
{isPlaying ? <IconPause /> : <IconPlaySolid />}
2421
</Button>

‎src/components/ChatView/ChatView.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -142,14 +142,11 @@ export const ChatViewSelectorButton = ({
142142
...props
143143
}: ButtonProps & { Icon?: ComponentType; text?: string }) => (
144144
<Button
145-
{...props}
146-
className={clsx(
147-
'str-chat__chat-view__selector-button',
148-
'str-chat__button--ghost',
149-
'str-chat__button--secondary',
150-
className,
151-
)}
145+
appearance='ghost'
146+
className={clsx('str-chat__chat-view__selector-button', className)}
152147
role='tab'
148+
variant='secondary'
149+
{...props}
153150
>
154151
{text ? (
155152
<>

‎src/components/Dialog/components/Callout.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,15 +54,12 @@ const DefaultCalloutDialog = ({ children, className, onClose }: CalloutDialogPro
5454
<div className='str-chat__callout'>
5555
{children}
5656
<Button
57-
className={clsx(
58-
className,
59-
'str-chat__callout__close-button',
60-
'str-chat__button--ghost',
61-
'str-chat__button--secondary',
62-
'str-chat__button--size-sm',
63-
'str-chat__button--circular',
64-
)}
57+
appearance='ghost'
58+
circular
59+
className={clsx(className, 'str-chat__callout__close-button')}
6560
onClick={onClose}
61+
size='sm'
62+
variant='secondary'
6663
>
6764
<IconCrossMedium />
6865
</Button>

‎src/components/Dialog/components/Prompt.tsx‎

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,12 @@ const PromptHeader = ({
2727
<div className={clsx('str-chat__prompt__header', className)}>
2828
{goBack && (
2929
<Button
30-
className={clsx(
31-
'str-chat__prompt__header__go-back-button',
32-
'str-chat__button--secondary',
33-
'str-chat__button--ghost',
34-
'str-chat__button--circular',
35-
'str-chat__button--size-sm',
36-
)}
30+
appearance='ghost'
31+
circular
32+
className='str-chat__prompt__header__go-back-button'
3733
onClick={goBack}
34+
size='sm'
35+
variant='secondary'
3836
>
3937
<IconArrowLeft />
4038
</Button>
@@ -47,14 +45,12 @@ const PromptHeader = ({
4745
</div>
4846
{close && (
4947
<Button
50-
className={clsx(
51-
'str-chat__prompt__header__close-button',
52-
'str-chat__button--secondary',
53-
'str-chat__button--ghost',
54-
'str-chat__button--size-sm',
55-
'str-chat__button--circular',
56-
)}
48+
appearance='ghost'
49+
circular
50+
className='str-chat__prompt__header__close-button'
5751
onClick={close}
52+
size='sm'
53+
variant='secondary'
5854
>
5955
<IconCrossMedium />
6056
</Button>
@@ -88,27 +84,21 @@ const PromptFooterControls = ({ children, className }: PromptFooterControlsProps
8884

8985
const PromptFooterControlsButtonSecondary = ({ className, ...props }: ButtonProps) => (
9086
<Button
87+
appearance='ghost'
88+
className={clsx('str-chat__prompt__footer__controls-button', className)}
89+
size='md'
90+
variant='secondary'
9191
{...props}
92-
className={clsx(
93-
'str-chat__prompt__footer__controls-button',
94-
'str-chat__button--secondary',
95-
'str-chat__button--ghost',
96-
'str-chat__button--size-md',
97-
className,
98-
)}
9992
/>
10093
);
10194

10295
const PromptFooterControlsButtonPrimary = ({ className, ...props }: ButtonProps) => (
10396
<Button
97+
appearance='solid'
98+
className={clsx('str-chat__prompt__footer__controls-button', className)}
99+
size='md'
100+
variant='primary'
104101
{...props}
105-
className={clsx(
106-
'str-chat__prompt__footer__controls-button',
107-
'str-chat__button--primary',
108-
'str-chat__button--solid',
109-
'str-chat__button--size-md',
110-
className,
111-
)}
112102
/>
113103
);
114104

‎src/components/Form/NumericInput.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -116,15 +116,15 @@ export const NumericInput = forwardRef<HTMLInputElement, NumericInputProps>(
116116
)}
117117
<div className={clsx('str-chat__form-numeric-input__wrapper')}>
118118
<Button
119+
appearance='outline'
119120
aria-label='Decrease value'
121+
circular
120122
className={clsx(
121123
'str-chat__form-numeric-input__stepper str-chat__form-numeric-input__stepper--decrement',
122-
'str-chat__button--circular',
123-
'str-chat__button--secondary',
124-
'str-chat__button--outline',
125124
)}
126125
disabled={disabled || atMin}
127126
onClick={handleDecrement}
127+
variant='secondary'
128128
>
129129
<span aria-hidden className='str-chat__form-numeric-input__stepper-icon'>
130130
−
@@ -143,16 +143,16 @@ export const NumericInput = forwardRef<HTMLInputElement, NumericInputProps>(
143143
{...inputProps}
144144
/>
145145
<Button
146+
appearance='outline'
146147
aria-label='Increase value'
148+
circular
147149
className={clsx(
148150
'str-chat__form-numeric-input__stepper str-chat__form-numeric-input__stepper--increment',
149-
'str-chat__button--circular',
150-
'str-chat__button--secondary',
151-
'str-chat__button--outline',
152-
'str-chat__button--size-sm',
153151
)}
154152
disabled={disabled || atMax}
155153
onClick={handleIncrement}
154+
size='sm'
155+
variant='secondary'
156156
>
157157
<IconPlusSmall className='str-chat__form-numeric-input__stepper-icon' />
158158
</Button>

‎src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx‎

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import React from 'react';
44
import { useMessageInputContext } from '../../../context';
55
import { isRecording } from './recordingStateIdentity';
66
import { Button } from '../../Button';
7-
import clsx from 'clsx';
87

98
const ToggleRecordingButton = () => {
109
const {
@@ -13,16 +12,14 @@ const ToggleRecordingButton = () => {
1312

1413
return (
1514
<Button
16-
className={clsx(
17-
'str-chat__audio_recorder__toggle-recording-button',
18-
'str-chat__button--secondary',
19-
'str-chat__button--outline',
20-
'str-chat__button--size-sm',
21-
'str-chat__button--circular',
22-
)}
15+
appearance='outline'
16+
circular
17+
className='str-chat__audio_recorder__toggle-recording-button'
2318
onClick={() =>
2419
isRecording(recordingState) ? recorder?.pause() : recorder?.resume()
2520
}
21+
size='sm'
22+
variant='secondary'
2623
>
2724
{isRecording(recordingState) ? <IconPause /> : <IconMicrophone />}
2825
</Button>
@@ -41,31 +38,27 @@ export const AudioRecorderRecordingControls = () => {
4138
<div className='str-chat__audio_recorder__recording-controls'>
4239
{!isRecording(recordingState) && (
4340
<Button
44-
className={clsx(
45-
'str-chat__audio_recorder__cancel-button',
46-
'str-chat__button--secondary',
47-
'str-chat__button--ghost',
48-
'str-chat__button--size-sm',
49-
'str-chat__button--circular',
50-
)}
41+
appearance='ghost'
42+
circular
43+
className='str-chat__audio_recorder__cancel-button'
5144
data-testid={'cancel-recording-audio-button'}
5245
disabled={isUploadingFile}
5346
onClick={recorder.cancel}
47+
size='sm'
48+
variant='secondary'
5449
>
5550
<IconTrashBin />
5651
</Button>
5752
)}
5853
<ToggleRecordingButton />
5954
<Button
60-
className={clsx(
61-
'str-chat__audio_recorder__stop-button',
62-
'str-chat__button--solid',
63-
'str-chat__button--primary',
64-
'str-chat__button--size-sm',
65-
'str-chat__button--circular',
66-
)}
55+
appearance='solid'
56+
circular
57+
className='str-chat__audio_recorder__stop-button'
6758
data-testid='audio-recorder-stop-button'
6859
onClick={completeRecording}
60+
size='sm'
61+
variant='primary'
6962
>
7063
{isUploadingFile ? <LoadingIndicatorIcon /> : <CheckSignIcon />}
7164
</Button>

‎src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { useAttachmentManagerState } from '../../MessageInput';
55
import { useComponentContext, useMessageInputContext } from '../../../context';
66
import { Callout, useDialogOnNearestManager } from '../../Dialog';
77
import { Button } from '../../Button';
8-
import clsx from 'clsx';
98
import { IconMicrophone } from '../../Icons';
109

1110
const dialogId = 'recording-permission-denied-notification';
@@ -66,15 +65,13 @@ export const DefaultStartRecordingAudioButton = forwardRef<
6665
>(function StartRecordingAudioButton(props, ref) {
6766
return (
6867
<Button
68+
appearance='ghost'
6969
aria-label='Start recording audio'
70-
className={clsx(
71-
'str-chat__start-recording-audio-button',
72-
'str-chat__button--ghost',
73-
'str-chat__button--secondary',
74-
'str-chat__button--size-sm',
75-
'str-chat__button--circular',
76-
)}
70+
circular
71+
className='str-chat__start-recording-audio-button'
7772
data-testid='start-recording-audio-button'
73+
size='sm'
74+
variant='secondary'
7875
{...props}
7976
ref={ref}
8077
>

‎src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,15 +57,13 @@ export const AudioRecordingPlayback = ({
5757
})}
5858
>
5959
<Button
60-
className={clsx(
61-
'str-chat__audio_recorder__toggle-playback-button',
62-
'str-chat__button--secondary',
63-
'str-chat__button--ghost',
64-
'str-chat__button--size-sm',
65-
'str-chat__button--circular',
66-
)}
60+
appearance='ghost'
61+
circular
62+
className='str-chat__audio_recorder__toggle-playback-button'
6763
data-testid='audio-recording-preview-toggle-play-btn'
6864
onClick={audioPlayer.togglePlay}
65+
size='sm'
66+
variant='secondary'
6967
>
7068
{isPlaying ? <IconPause /> : <IconPlaySolid />}
7169
</Button>

0 commit comments

Comments
 (0)