-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into 17292_typescript
- Loading branch information
Showing
7 changed files
with
188 additions
and
122 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
157 changes: 157 additions & 0 deletions
157
packages/react/src/components/ChatButton/ChatButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| /** | ||
| * Copyright IBM Corp. 2024 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import React, { type ComponentType, type FunctionComponent } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import classnames from 'classnames'; | ||
| import Button from '../Button'; | ||
| import { usePrefix } from '../../internal/usePrefix'; | ||
|
|
||
| export type ChatButtonKind = | ||
| | 'primary' | ||
| | 'secondary' | ||
| | 'danger' | ||
| | 'ghost' | ||
| | 'tertiary'; | ||
| export type ChatButtonSize = 'sm' | 'md' | 'lg'; | ||
|
|
||
| export interface ChatButtonProps | ||
| extends React.ButtonHTMLAttributes<HTMLButtonElement> { | ||
| /** | ||
| * Provide the contents of your Select | ||
| */ | ||
| children?: React.ReactNode; | ||
| /** | ||
| * Specify an optional className to be applied to the node containing the label and the select box | ||
| */ | ||
| className?: string; | ||
| /** | ||
| * Specify whether the `ChatButton` should be disabled | ||
| */ | ||
| disabled?: boolean; | ||
| /** | ||
| * Specify whether the `ChatButton` should be rendered as a quick action button | ||
| */ | ||
| isQuickAction?: boolean; | ||
| /** | ||
| * Specify whether the quick action `ChatButton` should be rendered as selected. This disables the input | ||
| */ | ||
| isSelected?: boolean; | ||
| /** | ||
| * Specify the kind of `ChatButton` you want to create | ||
| */ | ||
| kind?: ChatButtonKind; | ||
| /** | ||
| * Optional prop to specify an icon to be rendered. | ||
| * Can be a React component class | ||
| */ | ||
| renderIcon?: ComponentType | FunctionComponent; | ||
| /** | ||
| * Specify the size of the `ChatButton`, from the following list of sizes: | ||
| */ | ||
| size?: ChatButtonSize; | ||
| } | ||
|
|
||
| const ChatButton = React.forwardRef<HTMLButtonElement, ChatButtonProps>( | ||
| function ChatButton( | ||
| { | ||
| className, | ||
| children, | ||
| disabled, | ||
| isQuickAction, | ||
| isSelected, | ||
| kind, | ||
| renderIcon, | ||
| size, | ||
| ...other | ||
| }: ChatButtonProps, | ||
| ref | ||
| ) { | ||
| const prefix = usePrefix(); | ||
| const classNames = classnames(className, { | ||
| [`${prefix}--chat-btn`]: true, | ||
| [`${prefix}--chat-btn--with-icon`]: renderIcon, | ||
| [`${prefix}--chat-btn--quick-action`]: isQuickAction, | ||
| [`${prefix}--chat-btn--quick-action--selected`]: isSelected, | ||
| }); | ||
|
|
||
| const allowedSizes: ChatButtonSize[] = ['sm', 'md', 'lg']; | ||
|
|
||
| if (isQuickAction) { | ||
| kind = 'ghost'; | ||
| size = 'sm'; | ||
| } else { | ||
| // Do not allow size larger than `lg` | ||
| size = allowedSizes.includes(size as ChatButtonSize) ? size : 'lg'; | ||
| } | ||
|
|
||
| return ( | ||
| <Button | ||
| disabled={disabled} | ||
| className={classNames} | ||
| kind={kind} | ||
| ref={ref} | ||
| size={size as ChatButtonSize} | ||
| renderIcon={renderIcon} | ||
| {...other}> | ||
| {children} | ||
| </Button> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| ChatButton.propTypes = { | ||
| /** | ||
| * Provide the contents of your Select | ||
| */ | ||
| children: PropTypes.node, | ||
|
|
||
| /** | ||
| * Specify an optional className to be applied to the node containing the label and the select box | ||
| */ | ||
| className: PropTypes.string, | ||
|
|
||
| /** | ||
| * Specify whether the `ChatButton` should be disabled | ||
| */ | ||
| disabled: PropTypes.bool, | ||
|
|
||
| /** | ||
| * Specify whether the `ChatButton` should be rendered as a quick action button | ||
| */ | ||
| isQuickAction: PropTypes.bool, | ||
|
|
||
| /** | ||
| * Specify whether the quick action `ChatButton` should be rendered as selected. This disables the input | ||
| */ | ||
| isSelected: PropTypes.bool, | ||
|
|
||
| /** | ||
| * Specify the kind of `ChatButton` you want to create | ||
| */ | ||
| kind: PropTypes.oneOf([ | ||
| 'primary', | ||
| 'secondary', | ||
| 'danger', | ||
| 'ghost', | ||
| 'tertiary', | ||
| ]), | ||
|
|
||
| /** | ||
| * Optional prop to specify an icon to be rendered. | ||
| * Can be a React component class | ||
| */ | ||
| // @ts-expect-error: PropTypes are not expressive enough to cover this case | ||
| renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), | ||
|
|
||
| /** | ||
| * Specify the size of the `ChatButton`, from the following list of sizes: | ||
| */ | ||
| size: PropTypes.oneOf(['sm', 'md', 'lg']), | ||
| }; | ||
|
|
||
| export default ChatButton; |
6 changes: 4 additions & 2 deletions
6
.../react/src/components/ChatButton/index.js → ...react/src/components/ChatButton/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,14 @@ | ||
| /** | ||
| * Copyright IBM Corp. 2022 | ||
| * Copyright IBM Corp. 2024 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import ChatButton from './ChatButton'; | ||
| import { type ChatButtonProps } from './ChatButton'; | ||
| import { type ChatButtonSkeletonProps } from './ChatButton.Skeleton'; | ||
|
|
||
| export default ChatButton; | ||
| export { ChatButton }; | ||
| export { ChatButton, type ChatButtonProps, type ChatButtonSkeletonProps }; | ||
| export { default as ChatButtonSkeleton } from './ChatButton.Skeleton'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters