(
danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus
)
: null;
@@ -201,9 +374,9 @@ const Modal = React.forwardRef(function Modal(
return button && button.current;
};
- const focusButton = (focusContainerElement) => {
+ const focusButton = (focusContainerElement: HTMLElement | null) => {
const target = initialFocus(focusContainerElement);
- if (target) {
+ if (target !== null) {
target.focus();
}
};
@@ -238,7 +411,7 @@ const Modal = React.forwardRef(function Modal(
className={containerClasses}
aria-label={ariaLabel}
aria-modal="true"
- tabIndex="-1">
+ tabIndex={-1}>
{passiveModal && modalButton}
{modalLabel && (
@@ -311,7 +484,7 @@ const Modal = React.forwardRef(function Modal(
{/* Non-translatable: Focus-wrap code makes this `` not actually read by screen readers */}
Focus sentinel
@@ -320,7 +493,7 @@ const Modal = React.forwardRef(function Modal(
{/* Non-translatable: Focus-wrap code makes this `` not actually read by screen readers */}
Focus sentinel
@@ -503,7 +676,7 @@ Modal.propTypes = {
* Specify CSS selectors that match DOM elements working as floating menus.
* Focusing on those elements won't trigger "focus-wrap" behavior
*/
- selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
+ selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string.isRequired),
/**
* Specify if Enter key should be used as "submit" action
@@ -513,7 +686,7 @@ Modal.propTypes = {
/**
* Specify the size variant.
*/
- size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+ size: PropTypes.oneOf(ModalSizes),
};
export default Modal;
diff --git a/packages/react/src/components/Modal/index.js b/packages/react/src/components/Modal/index.ts
similarity index 100%
rename from packages/react/src/components/Modal/index.js
rename to packages/react/src/components/Modal/index.ts
diff --git a/packages/react/src/components/Popover/Popover.stories.js b/packages/react/src/components/Popover/Popover.stories.js
index 3ec5e7547537..3575ed19a0be 100644
--- a/packages/react/src/components/Popover/Popover.stories.js
+++ b/packages/react/src/components/Popover/Popover.stories.js
@@ -69,7 +69,7 @@ const PlaygroundStory = (props) => {
- Available storage
+ Available storage
This server has 150 GB of block storage remaining.
@@ -246,7 +246,7 @@ export const AutoAlign = () => {
/>
- Available storage
+ Available storage
This server has 150 GB of block storage remaining.
@@ -258,7 +258,7 @@ export const AutoAlign = () => {
- Available storage
+ Available storage
This server has 150 GB of block storage remaining.
@@ -277,7 +277,7 @@ export const AutoAlign = () => {
- Available storage
+ Available storage
This server has 350 GB of block storage remaining.
@@ -297,7 +297,7 @@ export const AutoAlign = () => {
- Available storage
+ Available storage
This server has 150 GB of block storage remaining.
@@ -317,7 +317,7 @@ export const AutoAlign = () => {
- Available storage
+ Available storage
This server has 150 GB of block storage remaining.
diff --git a/packages/react/src/components/Slug/Slug.js b/packages/react/src/components/Slug/Slug.js
new file mode 100644
index 000000000000..f2ebf4ac5a30
--- /dev/null
+++ b/packages/react/src/components/Slug/Slug.js
@@ -0,0 +1,136 @@
+/**
+ * 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.
+ */
+
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { usePrefix } from '../../internal/usePrefix';
+import {
+ Toggletip,
+ ToggletipButton,
+ ToggletipContent,
+ ToggletipActions,
+} from '../Toggletip';
+
+const Slug = React.forwardRef(function Slug(
+ {
+ aiText = 'AI',
+ aiTextLabel,
+ align,
+ autoAlign = false,
+ className,
+ dotType,
+ kind,
+ size = 'xs',
+ slugContent,
+ },
+ ref
+) {
+ const prefix = usePrefix();
+
+ const slugClasses = cx(className, {
+ [`${prefix}--slug`]: true,
+ [`${prefix}--slug--hollow`]: kind === 'hollow' || dotType === 'hollow',
+ // Need to come up with a better name; explainable?
+ // Need to be able to target the non-hollow variant another way
+ // other than using `:not` all over the styles
+ [`${prefix}--slug--enabled`]: kind !== 'hollow' && dotType !== 'hollow',
+ });
+
+ const slugButtonClasses = cx({
+ [`${prefix}--slug__button`]: true,
+ [`${prefix}--slug__button--${size}`]: size,
+ [`${prefix}--slug__button--${kind}`]: kind,
+ [`${prefix}--slug__button--inline-with-content`]:
+ kind === 'inline' && aiTextLabel,
+ });
+
+ return (
+
+
+
+ {aiText}
+ {aiTextLabel && (
+
+ {aiTextLabel}
+
+ )}
+
+
+ {slugContent}
+
+
+
+ );
+});
+
+Slug.propTypes = {
+ /**
+ * Specify the correct translation of the AI text
+ */
+ aiText: PropTypes.string,
+
+ /**
+ * Specify additional text to be rendered next to the AI label in the inline variant
+ */
+ aiTextLabel: PropTypes.string,
+
+ /**
+ * Specify how the popover should align with the button
+ */
+ align: PropTypes.oneOf([
+ 'top',
+ 'top-left',
+ 'top-right',
+
+ 'bottom',
+ 'bottom-left',
+ 'bottom-right',
+
+ 'left',
+ 'left-bottom',
+ 'left-top',
+
+ 'right',
+ 'right-bottom',
+ 'right-top',
+ ]),
+
+ /**
+ * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+ */
+ autoAlign: PropTypes.bool,
+
+ /**
+ * Specify an optional className to be added to the AI slug
+ */
+ className: PropTypes.string,
+
+ /**
+ * Specify the type of dot that should be rendered in front of the inline variant
+ */
+ dotType: PropTypes.oneOf(['default', 'hollow']),
+
+ /**
+ * Specify the type of Slug, from the following list of types:
+ */
+ kind: PropTypes.oneOf(['default', 'hollow', 'inline']),
+
+ /**
+ * Specify the size of the button, from the following list of sizes:
+ */
+ size: PropTypes.oneOf(['mini', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']),
+
+ /**
+ * Specify the content you want rendered inside the slug ToggleTip
+ */
+ slugContent: PropTypes.node,
+};
+
+export default Slug;
diff --git a/packages/react/src/components/Slug/Slug.mdx b/packages/react/src/components/Slug/Slug.mdx
new file mode 100644
index 000000000000..e965047ad7c5
--- /dev/null
+++ b/packages/react/src/components/Slug/Slug.mdx
@@ -0,0 +1 @@
+Hello
diff --git a/packages/react/src/components/Slug/Slug.stories.js b/packages/react/src/components/Slug/Slug.stories.js
new file mode 100644
index 000000000000..5c2c7c4722b4
--- /dev/null
+++ b/packages/react/src/components/Slug/Slug.stories.js
@@ -0,0 +1,148 @@
+/**
+ * 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.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+
+import Slug from '.';
+import Button from '../Button';
+import mdx from './Slug.mdx';
+import './slug-story.scss';
+
+export default {
+ title: 'Experimental/unstable__Slug',
+ component: Slug,
+ parameters: {
+ docs: {
+ page: mdx,
+ },
+ },
+};
+
+const aiContent = (
+
+
AI Explained
+
84%
+
Confidence score
+
+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+
+
+
Model type
+
Foundation model
+
AI was used to generate this content ;
+
+export const Default = () => (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export const Playground = (args) => (
+ <>
+
+
+ Test
+ Test
+
+);
diff --git a/packages/react/src/components/Slug/index.js b/packages/react/src/components/Slug/index.js
new file mode 100644
index 000000000000..b93fe751c330
--- /dev/null
+++ b/packages/react/src/components/Slug/index.js
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+import Slug from './Slug';
+
+export default Slug;
+export { Slug };
diff --git a/packages/react/src/components/Slug/slug-story.scss b/packages/react/src/components/Slug/slug-story.scss
new file mode 100644
index 000000000000..51e6c697d200
--- /dev/null
+++ b/packages/react/src/components/Slug/slug-story.scss
@@ -0,0 +1,36 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/theme';
+
+.slug-container {
+ display: flex;
+ margin-bottom: 6rem;
+ align-items: flex-start;
+
+ & > * {
+ margin-left: 2rem;
+ }
+}
+
+.slug-container .cds--toggletip-content p {
+ @include type.type-style('body-compact-01');
+}
+
+.slug-container .cds--toggletip-content .bold {
+ font-weight: 600;
+}
+
+.slug-container .cds--toggletip-content .secondary {
+ color: theme.$text-secondary;
+}
+
+.slug-container .cds--toggletip-content h1 {
+ margin-bottom: 1rem;
+}
+
+.slug-container .cds--toggletip-content hr {
+ border: 0;
+ height: 1px;
+ background: theme.$border-subtle;
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+}
diff --git a/packages/react/src/components/Tile/Tile.tsx b/packages/react/src/components/Tile/Tile.tsx
index 53b339a27d12..3f84d76105d4 100644
--- a/packages/react/src/components/Tile/Tile.tsx
+++ b/packages/react/src/components/Tile/Tile.tsx
@@ -164,7 +164,6 @@ export const ClickableTile = React.forwardRef<
evt?.persist?.();
if (matches(evt, [keys.Enter, keys.Space])) {
setIsSelected(!isSelected);
- onKeyDown(evt);
}
onKeyDown(evt);
}
@@ -190,6 +189,7 @@ export const ClickableTile = React.forwardRef<
{
export function Toggletip({
align,
as,
+ autoAlign,
className: customClassName,
children,
defaultOpen = false,
@@ -173,7 +175,8 @@ export function Toggletip({
open={open}
onKeyDown={onKeyDown}
onBlur={handleBlur}
- ref={ref}>
+ ref={ref}
+ autoAlign={autoAlign}>
{children}
@@ -208,6 +211,11 @@ Toggletip.propTypes = {
*/
as: PropTypes.elementType,
+ /**
+ * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+ */
+ autoAlign: PropTypes.bool,
+
/**
* Custom children to be rendered as the content of the label
*/
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
index 588ad07ad0ec..14e20ee01f13 100644
--- a/packages/react/src/index.js
+++ b/packages/react/src/index.js
@@ -298,3 +298,4 @@ export { DefinitionTooltip } from './components/Tooltip/DefinitionTooltip';
export { GlobalTheme, Theme, useTheme } from './components/Theme';
export { usePrefix } from './internal/usePrefix';
export { useIdPrefix } from './internal/useIdPrefix';
+export { Slug as unstable__Slug } from './components/Slug';
diff --git a/packages/react/src/internal/wrapFocus.js b/packages/react/src/internal/wrapFocus.js
index e918199021c6..fc51ab409fbf 100644
--- a/packages/react/src/internal/wrapFocus.js
+++ b/packages/react/src/internal/wrapFocus.js
@@ -32,11 +32,11 @@ function elementOrParentIsFloatingMenu(node, selectorsFloatingMenus = []) {
/**
* Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
* @param {object} options The options.
- * @param {HTMLElement|null} options.bodyNode
- * @param {HTMLElement|null} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
- * @param {HTMLElement|null} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
- * @param {HTMLElement} options.currentActiveNode The DOM node that has focus.
- * @param {HTMLElement} options.oldActiveNode The DOM node that previously had focus.
+ * @param {Node|null} options.bodyNode
+ * @param {Node|null} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
+ * @param {Node|null} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
+ * @param {Node} options.currentActiveNode The DOM node that has focus.
+ * @param {Node} options.oldActiveNode The DOM node that previously had focus.
* @param {string[]} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus.
*/
function wrapFocus({
diff --git a/packages/react/src/prop-types/requiredIfGivenPropIsTruthy.js b/packages/react/src/prop-types/requiredIfGivenPropIsTruthy.js
index 65de1f262d47..6c511e63e70a 100644
--- a/packages/react/src/prop-types/requiredIfGivenPropIsTruthy.js
+++ b/packages/react/src/prop-types/requiredIfGivenPropIsTruthy.js
@@ -8,8 +8,8 @@
/**
* @param {string} name The name of the prop that must exist to validate
* the current prop.
- * @param {Function} propType The original prop type checker.
- * @returns {Function} The new prop type checker for the current prop that
+ * @param {React.Validator} propType The original prop type checker.
+ * @returns {React.Validator} The new prop type checker for the current prop that
* becomes required if the prop corresponding to the provided prop name exists.
*/
export default function requiredIfGivenPropIsTruthy(name, propType) {
diff --git a/packages/styles/__tests__/__snapshots__/styles-test.js.snap b/packages/styles/__tests__/__snapshots__/styles-test.js.snap
index a617c2aa9aeb..60aebb2849cd 100644
--- a/packages/styles/__tests__/__snapshots__/styles-test.js.snap
+++ b/packages/styles/__tests__/__snapshots__/styles-test.js.snap
@@ -617,6 +617,16 @@ Array [
"importPath": "@carbon/styles/scss/components/slider/slider",
"relativePath": "scss/components/slider/slider",
},
+ Object {
+ "filepath": "scss/components/slug/_index.scss",
+ "importPath": "@carbon/styles/scss/components/slug",
+ "relativePath": "scss/components/slug",
+ },
+ Object {
+ "filepath": "scss/components/slug/_slug.scss",
+ "importPath": "@carbon/styles/scss/components/slug/slug",
+ "relativePath": "scss/components/slug/slug",
+ },
Object {
"filepath": "scss/components/stack/_index.scss",
"importPath": "@carbon/styles/scss/components/stack",
diff --git a/packages/styles/files.js b/packages/styles/files.js
index 54f7afee4156..54d722c22a6a 100644
--- a/packages/styles/files.js
+++ b/packages/styles/files.js
@@ -142,6 +142,8 @@ const files = [
'scss/components/skeleton-styles/_skeleton-styles.scss',
'scss/components/slider/_index.scss',
'scss/components/slider/_slider.scss',
+ 'scss/components/slug/_index.scss',
+ 'scss/components/slug/_slug.scss',
'scss/components/stack/_index.scss',
'scss/components/stack/_stack.scss',
'scss/components/structured-list/_index.scss',
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 38f4bb292ff8..22585e5d15ea 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/styles",
"description": "Styles for the Carbon Design System",
- "version": "1.40.0",
+ "version": "1.41.0-rc.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
@@ -38,13 +38,13 @@
}
},
"dependencies": {
- "@carbon/colors": "^11.19.0",
+ "@carbon/colors": "^11.20.0-rc.0",
"@carbon/feature-flags": "^0.16.0",
- "@carbon/grid": "^11.20.0",
- "@carbon/layout": "^11.19.0",
- "@carbon/motion": "^11.15.0",
- "@carbon/themes": "^11.25.0",
- "@carbon/type": "^11.24.0",
+ "@carbon/grid": "^11.21.0-rc.0",
+ "@carbon/layout": "^11.20.0-rc.0",
+ "@carbon/motion": "^11.16.0-rc.0",
+ "@carbon/themes": "^11.26.0-rc.0",
+ "@carbon/type": "^11.25.0-rc.0",
"@ibm/plex": "6.0.0-next.6"
},
"devDependencies": {
diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
index 8fc597209eaf..f9641a633e5d 100644
--- a/packages/styles/scss/__tests__/theme-test.js
+++ b/packages/styles/scss/__tests__/theme-test.js
@@ -127,6 +127,15 @@ describe('@carbon/styles/scss/theme', () => {
"support-caution-major",
"support-caution-minor",
"support-caution-undefined",
+ "slug-background",
+ "slug-gradient",
+ "slug-background-hover",
+ "slug-gradient-hover",
+ "slug-hollow-hover",
+ "slug-callout-gradient-top",
+ "slug-callout-gradient-bottom",
+ "slug-callout-aura-start",
+ "slug-callout-aura-end",
"highlight",
"overlay",
"toggle-off",
diff --git a/packages/styles/scss/components/_index.scss b/packages/styles/scss/components/_index.scss
index b8ebb05f418a..9d5f88bb42db 100644
--- a/packages/styles/scss/components/_index.scss
+++ b/packages/styles/scss/components/_index.scss
@@ -58,6 +58,7 @@
@use 'select';
@use 'skeleton-styles';
@use 'slider';
+@use 'slug';
@use 'stack';
@use 'structured-list';
@use 'tabs';
diff --git a/packages/styles/scss/components/slug/_index.scss b/packages/styles/scss/components/slug/_index.scss
new file mode 100644
index 000000000000..6cca55ef4a50
--- /dev/null
+++ b/packages/styles/scss/components/slug/_index.scss
@@ -0,0 +1,4 @@
+@forward 'slug';
+@use 'slug';
+
+@include slug.slug;
diff --git a/packages/styles/scss/components/slug/_slug.scss b/packages/styles/scss/components/slug/_slug.scss
new file mode 100644
index 000000000000..fd625e4a4f0f
--- /dev/null
+++ b/packages/styles/scss/components/slug/_slug.scss
@@ -0,0 +1,346 @@
+@use '../../config' as *;
+@use '../../colors' as *;
+@use '../../motion' as *;
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../utilities/convert';
+
+$sizes: (
+ mini: (
+ height: convert.to-rem(16px),
+ width: convert.to-rem(16px),
+ font-size: convert.to-rem(9px),
+ line-height: convert.to-rem(12px),
+ background: $slug-background,
+ ),
+ 2xs: (
+ height: convert.to-rem(20px),
+ width: convert.to-rem(20px),
+ font-size: convert.to-rem(12px),
+ line-height: convert.to-rem(16px),
+ background: $slug-background,
+ ),
+ xs: (
+ height: convert.to-rem(24px),
+ width: convert.to-rem(24px),
+ font-size: convert.to-rem(12px),
+ line-height: convert.to-rem(16px),
+ background: $slug-gradient,
+ ),
+ sm: (
+ height: convert.to-rem(32px),
+ width: convert.to-rem(32px),
+ font-size: convert.to-rem(16px),
+ line-height: convert.to-rem(21px),
+ background: $slug-gradient,
+ ),
+ md: (
+ height: convert.to-rem(40px),
+ width: convert.to-rem(40px),
+ font-size: convert.to-rem(16px),
+ line-height: convert.to-rem(21px),
+ background: $slug-gradient,
+ ),
+ lg: (
+ height: convert.to-rem(48px),
+ width: convert.to-rem(48px),
+ font-size: convert.to-rem(16px),
+ line-height: convert.to-rem(21px),
+ background: $slug-gradient,
+ ),
+ xl: (
+ height: convert.to-rem(64px),
+ width: convert.to-rem(64px),
+ font-size: convert.to-rem(20px),
+ line-height: convert.to-rem(26px),
+ background: $slug-gradient,
+ ),
+);
+
+/// Slug styles
+/// @access public
+/// @group slider
+@mixin slug {
+ .#{$prefix}--slug {
+ display: flex;
+ }
+
+ .#{$prefix}--slug .#{$prefix}--slug__button {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: $text-inverse;
+ font-weight: 600;
+ transition: color $duration-fast-01 motion(entrance, productive),
+ border-color $duration-fast-01 motion(entrance, productive),
+ box-shadow $duration-fast-01 motion(entrance, productive);
+
+ @each $group, $size in $sizes {
+ // Create a class for each size slug
+ &--#{$group} {
+ @each $property, $value in $size {
+ // Set correct properties for each size
+ #{$property}: $value;
+ }
+ }
+ }
+ }
+
+ .#{$prefix}--slug .#{$prefix}--slug__button:focus {
+ box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset;
+ outline: none;
+ }
+
+ .#{$prefix}--slug__text {
+ position: relative;
+ z-index: 1;
+ }
+
+ // pseudo element to animate the hover transition
+ .#{$prefix}--slug__button::before {
+ position: absolute;
+ background: $slug-gradient-hover;
+ block-size: 100%;
+ content: '';
+ inline-size: 100%;
+ opacity: 0;
+ transition: opacity $duration-fast-01 motion(entrance, productive);
+ }
+
+ .#{$prefix}--slug__button:hover::before {
+ opacity: 1;
+ }
+
+ // Focus styles
+ .#{$prefix}--slug .#{$prefix}--slug__button:focus::before {
+ block-size: calc(100% - 6px);
+ inline-size: calc(100% - 6px);
+ }
+
+ .#{$prefix}--slug__button.#{$prefix}--slug__button--mini::before,
+ .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs::before {
+ background: $slug-background-hover;
+ }
+
+ .#{$prefix}--slug__button.#{$prefix}--slug__button--mini:focus,
+ .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs:focus {
+ box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $focus-inset;
+ }
+
+ .#{$prefix}--slug__button.#{$prefix}--slug__button--mini:focus::before,
+ .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs:focus::before {
+ block-size: calc(100% - 4px);
+ inline-size: calc(100% - 4px);
+ }
+
+ // Hollow slug
+ // Only allow mini, 2xs, and xs sizes
+ .#{$prefix}--slug__button--hollow.#{$prefix}--slug__button--sm,
+ .#{$prefix}--slug__button--hollow.#{$prefix}--slug__button--md,
+ .#{$prefix}--slug__button--hollow.#{$prefix}--slug__button--lg,
+ .#{$prefix}--slug__button--hollow.#{$prefix}--slug__button--xl {
+ block-size: convert.to-rem(24px);
+ font-size: convert.to-rem(12px);
+ inline-size: convert.to-rem(24px);
+ line-height: convert.to-rem(16px);
+ }
+
+ .#{$prefix}--slug__button--hollow::before {
+ display: none;
+ }
+
+ .#{$prefix}--slug .#{$prefix}--slug__button--hollow {
+ border: 1px solid $border-inverse;
+ background: transparent;
+ color: $text-primary;
+ }
+
+ .#{$prefix}--slug__button--hollow:hover {
+ border-color: $slug-hollow-hover;
+ color: $slug-hollow-hover;
+ }
+
+ .#{$prefix}--slug__button--hollow:focus {
+ border-color: $focus;
+ box-shadow: inset 0 0 0 1px $focus;
+ }
+
+ // Inline slug
+ .#{$prefix}--slug .#{$prefix}--slug__button--inline {
+ border: 1px solid transparent;
+ border-radius: convert.to-rem(1px);
+ background: transparent;
+ block-size: initial;
+ color: $text-primary;
+ font-size: convert.to-rem(14px);
+ inline-size: initial;
+ line-height: initial;
+ padding-inline: convert.to-rem(4px);
+ }
+
+ .#{$prefix}--slug__button--inline::before {
+ display: none;
+ }
+
+ .#{$prefix}--slug .#{$prefix}--slug__button--inline:focus {
+ border-color: $focus;
+ box-shadow: none;
+ }
+
+ .#{$prefix}--slug .#{$prefix}--slug__button--inline:hover {
+ border-color: $icon-secondary;
+ color: $text-secondary;
+ }
+
+ .#{$prefix}--slug .#{$prefix}--slug__button--inline:focus:hover {
+ border-color: $focus;
+ }
+
+ .#{$prefix}--slug
+ .#{$prefix}--slug__button--inline:hover
+ .#{$prefix}--slug__text::before {
+ background: $icon-secondary;
+ }
+
+ .#{$prefix}--slug--hollow
+ .#{$prefix}--slug__button--inline:hover
+ .#{$prefix}--slug__text::before {
+ background: transparent;
+ box-shadow: inset 0 0 0 1px $icon-secondary;
+ }
+
+ .#{$prefix}--slug__button--inline .#{$prefix}--slug__text {
+ padding-inline-start: convert.to-rem(8px);
+ }
+
+ .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--lg
+ .#{$prefix}--slug__text {
+ padding-inline-start: convert.to-rem(12px);
+ }
+
+ .#{$prefix}--slug__button--inline .#{$prefix}--slug__text::before {
+ position: absolute;
+ display: inline-block;
+ background: $icon-primary;
+ block-size: convert.to-rem(4px);
+ content: '';
+ inline-size: convert.to-rem(4px);
+ inset-block-start: 50%;
+ inset-inline-start: 0;
+ opacity: 1;
+ transform: translateY(-50%);
+ transition: background $duration-fast-01 motion(entrance, productive),
+ box-shadow $duration-fast-01 motion(entrance, productive);
+ }
+
+ // Inline slug hollow dot
+ .#{$prefix}--slug--hollow .#{$prefix}--slug__text::before {
+ background: transparent;
+ block-size: convert.to-rem(6px);
+ box-shadow: inset 0 0 0 1px $icon-primary;
+ inline-size: convert.to-rem(6px);
+ }
+
+ .#{$prefix}--slug--hollow
+ .#{$prefix}--slug__button--sm
+ .#{$prefix}--slug__text,
+ .#{$prefix}--slug--hollow
+ .#{$prefix}--slug__button--md
+ .#{$prefix}--slug__text {
+ padding-inline-start: convert.to-rem(9px);
+ }
+
+ .#{$prefix}--slug__button--lg .#{$prefix}--slug__text::before,
+ .#{$prefix}--slug--hollow
+ .#{$prefix}--slug__button--lg
+ .#{$prefix}--slug__text::before {
+ block-size: convert.to-rem(8px);
+ inline-size: convert.to-rem(8px);
+ }
+
+ // Only allow sm, md, and lg sizes
+ .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--mini,
+ .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--mini
+ .#{$prefix}--slug__additional-text,
+ .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--2xs,
+ .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--2xs
+ .#{$prefix}--slug__additional-text,
+ .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--xs,
+ .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--xs
+ .#{$prefix}--slug__additional-text,
+ .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--sm,
+ .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--sm
+ .#{$prefix}--slug__additional-text {
+ font-size: convert.to-rem(12px);
+ }
+
+ .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--lg,
+ .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--xl {
+ font-size: convert.to-rem(16px);
+ }
+
+ // Inline slug with text
+ .#{$prefix}--slug .#{$prefix}--slug__button--inline-with-content {
+ border: 1px solid $border-inverse;
+ padding-block: convert.to-rem(2px);
+ padding-inline: convert.to-rem(8px);
+ }
+
+ .#{$prefix}--slug__button--inline-with-content
+ .#{$prefix}--slug__additional-text {
+ @include type-style('body-compact-02');
+
+ padding-inline-start: convert.to-rem(4px);
+ }
+
+ .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--md
+ .#{$prefix}--slug__additional-text {
+ font-size: convert.to-rem(14px);
+ }
+
+ .#{$prefix}--slug .#{$prefix}--slug__button--inline-with-content:focus {
+ box-shadow: inset 0 0 0 1px $focus;
+ }
+
+ // Default callout styles
+ .#{$prefix}--slug.#{$prefix}--slug--hollow .#{$prefix}--toggletip-content {
+ row-gap: 0;
+ }
+
+ // Slug callout styles
+ .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--popover-content {
+ border: 1px solid $border-subtle;
+ border-radius: 16px;
+ // 84px seems to make this fully opaque?
+ backdrop-filter: blur(25px);
+ background: linear-gradient(
+ 0deg,
+ $slug-callout-aura-start 0%,
+ $slug-callout-aura-end 33%,
+ transparent 100%
+ ),
+ linear-gradient(
+ 180deg,
+ $slug-callout-gradient-top 0%,
+ $slug-callout-gradient-bottom 100%
+ )
+ rgba(0, 0, 0, 0.01);
+ // box-shadow seems to match the spec better
+ // than the same values plugged into `drop-shadow`
+ // filter: drop-shadow(-45px 45px 100px rgba(0, 0, 0, 0.2));
+ box-shadow: -45px 45px 100px rgba(0, 0, 0, 0.2);
+ color: $text-primary;
+ min-inline-size: convert.to-rem(280px);
+ }
+
+ .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--popover-caret {
+ background: $border-subtle;
+ }
+
+ .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--toggletip-content {
+ padding-block-end: convert.to-rem(80px);
+ padding-block-start: convert.to-rem(32px);
+ padding-inline: convert.to-rem(32px);
+ }
+}
diff --git a/packages/themes/package.json b/packages/themes/package.json
index f64f23d93b43..fb7c589f7130 100644
--- a/packages/themes/package.json
+++ b/packages/themes/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/themes",
"description": "Themes for applying color in the Carbon Design System",
- "version": "11.25.0",
+ "version": "11.26.0-rc.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -30,15 +30,15 @@
"build": "yarn clean && carbon-cli bundle src/index.js --name CarbonThemes && babel-node --presets '@babel/preset-env' tasks/build.js && carbon-cli check \"scss/*.scss\""
},
"dependencies": {
- "@carbon/colors": "^11.19.0",
- "@carbon/layout": "^11.19.0",
- "@carbon/type": "^11.24.0",
+ "@carbon/colors": "^11.20.0-rc.0",
+ "@carbon/layout": "^11.20.0-rc.0",
+ "@carbon/type": "^11.25.0-rc.0",
"color": "^4.0.0"
},
"devDependencies": {
"@babel/node": "^7.17.10",
"@babel/preset-env": "^7.18.2",
- "@carbon/cli": "^11.14.0",
+ "@carbon/cli": "^11.15.0-rc.0",
"@carbon/cli-reporter": "^10.7.0",
"@carbon/scss-generator": "^10.18.0",
"@carbon/test-utils": "^10.30.0",
diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
index e4b052420d76..981f780163ad 100644
--- a/packages/themes/src/g10.js
+++ b/packages/themes/src/g10.js
@@ -7,6 +7,7 @@
import {
// Blue
+ blue10,
blue20,
blue30,
blue40,
@@ -40,6 +41,7 @@ import {
// Constants
white,
whiteHover,
+ rgba,
} from '@carbon/colors';
import { adjustAlpha } from './tools';
@@ -200,6 +202,17 @@ export const overlay = 'rgba(22, 22, 22, 0.5)';
export const toggleOff = gray50;
export const shadow = 'rgba(0, 0, 0, 0.3)';
+// AI
+export const slugBackground = gray70;
+export const slugGradient = `${gray100} linear-gradient(135deg, ${gray40} 0%, rgba(${white}, 0) 100%)`;
+export const slugBackgroundHover = gray60;
+export const slugGradientHover = `${gray100} linear-gradient(135deg, ${gray20Hover} 0%, rgba(${white}, 0) 100%)`;
+export const slugHollowHover = gray80Hover;
+export const slugCalloutGradientTop = rgba(gray10, 0.85);
+export const slugCalloutGradientBottom = rgba(gray20, 0.85);
+export const slugCalloutAuraStart = rgba(blue10, 0.6);
+export const slugCalloutAuraEnd = rgba(white, 0);
+
export {
// Type
caption01,
diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
index 23d342a6eebc..8e940589c1e6 100644
--- a/packages/themes/src/g100.js
+++ b/packages/themes/src/g100.js
@@ -7,6 +7,7 @@
import {
// Blue
+ blue20,
blue40,
blue60,
blue70,
@@ -14,7 +15,10 @@ import {
// Gray
gray10,
+ gray10Hover,
+ gray20,
gray30,
+ gray30Hover,
gray40,
gray50,
gray60,
@@ -46,7 +50,6 @@ import {
// Tools
rgba,
- gray10Hover,
} from '@carbon/colors';
import { adjustLightness, adjustAlpha } from './tools';
@@ -207,6 +210,17 @@ export const overlay = rgba(black, 0.65);
export const toggleOff = gray60;
export const shadow = rgba(black, 0.8);
+// AI
+export const slugBackground = gray30;
+export const slugGradient = `${gray50} linear-gradient(135deg, ${gray10} 0%, rgba(${white}, 0) 100%)`;
+export const slugBackgroundHover = gray20;
+export const slugGradientHover = `${gray40} linear-gradient(135deg, ${white} 0%, rgba(${white}, 0) 100%)`;
+export const slugHollowHover = gray30Hover;
+export const slugCalloutGradientTop = rgba(gray100, 0.85);
+export const slugCalloutGradientBottom = rgba(gray90, 0.85);
+export const slugCalloutAuraStart = rgba(blue20, 0.2);
+export const slugCalloutAuraEnd = rgba(gray100, 0);
+
export {
// Type
caption01,
diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
index c980dab52609..3475b9edf253 100644
--- a/packages/themes/src/g90.js
+++ b/packages/themes/src/g90.js
@@ -7,13 +7,17 @@
import {
// Blue
+ blue20,
blue40,
blue60,
blue70,
// Gray
gray10,
+ gray10Hover,
+ gray20,
gray30,
+ gray30Hover,
gray40,
gray50,
gray50Hover,
@@ -22,7 +26,9 @@ import {
gray70,
gray70Hover,
gray80,
+ gray80Hover,
gray90,
+ gray90Hover,
gray100,
// Support
@@ -44,9 +50,6 @@ import {
// Tools
rgba,
- gray90Hover,
- gray10Hover,
- gray80Hover,
} from '@carbon/colors';
import { adjustAlpha } from './tools';
@@ -207,6 +210,17 @@ export const overlay = rgba(black, 0.65);
export const toggleOff = gray50;
export const shadow = rgba(black, 0.8);
+// AI
+export const slugBackground = gray30;
+export const slugGradient = `${gray50} linear-gradient(135deg, ${gray10} 0%, rgba(${white}, 0) 100%)`;
+export const slugBackgroundHover = gray20;
+export const slugGradientHover = `${gray40} linear-gradient(135deg, ${white} 0%, rgba(${white}, 0) 100%)`;
+export const slugHollowHover = gray30Hover;
+export const slugCalloutGradientTop = rgba(gray100, 0.85);
+export const slugCalloutGradientBottom = rgba(gray90, 0.85);
+export const slugCalloutAuraStart = rgba(blue20, 0.2);
+export const slugCalloutAuraEnd = rgba(gray100, 0);
+
export {
// Type
caption01,
diff --git a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap
index 0a0e4b075078..9beb5856cf4b 100644
--- a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap
+++ b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap
@@ -238,6 +238,15 @@ Array [
"support-caution-major",
"support-caution-minor",
"support-caution-undefined",
+ "slug-background",
+ "slug-gradient",
+ "slug-background-hover",
+ "slug-gradient-hover",
+ "slug-hollow-hover",
+ "slug-callout-gradient-top",
+ "slug-callout-gradient-bottom",
+ "slug-callout-aura-start",
+ "slug-callout-aura-end",
"highlight",
"overlay",
"toggle-off",
diff --git a/packages/themes/src/tokens/__tests__/metadata-test.js b/packages/themes/src/tokens/__tests__/metadata-test.js
index cd5790f3602b..2d82f7afdb34 100644
--- a/packages/themes/src/tokens/__tests__/metadata-test.js
+++ b/packages/themes/src/tokens/__tests__/metadata-test.js
@@ -925,6 +925,42 @@ test('metadata', () => {
"name": "support-caution-undefined",
"type": "color",
},
+ Object {
+ "name": "slug-background",
+ "type": "color",
+ },
+ Object {
+ "name": "slug-gradient",
+ "type": "color",
+ },
+ Object {
+ "name": "slug-background-hover",
+ "type": "color",
+ },
+ Object {
+ "name": "slug-gradient-hover",
+ "type": "color",
+ },
+ Object {
+ "name": "slug-hollow-hover",
+ "type": "color",
+ },
+ Object {
+ "name": "slug-callout-gradient-top",
+ "type": "color",
+ },
+ Object {
+ "name": "slug-callout-gradient-bottom",
+ "type": "color",
+ },
+ Object {
+ "name": "slug-callout-aura-start",
+ "type": "color",
+ },
+ Object {
+ "name": "slug-callout-aura-end",
+ "type": "color",
+ },
Object {
"name": "highlight",
"type": "color",
diff --git a/packages/themes/src/tokens/v11TokenGroup.js b/packages/themes/src/tokens/v11TokenGroup.js
index 1793c14eb4bf..dd11e68e3f1c 100644
--- a/packages/themes/src/tokens/v11TokenGroup.js
+++ b/packages/themes/src/tokens/v11TokenGroup.js
@@ -341,6 +341,22 @@ export const contextual = TokenGroup.create({
],
});
+export const ai = TokenGroup.create({
+ name: 'AI',
+ properties: ['background'],
+ tokens: [
+ 'slug-background',
+ 'slug-gradient',
+ 'slug-background-hover',
+ 'slug-gradient-hover',
+ 'slug-hollow-hover',
+ 'slug-callout-gradient-top',
+ 'slug-callout-gradient-bottom',
+ 'slug-callout-aura-start',
+ 'slug-callout-aura-end',
+ ],
+});
+
export const group = TokenGroup.create({
name: 'All',
tokens: [
@@ -359,6 +375,7 @@ export const group = TokenGroup.create({
link,
icon,
support,
+ ai,
// Misc
{
diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js
index 4c81a7758835..e4e4b818c879 100644
--- a/packages/themes/src/white.js
+++ b/packages/themes/src/white.js
@@ -7,6 +7,7 @@
import {
// Blue
+ blue10,
blue20,
blue30,
blue40,
@@ -15,6 +16,7 @@ import {
// Gray
gray10,
+ gray10Hover,
gray20,
gray20Hover,
gray30,
@@ -23,6 +25,7 @@ import {
gray60,
gray70,
gray80,
+ gray80Hover,
gray100,
// Support
@@ -38,8 +41,7 @@ import {
// Constants
white,
whiteHover,
- gray80Hover,
- gray10Hover,
+ rgba,
} from '@carbon/colors';
import { adjustAlpha } from './tools';
@@ -200,6 +202,17 @@ export const overlay = 'rgba(22, 22, 22, 0.5)';
export const toggleOff = gray50;
export const shadow = 'rgba(0, 0, 0, 0.3)';
+// AI
+export const slugBackground = gray70;
+export const slugGradient = `${gray100} linear-gradient(135deg, ${gray40} 0%, rgba(${white}, 0) 100%)`;
+export const slugBackgroundHover = gray60;
+export const slugGradientHover = `${gray100} linear-gradient(135deg, ${gray20Hover} 0%, rgba(${white}, 0) 100%)`;
+export const slugHollowHover = gray80Hover;
+export const slugCalloutGradientTop = rgba(gray10, 0.85);
+export const slugCalloutGradientBottom = rgba(gray20, 0.85);
+export const slugCalloutAuraStart = rgba(blue10, 0.6);
+export const slugCalloutAuraEnd = rgba(white, 0);
+
// Type
export {
caption01,
diff --git a/packages/type/package.json b/packages/type/package.json
index cf48d470fc2d..f6c7ec0841bb 100644
--- a/packages/type/package.json
+++ b/packages/type/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/type",
"description": "Typography for digital and software products using the Carbon Design System",
- "version": "11.24.0",
+ "version": "11.25.0-rc.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -38,11 +38,11 @@
"clean": "rimraf css es lib umd"
},
"dependencies": {
- "@carbon/grid": "^11.20.0",
- "@carbon/layout": "^11.19.0"
+ "@carbon/grid": "^11.21.0-rc.0",
+ "@carbon/layout": "^11.20.0-rc.0"
},
"devDependencies": {
- "@carbon/cli": "^11.14.0",
+ "@carbon/cli": "^11.15.0-rc.0",
"@carbon/test-utils": "^10.30.0",
"change-case": "^4.1.1",
"css": "^3.0.0",
diff --git a/www/package.json b/www/package.json
index f247b673b604..d6680327b89f 100644
--- a/www/package.json
+++ b/www/package.json
@@ -1,7 +1,7 @@
{
"name": "www",
"private": true,
- "version": "0.49.0",
+ "version": "0.50.0-rc.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
@@ -22,7 +22,7 @@
"start": "next start"
},
"dependencies": {
- "@carbon/react": "^1.40.0",
+ "@carbon/react": "^1.41.0-rc.0",
"@octokit/core": "^4.0.0",
"@octokit/plugin-retry": "^3.0.9",
"@octokit/plugin-throttling": "^4.0.0",
diff --git a/yarn.lock b/yarn.lock
index e07cefc9ea47..cacd0ec4c3f4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1845,7 +1845,7 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/cli@^11.14.0, @carbon/cli@workspace:packages/cli":
+"@carbon/cli@^11.15.0-rc.0, @carbon/cli@workspace:packages/cli":
version: 0.0.0-use.local
resolution: "@carbon/cli@workspace:packages/cli"
dependencies:
@@ -1876,18 +1876,18 @@ __metadata:
rollup: ^2.79.1
sass: ^1.51.0
sassdoc: ^2.7.3
- typescript-config-carbon: ^0.1.0
+ typescript-config-carbon: ^0.2.0-rc.0
yargs: ^17.0.1
bin:
carbon-cli: ./bin/carbon-cli.js
languageName: unknown
linkType: soft
-"@carbon/colors@^11.19.0, @carbon/colors@workspace:packages/colors":
+"@carbon/colors@^11.20.0-rc.0, @carbon/colors@workspace:packages/colors":
version: 0.0.0-use.local
resolution: "@carbon/colors@workspace:packages/colors"
dependencies:
- "@carbon/cli": ^11.14.0
+ "@carbon/cli": ^11.15.0-rc.0
"@carbon/cli-reporter": ^10.7.0
"@carbon/scss-generator": ^10.18.0
"@carbon/test-utils": ^10.30.0
@@ -1907,14 +1907,14 @@ __metadata:
version: 0.0.0-use.local
resolution: "@carbon/elements@workspace:packages/elements"
dependencies:
- "@carbon/cli": ^11.14.0
- "@carbon/colors": ^11.19.0
- "@carbon/grid": ^11.20.0
- "@carbon/icons": ^11.28.0
- "@carbon/layout": ^11.19.0
- "@carbon/motion": ^11.15.0
- "@carbon/themes": ^11.25.0
- "@carbon/type": ^11.24.0
+ "@carbon/cli": ^11.15.0-rc.0
+ "@carbon/colors": ^11.20.0-rc.0
+ "@carbon/grid": ^11.21.0-rc.0
+ "@carbon/icons": ^11.29.0-rc.0
+ "@carbon/layout": ^11.20.0-rc.0
+ "@carbon/motion": ^11.16.0-rc.0
+ "@carbon/themes": ^11.26.0-rc.0
+ "@carbon/type": ^11.25.0-rc.0
fs-extra: ^11.0.0
klaw-sync: ^6.0.0
replace-in-file: ^7.0.0
@@ -1950,17 +1950,17 @@ __metadata:
languageName: node
linkType: hard
-"@carbon/grid@^11.20.0, @carbon/grid@workspace:packages/grid":
+"@carbon/grid@^11.21.0-rc.0, @carbon/grid@workspace:packages/grid":
version: 0.0.0-use.local
resolution: "@carbon/grid@workspace:packages/grid"
dependencies:
- "@carbon/cli": ^11.14.0
- "@carbon/layout": ^11.19.0
+ "@carbon/cli": ^11.15.0-rc.0
+ "@carbon/layout": ^11.20.0-rc.0
rimraf: ^5.0.0
languageName: unknown
linkType: soft
-"@carbon/icon-build-helpers@^1.18.0, @carbon/icon-build-helpers@workspace:packages/icon-build-helpers":
+"@carbon/icon-build-helpers@^1.19.0-rc.0, @carbon/icon-build-helpers@workspace:packages/icon-build-helpers":
version: 0.0.0-use.local
resolution: "@carbon/icon-build-helpers@workspace:packages/icon-build-helpers"
dependencies:
@@ -1971,7 +1971,7 @@ __metadata:
"@babel/template": ^7.16.7
"@babel/types": ^7.18.4
"@carbon/cli-reporter": ^10.7.0
- "@carbon/icon-helpers": ^10.44.0
+ "@carbon/icon-helpers": ^10.45.0-rc.0
"@rollup/plugin-babel": ^6.0.0
"@rollup/plugin-replace": ^5.0.0
browserslist-config-carbon: ^11.2.0
@@ -1992,27 +1992,34 @@ __metadata:
svg-parser: ^2.0.4
svgo: ^1.1.1
svgson: ^5.2.1
- typescript-config-carbon: ^0.1.0
+ typescript-config-carbon: ^0.2.0-rc.0
languageName: unknown
linkType: soft
-"@carbon/icon-helpers@^10.28.0, @carbon/icon-helpers@^10.44.0, @carbon/icon-helpers@workspace:packages/icon-helpers":
+"@carbon/icon-helpers@^10.45.0-rc.0, @carbon/icon-helpers@workspace:packages/icon-helpers":
version: 0.0.0-use.local
resolution: "@carbon/icon-helpers@workspace:packages/icon-helpers"
dependencies:
- "@carbon/cli": ^11.14.0
+ "@carbon/cli": ^11.15.0-rc.0
rimraf: ^5.0.0
- typescript-config-carbon: ^0.1.0
+ typescript-config-carbon: ^0.2.0-rc.0
languageName: unknown
linkType: soft
-"@carbon/icons-react@^11.28.0, @carbon/icons-react@workspace:packages/icons-react":
+"@carbon/icon-helpers@npm:^10.28.0":
+ version: 10.44.0
+ resolution: "@carbon/icon-helpers@npm:10.44.0"
+ checksum: c61b711ef78ba5546514917571ccec01c0943a2dc53d34a90987985bd839de7c164ce7bf9890d21012e585c1a655f6a5a9ac88492af4345653f095f9ddebe54a
+ languageName: node
+ linkType: hard
+
+"@carbon/icons-react@^11.29.0-rc.0, @carbon/icons-react@workspace:packages/icons-react":
version: 0.0.0-use.local
resolution: "@carbon/icons-react@workspace:packages/icons-react"
dependencies:
- "@carbon/icon-build-helpers": ^1.18.0
- "@carbon/icon-helpers": ^10.44.0
- "@carbon/icons": ^11.28.0
+ "@carbon/icon-build-helpers": ^1.19.0-rc.0
+ "@carbon/icon-helpers": ^10.45.0-rc.0
+ "@carbon/icons": ^11.29.0-rc.0
"@carbon/telemetry": 0.1.0
prop-types: ^15.7.2
rimraf: ^5.0.0
@@ -2039,8 +2046,8 @@ __metadata:
resolution: "@carbon/icons-vue@workspace:packages/icons-vue"
dependencies:
"@carbon/cli-reporter": ^10.7.0
- "@carbon/icon-helpers": ^10.44.0
- "@carbon/icons": ^11.28.0
+ "@carbon/icon-helpers": ^10.45.0-rc.0
+ "@carbon/icons": ^11.29.0-rc.0
fs-extra: ^11.0.0
prettier: ^2.8.8
rimraf: ^5.0.0
@@ -2049,21 +2056,21 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/icons@^11.28.0, @carbon/icons@workspace:packages/icons":
+"@carbon/icons@^11.29.0-rc.0, @carbon/icons@workspace:packages/icons":
version: 0.0.0-use.local
resolution: "@carbon/icons@workspace:packages/icons"
dependencies:
- "@carbon/cli": ^11.14.0
- "@carbon/icon-build-helpers": ^1.18.0
+ "@carbon/cli": ^11.15.0-rc.0
+ "@carbon/icon-build-helpers": ^1.19.0-rc.0
rimraf: ^5.0.0
languageName: unknown
linkType: soft
-"@carbon/layout@^11.19.0, @carbon/layout@workspace:packages/layout":
+"@carbon/layout@^11.20.0-rc.0, @carbon/layout@workspace:packages/layout":
version: 0.0.0-use.local
resolution: "@carbon/layout@workspace:packages/layout"
dependencies:
- "@carbon/cli": ^11.14.0
+ "@carbon/cli": ^11.15.0-rc.0
"@carbon/cli-reporter": ^10.7.0
"@carbon/scss-generator": ^10.18.0
"@carbon/test-utils": ^10.30.0
@@ -2079,11 +2086,11 @@ __metadata:
languageName: node
linkType: hard
-"@carbon/motion@^11.15.0, @carbon/motion@workspace:packages/motion":
+"@carbon/motion@^11.16.0-rc.0, @carbon/motion@workspace:packages/motion":
version: 0.0.0-use.local
resolution: "@carbon/motion@workspace:packages/motion"
dependencies:
- "@carbon/cli": ^11.14.0
+ "@carbon/cli": ^11.15.0-rc.0
rimraf: ^5.0.0
languageName: unknown
linkType: soft
@@ -2092,9 +2099,9 @@ __metadata:
version: 0.0.0-use.local
resolution: "@carbon/pictograms-react@workspace:packages/pictograms-react"
dependencies:
- "@carbon/icon-build-helpers": ^1.18.0
- "@carbon/icon-helpers": ^10.44.0
- "@carbon/pictograms": ^12.24.0
+ "@carbon/icon-build-helpers": ^1.19.0-rc.0
+ "@carbon/icon-helpers": ^10.45.0-rc.0
+ "@carbon/pictograms": ^12.25.0-rc.0
"@carbon/telemetry": 0.1.0
prop-types: ^15.7.2
rimraf: ^5.0.0
@@ -2103,16 +2110,16 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/pictograms@^12.24.0, @carbon/pictograms@workspace:packages/pictograms":
+"@carbon/pictograms@^12.25.0-rc.0, @carbon/pictograms@workspace:packages/pictograms":
version: 0.0.0-use.local
resolution: "@carbon/pictograms@workspace:packages/pictograms"
dependencies:
- "@carbon/icon-build-helpers": ^1.18.0
+ "@carbon/icon-build-helpers": ^1.19.0-rc.0
rimraf: ^5.0.0
languageName: unknown
linkType: soft
-"@carbon/react@^1.40.0, @carbon/react@workspace:packages/react":
+"@carbon/react@^1.41.0-rc.0, @carbon/react@workspace:packages/react":
version: 0.0.0-use.local
resolution: "@carbon/react@workspace:packages/react"
dependencies:
@@ -2126,12 +2133,12 @@ __metadata:
"@babel/preset-typescript": ^7.21.5
"@babel/runtime": ^7.18.3
"@carbon/feature-flags": ^0.16.0
- "@carbon/icons-react": ^11.28.0
- "@carbon/layout": ^11.19.0
- "@carbon/styles": ^1.40.0
+ "@carbon/icons-react": ^11.29.0-rc.0
+ "@carbon/layout": ^11.20.0-rc.0
+ "@carbon/styles": ^1.41.0-rc.0
"@carbon/telemetry": 0.1.0
"@carbon/test-utils": ^10.30.0
- "@carbon/themes": ^11.25.0
+ "@carbon/themes": ^11.26.0-rc.0
"@rollup/plugin-babel": ^6.0.0
"@rollup/plugin-commonjs": ^25.0.0
"@rollup/plugin-node-resolve": ^15.0.0
@@ -2189,7 +2196,7 @@ __metadata:
storybook-readme: ^5.0.9
stream-browserify: ^3.0.0
style-loader: ^3.3.1
- typescript-config-carbon: ^0.1.0
+ typescript-config-carbon: ^0.2.0-rc.0
use-resize-observer: ^6.0.0
webpack: ^5.65.0
webpack-dev-server: ^4.7.4
@@ -2210,18 +2217,18 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/styles@^1.40.0, @carbon/styles@workspace:packages/styles":
+"@carbon/styles@^1.41.0-rc.0, @carbon/styles@workspace:packages/styles":
version: 0.0.0-use.local
resolution: "@carbon/styles@workspace:packages/styles"
dependencies:
- "@carbon/colors": ^11.19.0
+ "@carbon/colors": ^11.20.0-rc.0
"@carbon/feature-flags": ^0.16.0
- "@carbon/grid": ^11.20.0
- "@carbon/layout": ^11.19.0
- "@carbon/motion": ^11.15.0
+ "@carbon/grid": ^11.21.0-rc.0
+ "@carbon/layout": ^11.20.0-rc.0
+ "@carbon/motion": ^11.16.0-rc.0
"@carbon/test-utils": ^10.30.0
- "@carbon/themes": ^11.25.0
- "@carbon/type": ^11.24.0
+ "@carbon/themes": ^11.26.0-rc.0
+ "@carbon/type": ^11.25.0-rc.0
"@ibm/plex": 6.0.0-next.6
autoprefixer: ^10.4.7
browserslist-config-carbon: ^11.2.0
@@ -2263,19 +2270,19 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/themes@^11.25.0, @carbon/themes@workspace:packages/themes":
+"@carbon/themes@^11.26.0-rc.0, @carbon/themes@workspace:packages/themes":
version: 0.0.0-use.local
resolution: "@carbon/themes@workspace:packages/themes"
dependencies:
"@babel/node": ^7.17.10
"@babel/preset-env": ^7.18.2
- "@carbon/cli": ^11.14.0
+ "@carbon/cli": ^11.15.0-rc.0
"@carbon/cli-reporter": ^10.7.0
- "@carbon/colors": ^11.19.0
- "@carbon/layout": ^11.19.0
+ "@carbon/colors": ^11.20.0-rc.0
+ "@carbon/layout": ^11.20.0-rc.0
"@carbon/scss-generator": ^10.18.0
"@carbon/test-utils": ^10.30.0
- "@carbon/type": ^11.24.0
+ "@carbon/type": ^11.25.0-rc.0
change-case: ^4.1.1
color: ^4.0.0
core-js: ^3.16.0
@@ -2285,13 +2292,13 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/type@^11.24.0, @carbon/type@workspace:packages/type":
+"@carbon/type@^11.25.0-rc.0, @carbon/type@workspace:packages/type":
version: 0.0.0-use.local
resolution: "@carbon/type@workspace:packages/type"
dependencies:
- "@carbon/cli": ^11.14.0
- "@carbon/grid": ^11.20.0
- "@carbon/layout": ^11.19.0
+ "@carbon/cli": ^11.15.0-rc.0
+ "@carbon/grid": ^11.21.0-rc.0
+ "@carbon/layout": ^11.20.0-rc.0
"@carbon/test-utils": ^10.30.0
change-case: ^4.1.1
css: ^3.0.0
@@ -10697,8 +10704,8 @@ __metadata:
"@babel/plugin-transform-react-constant-elements": ^7.17.12
"@babel/preset-env": ^7.18.2
"@babel/preset-react": ^7.17.12
- "@carbon/react": ^1.40.0
- "@carbon/styles": ^1.40.0
+ "@carbon/react": ^1.41.0-rc.0
+ "@carbon/styles": ^1.41.0-rc.0
"@carbon/telemetry": 0.1.0
"@carbon/test-utils": ^10.30.0
"@rollup/plugin-babel": ^6.0.0
@@ -10737,7 +10744,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "carbon-components@workspace:packages/carbon-components"
dependencies:
- "@carbon/styles": ^1.40.0
+ "@carbon/styles": ^1.41.0-rc.0
"@carbon/telemetry": 0.1.0
"@carbon/test-utils": ^10.30.0
chalk: 1.1.3
@@ -11101,7 +11108,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "class-prefix@workspace:examples/class-prefix"
dependencies:
- "@carbon/react": ^1.40.0
+ "@carbon/react": ^1.41.0-rc.0
"@vitejs/plugin-react": 4.0.0
react: ^18.2.0
react-dom: ^18.2.0
@@ -11423,7 +11430,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "codesandbox-styles@workspace:examples/codesandbox-styles"
dependencies:
- "@carbon/styles": ^1.40.0
+ "@carbon/styles": ^1.41.0-rc.0
sass: ^1.51.0
vite: ^4.3.8
languageName: unknown
@@ -11433,7 +11440,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "codesandbox-with-sass-compilation@workspace:examples/codesandbox-with-sass-compilation"
dependencies:
- "@carbon/react": ^1.40.0
+ "@carbon/react": ^1.41.0-rc.0
react: ^18.2.0
react-dom: ^18.2.0
react-scripts: 5.0.0
@@ -11445,7 +11452,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "codesandbox@workspace:examples/codesandbox"
dependencies:
- "@carbon/react": ^1.40.0
+ "@carbon/react": ^1.41.0-rc.0
react: ^18.2.0
react-dom: ^18.2.0
react-scripts: 5.0.0
@@ -12664,7 +12671,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "custom-theme@workspace:examples/custom-theme"
dependencies:
- "@carbon/react": ^1.40.0
+ "@carbon/react": ^1.41.0-rc.0
"@vitejs/plugin-react": 4.0.0
react: ^18.2.0
react-dom: ^18.2.0
@@ -14991,7 +14998,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "examples-light-dark@workspace:examples/light-dark-mode"
dependencies:
- "@carbon/react": ^1.40.0
+ "@carbon/react": ^1.41.0-rc.0
eslint: 8.40.0
next: 12.1.4
react: 18.2.0
@@ -15004,7 +15011,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "examples-nextjs@workspace:examples/nextjs"
dependencies:
- "@carbon/react": ^1.40.0
+ "@carbon/react": ^1.41.0-rc.0
eslint: 8.40.0
eslint-config-next: 13.4.7
next: 13.4.7
@@ -17363,7 +17370,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "id-prefix@workspace:examples/id-prefix"
dependencies:
- "@carbon/react": ^1.40.0
+ "@carbon/react": ^1.41.0-rc.0
"@vitejs/plugin-react": 4.0.0
react: ^18.2.0
react-dom: ^18.2.0
@@ -17500,7 +17507,7 @@ __metadata:
resolution: "incremental-migration-vite@workspace:examples/incremental-migration-vite"
dependencies:
"@carbon/icons-react": ^10.49.0
- "@carbon/react": ^1.40.0
+ "@carbon/react": ^1.41.0-rc.0
"@vitejs/plugin-react": 4.0.0
carbon-components: ^10.57.0
carbon-components-react: ^7.57.0
@@ -30665,7 +30672,7 @@ __metadata:
languageName: node
linkType: hard
-"typescript-config-carbon@^0.1.0, typescript-config-carbon@workspace:config/typescript-config-carbon":
+"typescript-config-carbon@^0.2.0-rc.0, typescript-config-carbon@workspace:config/typescript-config-carbon":
version: 0.0.0-use.local
resolution: "typescript-config-carbon@workspace:config/typescript-config-carbon"
dependencies:
@@ -31418,7 +31425,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "v10-token-compat-in-v11@workspace:examples/v10-token-compat-in-v11"
dependencies:
- "@carbon/react": ^1.40.0
+ "@carbon/react": ^1.41.0-rc.0
"@vitejs/plugin-react": 4.0.0
react: ^18.2.0
react-dom: ^18.2.0
@@ -31722,7 +31729,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "vite@workspace:examples/vite"
dependencies:
- "@carbon/react": ^1.40.0
+ "@carbon/react": ^1.41.0-rc.0
"@vitejs/plugin-react": 4.0.0
react: ^18.2.0
react-dom: ^18.2.0
@@ -32637,7 +32644,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "www@workspace:www"
dependencies:
- "@carbon/react": ^1.40.0
+ "@carbon/react": ^1.41.0-rc.0
"@octokit/core": ^4.0.0
"@octokit/plugin-retry": ^3.0.9
"@octokit/plugin-throttling": ^4.0.0
