From 364e095d09708efac26a03cd11762a8c1e5424d0 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Thu, 1 Feb 2024 10:06:44 -0500 Subject: [PATCH 01/10] feat(ChatButton): scaffold initial structure --- .../src/components/ChatButton/ChatButton.js | 40 +++++++++++++++ .../ChatButton/ChatButton.stories.js | 50 +++++++++++++++++++ .../react/src/components/ChatButton/index.js | 0 3 files changed, 90 insertions(+) create mode 100644 packages/react/src/components/ChatButton/ChatButton.js create mode 100644 packages/react/src/components/ChatButton/ChatButton.stories.js create mode 100644 packages/react/src/components/ChatButton/index.js diff --git a/packages/react/src/components/ChatButton/ChatButton.js b/packages/react/src/components/ChatButton/ChatButton.js new file mode 100644 index 000000000000..eb8ea021d2eb --- /dev/null +++ b/packages/react/src/components/ChatButton/ChatButton.js @@ -0,0 +1,40 @@ +/** + * Copyright IBM Corp. 2022 + * + * 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 PropTypes from 'prop-types'; +import React from 'react'; +import classnames from 'classnames'; +import Button from '../Button'; +import { usePrefix } from '../../internal/usePrefix'; + +const ChatButton = React.forwardRef(function ChatButton( + { className, children, ...other }, + ref +) { + const prefix = usePrefix(); + const classNames = classnames(`${prefix}--select--fluid`, className); + + return ( + + ); +}); + +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, +}; + +export default ChatButton; diff --git a/packages/react/src/components/ChatButton/ChatButton.stories.js b/packages/react/src/components/ChatButton/ChatButton.stories.js new file mode 100644 index 000000000000..cf22a0d1797d --- /dev/null +++ b/packages/react/src/components/ChatButton/ChatButton.stories.js @@ -0,0 +1,50 @@ +/** + * Copyright IBM Corp. 2022 + * + * 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 from 'react'; +import { ChatButton } from '.'; + +export default { + title: 'Experimental/unstable__ChatButton', + component: ChatButton, + parameters: {}, + argTypes: { + onChange: { + action: 'onChange', + table: { + disable: true, + }, + }, + children: { + table: { + disable: true, + }, + }, + className: { + table: { + disable: true, + }, + }, + defaultValue: { + table: { + disable: true, + }, + }, + id: { + table: { + disable: true, + }, + }, + light: { + table: { + disable: true, + }, + }, + }, +}; + +export const Default = () => Test; diff --git a/packages/react/src/components/ChatButton/index.js b/packages/react/src/components/ChatButton/index.js new file mode 100644 index 000000000000..e69de29bb2d1 From c699f0ac24a8c0c1916489e2b56bf393926c795f Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Thu, 1 Feb 2024 11:02:42 -0500 Subject: [PATCH 02/10] feat(Button): add props, more stories --- .../src/components/ChatButton/ChatButton.js | 14 +++++++++++--- .../ChatButton/ChatButton.stories.js | 19 +++++++++++++++++-- .../react/src/components/ChatButton/index.js | 11 +++++++++++ 3 files changed, 39 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/ChatButton/ChatButton.js b/packages/react/src/components/ChatButton/ChatButton.js index eb8ea021d2eb..6fe5819bf0e6 100644 --- a/packages/react/src/components/ChatButton/ChatButton.js +++ b/packages/react/src/components/ChatButton/ChatButton.js @@ -12,14 +12,22 @@ import Button from '../Button'; import { usePrefix } from '../../internal/usePrefix'; const ChatButton = React.forwardRef(function ChatButton( - { className, children, ...other }, + { className, children, isQuickAction, size, kind, ...other }, ref ) { const prefix = usePrefix(); - const classNames = classnames(`${prefix}--select--fluid`, className); + const classNames = classnames(className, { [`${prefix}--chat-btn`]: true }); + + const allowedSizes = ['sm', 'md', 'lg']; + const normalizedSize = allowedSizes.includes(size) ? size : 'lg'; return ( - ); diff --git a/packages/react/src/components/ChatButton/ChatButton.stories.js b/packages/react/src/components/ChatButton/ChatButton.stories.js index cf22a0d1797d..acf5dedef64d 100644 --- a/packages/react/src/components/ChatButton/ChatButton.stories.js +++ b/packages/react/src/components/ChatButton/ChatButton.stories.js @@ -6,7 +6,7 @@ */ import React from 'react'; -import { ChatButton } from '.'; +import ChatButton from './'; export default { title: 'Experimental/unstable__ChatButton', @@ -47,4 +47,19 @@ export default { }, }; -export const Default = () => Test; +export const Default = () => ( +
+
+ {' '} + Test + Test + Test +
+
+ Test + Test + Test + Test +
+
+); diff --git a/packages/react/src/components/ChatButton/index.js b/packages/react/src/components/ChatButton/index.js index e69de29bb2d1..2b7565efa2b4 100644 --- a/packages/react/src/components/ChatButton/index.js +++ b/packages/react/src/components/ChatButton/index.js @@ -0,0 +1,11 @@ +/** + * Copyright IBM Corp. 2022 + * + * 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'; + +export default ChatButton; +export { ChatButton }; From 2ec6887fb2045798b10527a9262c4b05facef1f1 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Thu, 1 Feb 2024 13:15:17 -0500 Subject: [PATCH 03/10] feat(Button): add quick action, skeleton styles --- .../ChatButton/ChatButton.Skeleton.js | 33 ++++++++++ .../src/components/ChatButton/ChatButton.js | 29 +++++++-- .../ChatButton/ChatButton.stories.js | 61 +++++++++++++++--- .../ChatButton/chat-button-story.scss | 7 +++ .../react/src/components/ChatButton/index.js | 1 + packages/styles/files.js | 2 + packages/styles/scss/components/_index.scss | 1 + .../components/chat-button/_chat-button.scss | 62 +++++++++++++++++++ .../scss/components/chat-button/_index.scss | 11 ++++ 9 files changed, 194 insertions(+), 13 deletions(-) create mode 100644 packages/react/src/components/ChatButton/ChatButton.Skeleton.js create mode 100644 packages/react/src/components/ChatButton/chat-button-story.scss create mode 100644 packages/styles/scss/components/chat-button/_chat-button.scss create mode 100644 packages/styles/scss/components/chat-button/_index.scss diff --git a/packages/react/src/components/ChatButton/ChatButton.Skeleton.js b/packages/react/src/components/ChatButton/ChatButton.Skeleton.js new file mode 100644 index 000000000000..de0a7030d430 --- /dev/null +++ b/packages/react/src/components/ChatButton/ChatButton.Skeleton.js @@ -0,0 +1,33 @@ +/** + * Copyright IBM Corp. 2022 + * + * 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 PropTypes from 'prop-types'; +import React from 'react'; +import cx from 'classnames'; +import { usePrefix } from '../../internal/usePrefix'; + +const ChatButtonSkeleton = ({ className, size, ...rest }) => { + const prefix = usePrefix(); + const skeletonClasses = cx( + className, + `${prefix}--skeleton`, + `${prefix}--btn`, + `${prefix}--chat-btn`, + { [`${prefix}--layout--size-${size}`]: size } + ); + + return
; +}; + +ChatButtonSkeleton.propTypes = { + /** + * Specify an optional className to add. + */ + className: PropTypes.string, +}; + +export default ChatButtonSkeleton; diff --git a/packages/react/src/components/ChatButton/ChatButton.js b/packages/react/src/components/ChatButton/ChatButton.js index 6fe5819bf0e6..f5558bd7f433 100644 --- a/packages/react/src/components/ChatButton/ChatButton.js +++ b/packages/react/src/components/ChatButton/ChatButton.js @@ -12,21 +12,42 @@ import Button from '../Button'; import { usePrefix } from '../../internal/usePrefix'; const ChatButton = React.forwardRef(function ChatButton( - { className, children, isQuickAction, size, kind, ...other }, + { + className, + children, + disabled, + isQuickAction, + isSelected, + size, + kind, + ...other + }, ref ) { const prefix = usePrefix(); - const classNames = classnames(className, { [`${prefix}--chat-btn`]: true }); + const classNames = classnames(className, { + [`${prefix}--chat-btn`]: true, + [`${prefix}--chat-btn--quick-action`]: isQuickAction, + [`${prefix}--chat-btn--quick-action--selected`]: isSelected, + }); const allowedSizes = ['sm', 'md', 'lg']; - const normalizedSize = allowedSizes.includes(size) ? size : 'lg'; + + if (isQuickAction) { + kind = 'ghost'; + size = 'sm'; + } else { + // Do not allow size larger than `lg` + size = allowedSizes.includes(size) ? size : 'lg'; + } return ( diff --git a/packages/react/src/components/ChatButton/ChatButton.stories.js b/packages/react/src/components/ChatButton/ChatButton.stories.js index acf5dedef64d..bbdf7a47bc0b 100644 --- a/packages/react/src/components/ChatButton/ChatButton.stories.js +++ b/packages/react/src/components/ChatButton/ChatButton.stories.js @@ -6,7 +6,9 @@ */ import React from 'react'; -import ChatButton from './'; +import { ChatButton, ChatButtonSkeleton } from './'; +import { Add } from '@carbon/icons-react'; +import './chat-button-story.scss'; export default { title: 'Experimental/unstable__ChatButton', @@ -50,16 +52,57 @@ export default { export const Default = () => (
- {' '} - Test - Test - Test +

Sizes

+
+ + Primary + + + Primary + + + Primary +
- Test - Test - Test - Test +

Kinds

+
+ + Primary + + + Secondary + + + Tertiary + + + Ghost + + + Danger + +
+
+

Quick action

+
+ + Quick action + + + Quick action + + + Quick action + +
+ +
+

Skeleton

+
+ + +
); diff --git a/packages/react/src/components/ChatButton/chat-button-story.scss b/packages/react/src/components/ChatButton/chat-button-story.scss new file mode 100644 index 000000000000..390e52faf6e7 --- /dev/null +++ b/packages/react/src/components/ChatButton/chat-button-story.scss @@ -0,0 +1,7 @@ +div[class*='test-button-'] { + margin-bottom: 4rem; + + & > * { + margin-right: 2rem; + } +} diff --git a/packages/react/src/components/ChatButton/index.js b/packages/react/src/components/ChatButton/index.js index 2b7565efa2b4..9dfac91ff41b 100644 --- a/packages/react/src/components/ChatButton/index.js +++ b/packages/react/src/components/ChatButton/index.js @@ -9,3 +9,4 @@ import ChatButton from './ChatButton'; export default ChatButton; export { ChatButton }; +export { default as ChatButtonSkeleton } from './ChatButton.Skeleton'; diff --git a/packages/styles/files.js b/packages/styles/files.js index b3e6537c806b..6bb799fec74c 100644 --- a/packages/styles/files.js +++ b/packages/styles/files.js @@ -44,6 +44,8 @@ const files = [ 'scss/components/button/_button.scss', 'scss/components/button/_index.scss', 'scss/components/button/_tokens.scss', + 'scss/components/chat-button/_chat-button.scss', + 'scss/components/chat-button/_index.scss', 'scss/components/checkbox/_checkbox.scss', 'scss/components/checkbox/_index.scss', 'scss/components/code-snippet/_code-snippet.scss', diff --git a/packages/styles/scss/components/_index.scss b/packages/styles/scss/components/_index.scss index 9d5f88bb42db..7119485e72c1 100644 --- a/packages/styles/scss/components/_index.scss +++ b/packages/styles/scss/components/_index.scss @@ -9,6 +9,7 @@ @use 'aspect-ratio'; @use 'breadcrumb'; @use 'button'; +@use 'chat-button'; @use 'checkbox'; @use 'code-snippet'; @use 'combo-box'; diff --git a/packages/styles/scss/components/chat-button/_chat-button.scss b/packages/styles/scss/components/chat-button/_chat-button.scss new file mode 100644 index 000000000000..76533ba1401c --- /dev/null +++ b/packages/styles/scss/components/chat-button/_chat-button.scss @@ -0,0 +1,62 @@ +// +// Copyright IBM Corp. 2016, 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. +// + +@use '../button'; +@use '../../config' as *; +// @use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +// @use '../../utilities/component-reset'; +@use '../../utilities/convert'; +// @use '../../utilities/skeleton' as *; +// @use '../../utilities/visually-hidden' as *; + +@mixin chat-button { + .#{$prefix}--chat-btn { + border-radius: convert.to-rem(24px); + } + + .#{$prefix}--chat-btn.#{$prefix}--btn--md { + border-radius: convert.to-rem(20px); + } + + .#{$prefix}--chat-btn.#{$prefix}--btn--sm { + border-radius: convert.to-rem(16px); + } + + // Quick action button + .#{$prefix}--chat-btn--quick-action { + border: 1px solid $link-primary; + } + + .#{$prefix}--chat-btn--quick-action:hover:not(:active):not([disabled]) { + border-color: transparent; + background: $background-hover; + } + + .#{$prefix}--chat-btn--quick-action.#{$prefix}--btn--ghost:focus, + .#{$prefix}--chat-btn--quick-action.#{$prefix}--btn--ghost:hover:focus { + border-color: $focus; + box-shadow: inset 0 0 0 1px $focus; + } + + .#{$prefix}--chat-btn--quick-action[disabled], + .#{$prefix}--chat-btn--quick-action[disabled]:hover { + border-color: button.$button-disabled; + color: button.$button-disabled; + } + + .#{$prefix}--chat-btn--quick-action--selected[disabled], + .#{$prefix}--chat-btn--quick-action--selected[disabled]:hover { + background: button.$button-disabled; + color: $text-on-color-disabled; + } + + .#{$prefix}--chat-btn.#{$prefix}--skeleton { + overflow: hidden; + } +} diff --git a/packages/styles/scss/components/chat-button/_index.scss b/packages/styles/scss/components/chat-button/_index.scss new file mode 100644 index 000000000000..e51b0e637392 --- /dev/null +++ b/packages/styles/scss/components/chat-button/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 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. +// + +@forward 'chat-button'; +@use 'chat-button'; + +@include chat-button.chat-button; From 7e3f555ab2cc9fcaf87c1c81abde2e692c31a828 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Thu, 1 Feb 2024 13:23:50 -0500 Subject: [PATCH 04/10] test(ChatButton): fix lint errors, update snapshots --- .../components/chat-button/_chat-button.scss | 9 +++++++ .../scss/components/chat-button/_index.scss | 9 +++++++ .../components/chat-button/_chat-button.scss | 9 +++++++ .../scss/components/chat-button/_index.scss | 9 +++++++ .../components/chat-button/_chat-button.scss | 9 +++++++ .../scss/components/chat-button/_index.scss | 9 +++++++ .../ChatButton/ChatButton.Skeleton.js | 5 ++++ .../src/components/ChatButton/ChatButton.js | 27 ++++++++++++++++++- .../__snapshots__/styles-test.js.snap | 10 +++++++ 9 files changed, 95 insertions(+), 1 deletion(-) create mode 100644 packages/carbon-components-react/scss/components/chat-button/_chat-button.scss create mode 100644 packages/carbon-components-react/scss/components/chat-button/_index.scss create mode 100644 packages/carbon-components/scss/components/chat-button/_chat-button.scss create mode 100644 packages/carbon-components/scss/components/chat-button/_index.scss create mode 100644 packages/react/scss/components/chat-button/_chat-button.scss create mode 100644 packages/react/scss/components/chat-button/_index.scss diff --git a/packages/carbon-components-react/scss/components/chat-button/_chat-button.scss b/packages/carbon-components-react/scss/components/chat-button/_chat-button.scss new file mode 100644 index 000000000000..6486d7f955a4 --- /dev/null +++ b/packages/carbon-components-react/scss/components/chat-button/_chat-button.scss @@ -0,0 +1,9 @@ +// Code generated by carbon-components-react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2023 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/chat-button/chat-button'; diff --git a/packages/carbon-components-react/scss/components/chat-button/_index.scss b/packages/carbon-components-react/scss/components/chat-button/_index.scss new file mode 100644 index 000000000000..2a93f58c0602 --- /dev/null +++ b/packages/carbon-components-react/scss/components/chat-button/_index.scss @@ -0,0 +1,9 @@ +// Code generated by carbon-components-react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2023 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/chat-button'; diff --git a/packages/carbon-components/scss/components/chat-button/_chat-button.scss b/packages/carbon-components/scss/components/chat-button/_chat-button.scss new file mode 100644 index 000000000000..3356ea2e1480 --- /dev/null +++ b/packages/carbon-components/scss/components/chat-button/_chat-button.scss @@ -0,0 +1,9 @@ +// Code generated by carbon-components. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2023 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/chat-button/chat-button'; diff --git a/packages/carbon-components/scss/components/chat-button/_index.scss b/packages/carbon-components/scss/components/chat-button/_index.scss new file mode 100644 index 000000000000..1c2ed0de5cdd --- /dev/null +++ b/packages/carbon-components/scss/components/chat-button/_index.scss @@ -0,0 +1,9 @@ +// Code generated by carbon-components. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2023 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/chat-button'; diff --git a/packages/react/scss/components/chat-button/_chat-button.scss b/packages/react/scss/components/chat-button/_chat-button.scss new file mode 100644 index 000000000000..c4bc30c2d3cb --- /dev/null +++ b/packages/react/scss/components/chat-button/_chat-button.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2023 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/chat-button/chat-button'; diff --git a/packages/react/scss/components/chat-button/_index.scss b/packages/react/scss/components/chat-button/_index.scss new file mode 100644 index 000000000000..8756e252b492 --- /dev/null +++ b/packages/react/scss/components/chat-button/_index.scss @@ -0,0 +1,9 @@ +// Code generated by @carbon/react. DO NOT EDIT. +// +// Copyright IBM Corp. 2018, 2023 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/styles/scss/components/chat-button'; diff --git a/packages/react/src/components/ChatButton/ChatButton.Skeleton.js b/packages/react/src/components/ChatButton/ChatButton.Skeleton.js index de0a7030d430..8056365c7f4d 100644 --- a/packages/react/src/components/ChatButton/ChatButton.Skeleton.js +++ b/packages/react/src/components/ChatButton/ChatButton.Skeleton.js @@ -28,6 +28,11 @@ ChatButtonSkeleton.propTypes = { * Specify an optional className to add. */ className: PropTypes.string, + + /** + * Specify the size of the `ChatButtonSkeleton`, from the following list of sizes: + */ + size: PropTypes.oneOf(['sm', 'md', 'lg']), }; export default ChatButtonSkeleton; diff --git a/packages/react/src/components/ChatButton/ChatButton.js b/packages/react/src/components/ChatButton/ChatButton.js index f5558bd7f433..fba3a762fdeb 100644 --- a/packages/react/src/components/ChatButton/ChatButton.js +++ b/packages/react/src/components/ChatButton/ChatButton.js @@ -18,8 +18,8 @@ const ChatButton = React.forwardRef(function ChatButton( disabled, isQuickAction, isSelected, - size, kind, + size, ...other }, ref @@ -64,6 +64,31 @@ ChatButton.propTypes = { * 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'), + + /** + * Specify the size of the `ChatButton`, from the following list of sizes: + */ + size: PropTypes.oneOf(['sm', 'md', 'lg']), }; export default ChatButton; diff --git a/packages/styles/__tests__/__snapshots__/styles-test.js.snap b/packages/styles/__tests__/__snapshots__/styles-test.js.snap index 1218321f1810..6dd6b5054b11 100644 --- a/packages/styles/__tests__/__snapshots__/styles-test.js.snap +++ b/packages/styles/__tests__/__snapshots__/styles-test.js.snap @@ -127,6 +127,16 @@ Array [ "importPath": "@carbon/styles/scss/components/button/tokens", "relativePath": "scss/components/button/tokens", }, + Object { + "filepath": "scss/components/chat-button/_chat-button.scss", + "importPath": "@carbon/styles/scss/components/chat-button/chat-button", + "relativePath": "scss/components/chat-button/chat-button", + }, + Object { + "filepath": "scss/components/chat-button/_index.scss", + "importPath": "@carbon/styles/scss/components/chat-button", + "relativePath": "scss/components/chat-button", + }, Object { "filepath": "scss/components/checkbox/_checkbox.scss", "importPath": "@carbon/styles/scss/components/checkbox/checkbox", From 8f678eb856d9db4ffe1f11056354c7b603d3e264 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Fri, 2 Feb 2024 10:03:38 -0500 Subject: [PATCH 05/10] test(ChatButton): add e2e, avt tests --- .../ChatButton/ChatButton-test.avt.e2e.js | 24 +++++++++++++++++ .../ChatButton/ChatButton-test.e2e.js | 26 +++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 e2e/components/ChatButton/ChatButton-test.avt.e2e.js create mode 100644 e2e/components/ChatButton/ChatButton-test.e2e.js diff --git a/e2e/components/ChatButton/ChatButton-test.avt.e2e.js b/e2e/components/ChatButton/ChatButton-test.avt.e2e.js new file mode 100644 index 000000000000..64f3728006dd --- /dev/null +++ b/e2e/components/ChatButton/ChatButton-test.avt.e2e.js @@ -0,0 +1,24 @@ +/** + * Copyright IBM Corp. 2016, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict'; + +const { expect, test } = require('@playwright/test'); +const { visitStory } = require('../../test-utils/storybook'); + +test.describe('ChatButton @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'Button', + id: 'experimental-unstable-chatbutton--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('ChatButton'); + }); +}); diff --git a/e2e/components/ChatButton/ChatButton-test.e2e.js b/e2e/components/ChatButton/ChatButton-test.e2e.js new file mode 100644 index 000000000000..506689a09c21 --- /dev/null +++ b/e2e/components/ChatButton/ChatButton-test.e2e.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2016, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict'; + +const { test } = require('@playwright/test'); +const { themes } = require('../../test-utils/env'); +const { snapshotStory } = require('../../test-utils/storybook'); + +test.describe('ChatButton', () => { + themes.forEach((theme) => { + test.describe(theme, () => { + test('default @vrt', async ({ page }) => { + await snapshotStory(page, { + component: 'ChatButton', + id: 'experimental-unstable-chatbutton--default', + theme, + }); + }); + }); + }); +}); From d1a668d316fa81d95686077a8a14e116c4647ed5 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Fri, 2 Feb 2024 11:47:42 -0500 Subject: [PATCH 06/10] chore(test): update snapshots, add exports --- .../__snapshots__/PublicAPI-test.js.snap | 60 +++++++++++++++++++ packages/react/src/__tests__/index-test.js | 2 + .../src/components/ChatButton/ChatButton.js | 8 ++- packages/react/src/index.js | 4 ++ packages/react/src/index.ts | 4 ++ .../components/chat-button/_chat-button.scss | 4 -- 6 files changed, 77 insertions(+), 5 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 99a46bc5b36a..492379b4f38b 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -9629,6 +9629,66 @@ Map { }, }, }, + "unstable__ChatButton" => Object { + "$$typeof": Symbol(react.forward_ref), + "propTypes": Object { + "children": Object { + "type": "node", + }, + "className": Object { + "type": "string", + }, + "disabled": Object { + "type": "bool", + }, + "isQuickAction": Object { + "type": "bool", + }, + "isSelected": Object { + "type": "bool", + }, + "kind": Object { + "args": Array [ + Array [ + "primary", + "secondary", + "danger", + "ghost", + "tertiary", + ], + ], + "type": "oneOf", + }, + "size": Object { + "args": Array [ + Array [ + "sm", + "md", + "lg", + ], + ], + "type": "oneOf", + }, + }, + "render": [Function], + }, + "unstable__ChatButtonSkeleton" => Object { + "propTypes": Object { + "className": Object { + "type": "string", + }, + "size": Object { + "args": Array [ + Array [ + "sm", + "md", + "lg", + ], + ], + "type": "oneOf", + }, + }, + }, "unstable__FluidComboBox" => Object { "$$typeof": Symbol(react.forward_ref), "propTypes": Object { diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js index 78eacda17385..ed98b59d6b0c 100644 --- a/packages/react/src/__tests__/index-test.js +++ b/packages/react/src/__tests__/index-test.js @@ -246,6 +246,8 @@ describe('Carbon Components React', () => { "unstable_Pagination", "unstable_Text", "unstable_TextDirection", + "unstable__ChatButton", + "unstable__ChatButtonSkeleton", "unstable__FluidComboBox", "unstable__FluidComboBoxSkeleton", "unstable__FluidDatePicker", diff --git a/packages/react/src/components/ChatButton/ChatButton.js b/packages/react/src/components/ChatButton/ChatButton.js index fba3a762fdeb..ce7afbbfbe58 100644 --- a/packages/react/src/components/ChatButton/ChatButton.js +++ b/packages/react/src/components/ChatButton/ChatButton.js @@ -83,7 +83,13 @@ ChatButton.propTypes = { /** * Specify the kind of `ChatButton` you want to create */ - kind: PropTypes.oneOf('primary', 'secondary', 'danger', 'ghost', 'tertiary'), + kind: PropTypes.oneOf([ + 'primary', + 'secondary', + 'danger', + 'ghost', + 'tertiary', + ]), /** * Specify the size of the `ChatButton`, from the following list of sizes: diff --git a/packages/react/src/index.js b/packages/react/src/index.js index 260ae1d2de82..6b406ef37cc9 100644 --- a/packages/react/src/index.js +++ b/packages/react/src/index.js @@ -304,3 +304,7 @@ export { SlugContent as unstable__SlugContent, SlugActions as unstable__SlugActions, } from './components/Slug'; +export { + ChatButton as unstable__ChatButton, + ChatButtonSkeleton as unstable__ChatButtonSkeleton, +} from './components/ChatButton'; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index d7d6d1094655..20ad3504b494 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -157,6 +157,10 @@ export { SlugContent as unstable__SlugContent, SlugActions as unstable__SlugActions, } from './components/Slug'; +export { + ChatButton as unstable__ChatButton, + ChatButtonSkeleton as unstable__ChatButtonSkeleton, +} from './components/ChatButton'; export * from './components/Stack'; export * from './components/Tooltip'; export { diff --git a/packages/styles/scss/components/chat-button/_chat-button.scss b/packages/styles/scss/components/chat-button/_chat-button.scss index 76533ba1401c..2ea2a72ff5dc 100644 --- a/packages/styles/scss/components/chat-button/_chat-button.scss +++ b/packages/styles/scss/components/chat-button/_chat-button.scss @@ -7,13 +7,9 @@ @use '../button'; @use '../../config' as *; -// @use '../../spacing' as *; @use '../../theme' as *; @use '../../type' as *; -// @use '../../utilities/component-reset'; @use '../../utilities/convert'; -// @use '../../utilities/skeleton' as *; -// @use '../../utilities/visually-hidden' as *; @mixin chat-button { .#{$prefix}--chat-btn { From a62b67461448dcbb56f8e883779dc8f2f6b2404e Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Fri, 2 Feb 2024 12:10:17 -0500 Subject: [PATCH 07/10] style(ChatButton): fix icon misalignment --- packages/styles/scss/components/chat-button/_chat-button.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/styles/scss/components/chat-button/_chat-button.scss b/packages/styles/scss/components/chat-button/_chat-button.scss index 2ea2a72ff5dc..88011de488fa 100644 --- a/packages/styles/scss/components/chat-button/_chat-button.scss +++ b/packages/styles/scss/components/chat-button/_chat-button.scss @@ -26,6 +26,7 @@ // Quick action button .#{$prefix}--chat-btn--quick-action { + align-items: center; border: 1px solid $link-primary; } From a76d783a481d1bdc35e3068db7ddce82140d54e3 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Mon, 5 Feb 2024 10:57:35 -0500 Subject: [PATCH 08/10] fix(ChatButton): add in selected but not disabled state --- .../src/components/ChatButton/ChatButton.js | 2 +- .../ChatButton/ChatButton.stories.js | 7 +++++-- .../components/chat-button/_chat-button.scss | 20 +++++++++++++++++-- 3 files changed, 24 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/ChatButton/ChatButton.js b/packages/react/src/components/ChatButton/ChatButton.js index ce7afbbfbe58..6f181e854ecb 100644 --- a/packages/react/src/components/ChatButton/ChatButton.js +++ b/packages/react/src/components/ChatButton/ChatButton.js @@ -43,7 +43,7 @@ const ChatButton = React.forwardRef(function ChatButton( return (
diff --git a/packages/styles/scss/components/chat-button/_chat-button.scss b/packages/styles/scss/components/chat-button/_chat-button.scss index 88011de488fa..8afeb10d2895 100644 --- a/packages/styles/scss/components/chat-button/_chat-button.scss +++ b/packages/styles/scss/components/chat-button/_chat-button.scss @@ -14,6 +14,7 @@ @mixin chat-button { .#{$prefix}--chat-btn { border-radius: convert.to-rem(24px); + // transition: box-shadow 1s; } .#{$prefix}--chat-btn.#{$prefix}--btn--md { @@ -35,18 +36,33 @@ background: $background-hover; } - .#{$prefix}--chat-btn--quick-action.#{$prefix}--btn--ghost:focus, - .#{$prefix}--chat-btn--quick-action.#{$prefix}--btn--ghost:hover:focus { + .#{$prefix}--chat-btn--quick-action.#{$prefix}--btn--ghost:focus { border-color: $focus; box-shadow: inset 0 0 0 1px $focus; } + .#{$prefix}--chat-btn--quick-action.#{$prefix}--btn--ghost:hover:focus { + border-color: $focus; + box-shadow: inset 0 0 0 1px $focus-inset; + } + .#{$prefix}--chat-btn--quick-action[disabled], .#{$prefix}--chat-btn--quick-action[disabled]:hover { border-color: button.$button-disabled; color: button.$button-disabled; } + .#{$prefix}--chat-btn--quick-action--selected { + border-color: transparent; + background: $background-selected; + color: $text-secondary; + } + + .#{$prefix}--chat-btn--quick-action--selected:hover { + color: $text-secondary; + cursor: default; + } + .#{$prefix}--chat-btn--quick-action--selected[disabled], .#{$prefix}--chat-btn--quick-action--selected[disabled]:hover { background: button.$button-disabled; From ce0866412aa2522639f6def2590e7c44505c9214 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 6 Feb 2024 10:56:20 -0500 Subject: [PATCH 09/10] fix(ChatButton): adjust disabled and selected styles --- .../src/components/ChatButton/ChatButton.stories.js | 8 ++++---- .../scss/components/chat-button/_chat-button.scss | 11 +++-------- 2 files changed, 7 insertions(+), 12 deletions(-) diff --git a/packages/react/src/components/ChatButton/ChatButton.stories.js b/packages/react/src/components/ChatButton/ChatButton.stories.js index 859cac3043da..8f2d940cb18d 100644 --- a/packages/react/src/components/ChatButton/ChatButton.stories.js +++ b/packages/react/src/components/ChatButton/ChatButton.stories.js @@ -89,15 +89,15 @@ export const Default = () => ( Quick action - - Disabled - - Selected + Selected and Enabled Selected and Disabled + + Disabled +
diff --git a/packages/styles/scss/components/chat-button/_chat-button.scss b/packages/styles/scss/components/chat-button/_chat-button.scss index 8afeb10d2895..d8aab5acd75e 100644 --- a/packages/styles/scss/components/chat-button/_chat-button.scss +++ b/packages/styles/scss/components/chat-button/_chat-button.scss @@ -52,7 +52,9 @@ color: button.$button-disabled; } - .#{$prefix}--chat-btn--quick-action--selected { + .#{$prefix}--chat-btn--quick-action--selected, + .#{$prefix}--chat-btn--quick-action--selected[disabled], + .#{$prefix}--chat-btn--quick-action--selected[disabled]:hover { border-color: transparent; background: $background-selected; color: $text-secondary; @@ -60,13 +62,6 @@ .#{$prefix}--chat-btn--quick-action--selected:hover { color: $text-secondary; - cursor: default; - } - - .#{$prefix}--chat-btn--quick-action--selected[disabled], - .#{$prefix}--chat-btn--quick-action--selected[disabled]:hover { - background: button.$button-disabled; - color: $text-on-color-disabled; } .#{$prefix}--chat-btn.#{$prefix}--skeleton { From 782a26bc75506ea0f7c87f244701c8ecf4b7b49c Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 6 Feb 2024 14:43:17 -0500 Subject: [PATCH 10/10] Update packages/styles/scss/components/chat-button/_chat-button.scss Co-authored-by: Alison Joseph --- packages/styles/scss/components/chat-button/_chat-button.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/styles/scss/components/chat-button/_chat-button.scss b/packages/styles/scss/components/chat-button/_chat-button.scss index d8aab5acd75e..29395c0ea7be 100644 --- a/packages/styles/scss/components/chat-button/_chat-button.scss +++ b/packages/styles/scss/components/chat-button/_chat-button.scss @@ -14,7 +14,6 @@ @mixin chat-button { .#{$prefix}--chat-btn { border-radius: convert.to-rem(24px); - // transition: box-shadow 1s; } .#{$prefix}--chat-btn.#{$prefix}--btn--md {