From 3f338ce065633cc405199edd095d22e0369eb4f0 Mon Sep 17 00:00:00 2001 From: kennylam <909118+kennylam@users.noreply.github.com> Date: Tue, 3 Sep 2024 11:39:09 -0400 Subject: [PATCH 1/5] chore(actions): update image path in dev office hours slack block (#17306) --- .github/workflows/slack-office-hours-dev.yml | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/.github/workflows/slack-office-hours-dev.yml b/.github/workflows/slack-office-hours-dev.yml index 8ccb137db02a..e58ff9fbf766 100644 --- a/.github/workflows/slack-office-hours-dev.yml +++ b/.github/workflows/slack-office-hours-dev.yml @@ -34,7 +34,7 @@ jobs: }, { "type": "image", - "image_url": "https://carbondesignsystem.com/static/406b7e7bf6865c094dd9a7a0bcb8bd41/3cbba/light-getting-started-developers.png", + "image_url": "https://github.com/user-attachments/assets/e12fb5b9-9657-4e7b-b1a1-e1149cca8956", "alt_text": "A terminal prompt symbol" }, { @@ -127,7 +127,7 @@ jobs: }, { "type": "image", - "image_url": "https://carbondesignsystem.com/static/406b7e7bf6865c094dd9a7a0bcb8bd41/3cbba/light-getting-started-developers.png", + "image_url": "https://github.com/user-attachments/assets/e12fb5b9-9657-4e7b-b1a1-e1149cca8956", "alt_text": "A terminal prompt symbol" }, { @@ -191,4 +191,3 @@ jobs: env: SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK - From 87eeed18ea32be4bbc6226a8f29ac51cbe7185e7 Mon Sep 17 00:00:00 2001 From: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com> Date: Tue, 3 Sep 2024 22:58:28 +0530 Subject: [PATCH 2/5] fix(typescript): adds TypeScript types to ChatButton & Skeleton (#17316) * fix(17291): rename .js to .tsx for preserve file history * fix(typescript): adds TypeScript types to ChatButto & Skeleton --- ...on.Skeleton.js => ChatButton.Skeleton.tsx} | 19 ++- .../src/components/ChatButton/ChatButton.js | 109 ------------ .../src/components/ChatButton/ChatButton.tsx | 157 ++++++++++++++++++ .../ChatButton/{index.js => index.tsx} | 6 +- 4 files changed, 177 insertions(+), 114 deletions(-) rename packages/react/src/components/ChatButton/{ChatButton.Skeleton.js => ChatButton.Skeleton.tsx} (69%) delete mode 100644 packages/react/src/components/ChatButton/ChatButton.js create mode 100644 packages/react/src/components/ChatButton/ChatButton.tsx rename packages/react/src/components/ChatButton/{index.js => index.tsx} (55%) diff --git a/packages/react/src/components/ChatButton/ChatButton.Skeleton.js b/packages/react/src/components/ChatButton/ChatButton.Skeleton.tsx similarity index 69% rename from packages/react/src/components/ChatButton/ChatButton.Skeleton.js rename to packages/react/src/components/ChatButton/ChatButton.Skeleton.tsx index 8056365c7f4d..5e7a09d63da0 100644 --- a/packages/react/src/components/ChatButton/ChatButton.Skeleton.js +++ b/packages/react/src/components/ChatButton/ChatButton.Skeleton.tsx @@ -1,5 +1,5 @@ /** - * 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. @@ -9,8 +9,21 @@ import PropTypes from 'prop-types'; import React from 'react'; import cx from 'classnames'; import { usePrefix } from '../../internal/usePrefix'; - -const ChatButtonSkeleton = ({ className, size, ...rest }) => { +export interface ChatButtonSkeletonProps { + /** + * Specify an optional className to add. + */ + className?: string; + /** + * Specify the size of the `ChatButtonSkeleton`, from the following list of sizes: + */ + size?: 'sm' | 'md' | 'lg'; +} +const ChatButtonSkeleton = ({ + className, + size, + ...rest +}: ChatButtonSkeletonProps) => { const prefix = usePrefix(); const skeletonClasses = cx( className, diff --git a/packages/react/src/components/ChatButton/ChatButton.js b/packages/react/src/components/ChatButton/ChatButton.js deleted file mode 100644 index 6448fd2fa67d..000000000000 --- a/packages/react/src/components/ChatButton/ChatButton.js +++ /dev/null @@ -1,109 +0,0 @@ -/** - * 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, - disabled, - isQuickAction, - isSelected, - kind, - renderIcon, - size, - ...other - }, - 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 = ['sm', 'md', 'lg']; - - if (isQuickAction) { - kind = 'ghost'; - size = 'sm'; - } else { - // Do not allow size larger than `lg` - size = allowedSizes.includes(size) ? size : 'lg'; - } - - 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, - - /** - * 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 - */ - 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; diff --git a/packages/react/src/components/ChatButton/ChatButton.tsx b/packages/react/src/components/ChatButton/ChatButton.tsx new file mode 100644 index 000000000000..304ff322365c --- /dev/null +++ b/packages/react/src/components/ChatButton/ChatButton.tsx @@ -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 { + /** + * 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( + 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 ( + + ); + } +); + +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; diff --git a/packages/react/src/components/ChatButton/index.js b/packages/react/src/components/ChatButton/index.tsx similarity index 55% rename from packages/react/src/components/ChatButton/index.js rename to packages/react/src/components/ChatButton/index.tsx index 9dfac91ff41b..4fab393a8433 100644 --- a/packages/react/src/components/ChatButton/index.js +++ b/packages/react/src/components/ChatButton/index.tsx @@ -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'; From a67a647a49a3315479e454c5c1df23c3bceea536 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 13:17:37 -0500 Subject: [PATCH 3/5] chore(deps): bump github/codeql-action from 3.26.5 to 3.26.6 (#17313) Bumps [github/codeql-action](https://github.com/github/codeql-action) from 3.26.5 to 3.26.6. - [Release notes](https://github.com/github/codeql-action/releases) - [Changelog](https://github.com/github/codeql-action/blob/main/CHANGELOG.md) - [Commits](https://github.com/github/codeql-action/compare/2c779ab0d087cd7fe7b826087247c2c81f27bfa6...4dd16135b69a43b6c8efb853346f8437d92d3c93) --- updated-dependencies: - dependency-name: github/codeql-action dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- .github/workflows/codeql-analysis.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index 3486dd59f21c..24f8ee8811c8 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -24,9 +24,9 @@ jobs: # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL - uses: github/codeql-action/init@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5 + uses: github/codeql-action/init@4dd16135b69a43b6c8efb853346f8437d92d3c93 # v3.26.6 with: languages: javascript - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5 + uses: github/codeql-action/analyze@4dd16135b69a43b6c8efb853346f8437d92d3c93 # v3.26.6 From ef5aa5712b9c0157a75b7b0eae8a4971e487a8ac Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 14:32:05 -0400 Subject: [PATCH 4/5] chore(deps): update github/codeql-action action to v3.26.6 (#17302) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com> From 3fcf7393910ef305aa53526e4acdf919184acbc3 Mon Sep 17 00:00:00 2001 From: Lee Chase Date: Tue, 3 Sep 2024 19:39:49 +0100 Subject: [PATCH 5/5] feat: allow grid offset and start reset (#16479) * feat: allow grid offset and start reset * chore(storybook): remove unneeded example stories --------- Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com> Co-authored-by: Alison Joseph --- packages/react/src/components/Grid/Column.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/Grid/Column.tsx b/packages/react/src/components/Grid/Column.tsx index b4219696ab0b..cb635977585b 100644 --- a/packages/react/src/components/Grid/Column.tsx +++ b/packages/react/src/components/Grid/Column.tsx @@ -385,12 +385,16 @@ function getClassNameForBreakpoints( if (typeof breakpoint === 'object') { const { span, offset, start, end } = breakpoint; - if (typeof offset === 'number' && offset > 0) { - classNames.push(`${prefix}--${name}:col-start-${offset + 1}`); + if (typeof offset === 'number') { + classNames.push( + `${prefix}--${name}:col-start-${offset > 0 ? offset + 1 : 'auto'}` + ); } if (typeof start === 'number') { - classNames.push(`${prefix}--${name}:col-start-${start}`); + classNames.push( + `${prefix}--${name}:col-start-${start ? start : 'auto'}` + ); } if (typeof end === 'number') {