| null;
/**
* In the case you want to control the dropdown selection entirely.
diff --git a/packages/react/src/components/Slug/Slug.stories.js b/packages/react/src/components/Slug/Slug.stories.js
index 5c2c7c4722b4..7a677b3a6dca 100644
--- a/packages/react/src/components/Slug/Slug.stories.js
+++ b/packages/react/src/components/Slug/Slug.stories.js
@@ -9,8 +9,10 @@
import React from 'react';
-import Slug from '.';
+import { Slug, SlugContent, SlugActions } from '.';
+import { View, FolderOpen, Folders } from '@carbon/icons-react';
import Button from '../Button';
+import { IconButton } from '../IconButton';
import mdx from './Slug.mdx';
import './slug-story.scss';
@@ -44,69 +46,225 @@ const content = AI was used to generate this content ;
export const Default = () => (
<>
-
+ {aiContent}
+
+
+ {aiContent}
+
+
+
+ {aiContent}
+
+
+
+
+
+
+
+ View literature
+
+
+
+
+
+ {aiContent}
+
+
+
+
+
+
+
+ View literature
+
+
+
+
+
+ {aiContent}
+
+
+
+
+
+
+
+ View literature
+
+
+
+
+
+ {aiContent}
+
+
+
+
+
+
+
+ View literature
+
+
+
+
+
+ {aiContent}
+
+
+
+
+
+
+
+ View literature
+
+
+
-
+ {content}
+
+
+ {content}
+
+
+ {content}
+
-
+
+ {aiContent}
+
+
+
+
+
+
+
+ View literature
+
+
+
+
+
+ {aiContent}
+
+
+
+
+
+
+
+ View literature
+
+
+
+
+
+ {aiContent}
+
+
+
+
+
+
+
+ View literature
+
+
+
-
+
+ {aiContent}
+
+
+
+
+
+
+
+ View literature
+
+
+
+
+
+ {aiContent}
+
+
+
+
+
+
+
+ View literature
+
+
+
+
+
+ {aiContent}
+
+
+
+
+
+
+
+ View literature
+
+
+
-
+ {content}
+
+
+ {content}
+
+
+ {content}
+
(
kind="inline"
dotType="hollow"
size="sm"
- aiTextLabel="Text goes here"
- slugContent={content}
- />
+ aiTextLabel="Text goes here">
+ {content}
+
{content}
+
{content}
+
);
-export const Playground = (args) => (
- <>
-
-
- Test
- Test
-
-);
+export const Playground = (args) => {
+ const { kind, dotType, showSlugActions = true } = args;
+
+ let renderedContent;
+ if (kind === 'hollow' || dotType === 'hollow') {
+ renderedContent = content;
+ } else {
+ renderedContent = (
+ <>
+
+
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
+
+
+
+
+
+
+
+ View literature
+
+ )}
+
+ );
+ }
+
+ return (
+ <>
+
+
+ {renderedContent}
+
+
+ Test
+ Test
+
+ );
+};
+
+Playground.argTypes = {
+ showSlugActions: {
+ control: {
+ type: 'boolean',
+ },
+ description: 'Playground only - toggle to show the callout toolbar',
+ },
+};
diff --git a/packages/react/src/components/Slug/index.js b/packages/react/src/components/Slug/index.js
index b93fe751c330..8e4be8cfbb37 100644
--- a/packages/react/src/components/Slug/index.js
+++ b/packages/react/src/components/Slug/index.js
@@ -4,7 +4,191 @@
* 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 };
+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';
+
+export const SlugContent = React.forwardRef(function SlugContent(
+ { children, className },
+ ref
+) {
+ const prefix = usePrefix();
+
+ const slugContentClasses = cx(className, {
+ [`${prefix}--slug-content`]: true,
+ });
+
+ return (
+
+ {children}
+
+ );
+});
+
+SlugContent.propTypes = {
+ /**
+ * Specify the content you want rendered inside the slug ToggleTip
+ */
+ children: PropTypes.node,
+
+ /**
+ * Specify an optional className to be added to the AI slug callout
+ */
+ className: PropTypes.string,
+};
+
+export const SlugActions = React.forwardRef(function SlugActions(
+ { children, className },
+ ref
+) {
+ const prefix = usePrefix();
+
+ const slugActionBarClasses = cx(className, {
+ [`${prefix}--slug-actions`]: true,
+ });
+
+ return (
+
+ {children}
+
+ );
+});
+
+SlugActions.propTypes = {
+ /**
+ * Specify the content you want rendered inside the slug callout toolbar
+ */
+ children: PropTypes.node,
+
+ /**
+ * Specify an optional className to be added to the AI slug toolbar
+ */
+ className: PropTypes.string,
+};
+
+export const Slug = React.forwardRef(function Slug(
+ {
+ aiText = 'AI',
+ aiTextLabel,
+ align,
+ autoAlign = false,
+ className,
+ dotType,
+ kind,
+ size = 'xs',
+ children,
+ },
+ 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}
+
+ )}
+
+ {children}
+
+
+ );
+});
+
+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 the content you want rendered inside the slug ToggleTip
+ */
+ children: PropTypes.node,
+
+ /**
+ * 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,
+};
diff --git a/packages/react/src/components/TreeView/TreeNode.js b/packages/react/src/components/TreeView/TreeNode.js
index b29a85c77f15..14852225d747 100644
--- a/packages/react/src/components/TreeView/TreeNode.js
+++ b/packages/react/src/components/TreeView/TreeNode.js
@@ -13,212 +13,220 @@ import { keys, match, matches } from '../../internal/keyboard';
import uniqueId from '../../tools/uniqueId';
import { usePrefix } from '../../internal/usePrefix';
-export default function TreeNode({
- active,
- children,
- className,
- depth,
- disabled,
- isExpanded,
- label,
- onNodeFocusEvent,
- onSelect: onNodeSelect,
- onToggle,
- onTreeSelect,
- renderIcon: Icon,
- selected,
- value,
- ...rest
-}) {
- const { current: id } = useRef(rest.id || uniqueId());
- const [expanded, setExpanded] = useState(isExpanded);
- const currentNode = useRef(null);
- const currentNodeLabel = useRef(null);
- const prefix = usePrefix();
- const nodesWithProps = React.Children.map(children, (node) => {
- if (React.isValidElement(node)) {
- return React.cloneElement(node, {
- active,
- depth: depth + 1,
- disabled,
- onTreeSelect,
- selected,
- tabIndex: (!node.props.disabled && -1) || null,
- });
- }
- });
- const isActive = active === id;
- const isSelected = selected.includes(id);
- const treeNodeClasses = classNames(className, `${prefix}--tree-node`, {
- [`${prefix}--tree-node--active`]: isActive,
- [`${prefix}--tree-node--disabled`]: disabled,
- [`${prefix}--tree-node--selected`]: isSelected,
- [`${prefix}--tree-node--with-icon`]: Icon,
- [`${prefix}--tree-leaf-node`]: !children,
- [`${prefix}--tree-parent-node`]: children,
- });
- const toggleClasses = classNames(`${prefix}--tree-parent-node__toggle-icon`, {
- [`${prefix}--tree-parent-node__toggle-icon--expanded`]: expanded,
- });
- function handleToggleClick(event) {
- if (disabled) {
- return;
- }
- onToggle?.(event, { id, isExpanded: !expanded, label, value });
- setExpanded(!expanded);
- }
- function handleClick(event) {
- event.stopPropagation();
- if (!disabled) {
- onTreeSelect?.(event, { id, label, value });
- onNodeSelect?.(event, { id, label, value });
- rest?.onClick?.(event);
- }
- }
- function handleKeyDown(event) {
- if (disabled) {
- return;
+const TreeNode = React.forwardRef(
+ (
+ {
+ active,
+ children,
+ className,
+ depth,
+ disabled,
+ isExpanded,
+ label,
+ onNodeFocusEvent,
+ onSelect: onNodeSelect,
+ onToggle,
+ onTreeSelect,
+ renderIcon: Icon,
+ selected,
+ value,
+ ...rest
+ },
+ ref
+ ) => {
+ const { current: id } = useRef(rest.id || uniqueId());
+ const [expanded, setExpanded] = useState(isExpanded);
+ const currentNode = useRef(null);
+ const currentNodeLabel = useRef(null);
+ const prefix = usePrefix();
+ const nodesWithProps = React.Children.map(children, (node) => {
+ if (React.isValidElement(node)) {
+ return React.cloneElement(node, {
+ active,
+ depth: depth + 1,
+ disabled,
+ onTreeSelect,
+ selected,
+ tabIndex: (!node.props.disabled && -1) || null,
+ });
+ }
+ });
+ const isActive = active === id;
+ const isSelected = selected.includes(id);
+ const treeNodeClasses = classNames(className, `${prefix}--tree-node`, {
+ [`${prefix}--tree-node--active`]: isActive,
+ [`${prefix}--tree-node--disabled`]: disabled,
+ [`${prefix}--tree-node--selected`]: isSelected,
+ [`${prefix}--tree-node--with-icon`]: Icon,
+ [`${prefix}--tree-leaf-node`]: !children,
+ [`${prefix}--tree-parent-node`]: children,
+ });
+ const toggleClasses = classNames(
+ `${prefix}--tree-parent-node__toggle-icon`,
+ {
+ [`${prefix}--tree-parent-node__toggle-icon--expanded`]: expanded,
+ }
+ );
+ function handleToggleClick(event) {
+ if (disabled) {
+ return;
+ }
+ onToggle?.(event, { id, isExpanded: !expanded, label, value });
+ setExpanded(!expanded);
}
- if (matches(event, [keys.ArrowLeft, keys.ArrowRight, keys.Enter])) {
+ function handleClick(event) {
event.stopPropagation();
+ if (!disabled) {
+ onTreeSelect?.(event, { id, label, value });
+ onNodeSelect?.(event, { id, label, value });
+ rest?.onClick?.(event);
+ }
}
- if (match(event, keys.ArrowLeft)) {
- const findParentTreeNode = (node) => {
- if (node.classList.contains(`${prefix}--tree-parent-node`)) {
- return node;
+ function handleKeyDown(event) {
+ if (disabled) {
+ return;
+ }
+ if (matches(event, [keys.ArrowLeft, keys.ArrowRight, keys.Enter])) {
+ event.stopPropagation();
+ }
+ if (match(event, keys.ArrowLeft)) {
+ const findParentTreeNode = (node) => {
+ if (node.classList.contains(`${prefix}--tree-parent-node`)) {
+ return node;
+ }
+ if (node.classList.contains(`${prefix}--tree`)) {
+ return null;
+ }
+ return findParentTreeNode(node.parentNode);
+ };
+ if (children && expanded) {
+ onToggle?.(event, { id, isExpanded: false, label, value });
+ setExpanded(false);
+ } else {
+ /**
+ * When focus is on a leaf node or a closed parent node, move focus to
+ * its parent node (unless its depth is level 1)
+ */
+ findParentTreeNode(currentNode.current.parentNode)?.focus();
}
- if (node.classList.contains(`${prefix}--tree`)) {
- return null;
+ }
+ if (children && match(event, keys.ArrowRight)) {
+ if (expanded) {
+ /**
+ * When focus is on an expanded parent node, move focus to the first
+ * child node
+ */
+ currentNode.current.lastChild.firstChild.focus();
+ } else {
+ onToggle?.(event, { id, isExpanded: true, label, value });
+ setExpanded(true);
}
- return findParentTreeNode(node.parentNode);
- };
- if (children && expanded) {
- onToggle?.(event, { id, isExpanded: false, label, value });
- setExpanded(false);
- } else {
- /**
- * When focus is on a leaf node or a closed parent node, move focus to
- * its parent node (unless its depth is level 1)
- */
- findParentTreeNode(currentNode.current.parentNode)?.focus();
}
- }
- if (children && match(event, keys.ArrowRight)) {
- if (expanded) {
- /**
- * When focus is on an expanded parent node, move focus to the first
- * child node
- */
- currentNode.current.lastChild.firstChild.focus();
- } else {
- onToggle?.(event, { id, isExpanded: true, label, value });
- setExpanded(true);
+ if (matches(event, [keys.Enter, keys.Space])) {
+ event.preventDefault();
+ handleClick(event);
}
+ rest?.onKeyDown?.(event);
}
- if (matches(event, [keys.Enter, keys.Space])) {
- event.preventDefault();
- handleClick(event);
- }
- rest?.onKeyDown?.(event);
- }
- function handleFocusEvent(event) {
- if (event.type === 'blur') {
- rest?.onBlur?.(event);
- }
- if (event.type === 'focus') {
- rest?.onFocus?.(event);
- }
- onNodeFocusEvent?.(event);
- }
-
- useEffect(() => {
- /**
- * Negative margin shifts node to align with the left side boundary of the
- * tree
- * Dynamically calculate padding to recreate tree node indentation
- * - parent nodes with icon have (depth + 1rem + depth * 0.5) left padding
- * - parent nodes have (depth + 1rem) left padding
- * - leaf nodes have (depth + 2.5rem) left padding without icons (because
- * of expand icon + spacing)
- * - leaf nodes have (depth + 2rem + depth * 0.5) left padding with icons (because of
- * reduced spacing between the expand icon and the node icon + label)
- */
- const calcOffset = () => {
- // parent node with icon
- if (children && Icon) {
- return depth + 1 + depth * 0.5;
- }
- // parent node without icon
- if (children) {
- return depth + 1;
+ function handleFocusEvent(event) {
+ if (event.type === 'blur') {
+ rest?.onBlur?.(event);
}
- // leaf node with icon
- if (Icon) {
- return depth + 2 + depth * 0.5;
+ if (event.type === 'focus') {
+ rest?.onFocus?.(event);
}
- // leaf node without icon
- return depth + 2.5;
- };
-
- if (currentNodeLabel.current) {
- currentNodeLabel.current.style.marginInlineStart = `-${calcOffset()}rem`;
- currentNodeLabel.current.style.paddingInlineStart = `${calcOffset()}rem`;
+ onNodeFocusEvent?.(event);
}
- // sync props and state
- setExpanded(isExpanded);
- }, [children, depth, Icon, isExpanded]);
+ useEffect(() => {
+ /**
+ * Negative margin shifts node to align with the left side boundary of the
+ * tree
+ * Dynamically calculate padding to recreate tree node indentation
+ * - parent nodes with icon have (depth + 1rem + depth * 0.5) left padding
+ * - parent nodes have (depth + 1rem) left padding
+ * - leaf nodes have (depth + 2.5rem) left padding without icons (because
+ * of expand icon + spacing)
+ * - leaf nodes have (depth + 2rem + depth * 0.5) left padding with icons (because of
+ * reduced spacing between the expand icon and the node icon + label)
+ */
+ const calcOffset = () => {
+ // parent node with icon
+ if (children && Icon) {
+ return depth + 1 + depth * 0.5;
+ }
+ // parent node without icon
+ if (children) {
+ return depth + 1;
+ }
+ // leaf node with icon
+ if (Icon) {
+ return depth + 2 + depth * 0.5;
+ }
+ // leaf node without icon
+ return depth + 2.5;
+ };
+
+ if (currentNodeLabel.current) {
+ currentNodeLabel.current.style.marginInlineStart = `-${calcOffset()}rem`;
+ currentNodeLabel.current.style.paddingInlineStart = `${calcOffset()}rem`;
+ }
- const treeNodeProps = {
- ...rest,
- ['aria-current']: isActive || null,
- ['aria-selected']: disabled ? null : isSelected,
- ['aria-disabled']: disabled,
- className: treeNodeClasses,
- id,
- onBlur: handleFocusEvent,
- onClick: handleClick,
- onFocus: handleFocusEvent,
- onKeyDown: handleKeyDown,
- ref: currentNode,
- role: 'treeitem',
- };
+ // sync props and state
+ setExpanded(isExpanded);
+ }, [children, depth, Icon, isExpanded]);
- if (!children) {
+ const treeNodeProps = {
+ ...rest,
+ ['aria-current']: isActive || null,
+ ['aria-selected']: disabled ? null : isSelected,
+ ['aria-disabled']: disabled,
+ className: treeNodeClasses,
+ id,
+ onBlur: handleFocusEvent,
+ onClick: handleClick,
+ onFocus: handleFocusEvent,
+ onKeyDown: handleKeyDown,
+ ref: currentNode,
+ role: 'treeitem',
+ };
+
+ if (!children) {
+ return (
+
+
+ {Icon &&
+
+ );
+ }
return (
-
+ // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+
- {Icon &&
+
+
+ {Icon &&
+ {expanded && (
+
+ )}
);
}
- return (
- // eslint-disable-next-line jsx-a11y/role-supports-aria-props
-
-
- {/* https://github.com/carbon-design-system/carbon/pull/6008#issuecomment-675738670 */}
- {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-
-
-
- {Icon &&
-
- {expanded && (
-
- )}
-
- );
-}
+);
TreeNode.propTypes = {
/**
@@ -294,3 +302,6 @@ TreeNode.propTypes = {
*/
value: PropTypes.string,
};
+
+TreeNode.displayName = 'TreeNode';
+export default TreeNode;
diff --git a/packages/react/src/components/UIShell/SideNavMenu.js b/packages/react/src/components/UIShell/SideNavMenu.js
deleted file mode 100644
index 3595eea19b3d..000000000000
--- a/packages/react/src/components/UIShell/SideNavMenu.js
+++ /dev/null
@@ -1,172 +0,0 @@
-/**
- * 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 { ChevronDown } from '@carbon/icons-react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useContext, useState } from 'react';
-import SideNavIcon from './SideNavIcon';
-import { keys, match } from '../../internal/keyboard';
-import { usePrefix } from '../../internal/usePrefix';
-import { SideNavContext } from './SideNav';
-
-const SideNavMenu = React.forwardRef(function SideNavMenu(props, ref) {
- const {
- className: customClassName,
- children,
- defaultExpanded = false,
- isActive = false,
- large = false,
- renderIcon: IconElement,
- isSideNavExpanded,
- tabIndex,
- title,
- } = props;
- const isRail = useContext(SideNavContext);
- const prefix = usePrefix();
- const [isExpanded, setIsExpanded] = useState(defaultExpanded);
- const [prevExpanded, setPrevExpanded] = useState(defaultExpanded);
- const className = cx({
- [`${prefix}--side-nav__item`]: true,
- [`${prefix}--side-nav__item--active`]:
- isActive || (hasActiveChild(children) && !isExpanded),
- [`${prefix}--side-nav__item--icon`]: IconElement,
- [`${prefix}--side-nav__item--large`]: large,
- [customClassName]: !!customClassName,
- });
-
- if (isSideNavExpanded === false && isExpanded === true) {
- setIsExpanded(false);
- setPrevExpanded(true);
- } else if (isSideNavExpanded === true && prevExpanded === true) {
- setIsExpanded(true);
- setPrevExpanded(false);
- }
-
- return (
- // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
- {
- if (match(event, keys.Escape)) {
- setIsExpanded(false);
- }
- }}>
- {
- setIsExpanded(!isExpanded);
- }}
- ref={ref}
- type="button"
- tabIndex={
- tabIndex === undefined
- ? !isSideNavExpanded && !isRail
- ? -1
- : 0
- : tabIndex
- }>
- {IconElement && (
-
-
- )}
-
- {title}
-
-
-
-
-
-
- );
-});
-SideNavMenu.displayName = 'SideNavMenu';
-SideNavMenu.propTypes = {
- /**
- * Provide 's inside of the `SideNavMenu`
- */
- children: PropTypes.node,
-
- /**
- * Provide an optional class to be applied to the containing node
- */
- className: PropTypes.string,
-
- /**
- * Specify whether the menu should default to expanded. By default, it will
- * be closed.
- */
- defaultExpanded: PropTypes.bool,
-
- /**
- * Specify whether the `SideNavMenu` is "active". `SideNavMenu` should be
- * considered active if one of its menu items are a link for the current
- * page.
- */
- isActive: PropTypes.bool,
-
- /**
- * Property to indicate if the side nav container is open (or not). Use to
- * keep local state and styling in step with the SideNav expansion state.
- */
- isSideNavExpanded: PropTypes.bool,
-
- /**
- * Specify if this is a large variation of the SideNavMenu
- */
- large: PropTypes.bool,
-
- /**
- * Pass in a custom icon to render next to the `SideNavMenu` title
- */
- renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
- /**
- * Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
- */
- tabIndex: PropTypes.number,
-
- /**
- * Provide the text for the overall menu name
- */
- title: PropTypes.string.isRequired,
-};
-
-function hasActiveChild(children) {
- // if we have children, either a single or multiple, find if it is active
- if (Array.isArray(children)) {
- return children.some((child) => {
- if (!child.props) {
- return false;
- }
-
- if (child.props.isActive === true) {
- return true;
- }
-
- if (child.props['aria-current']) {
- return true;
- }
-
- return false;
- });
- }
-
- if (children.props) {
- if (children.props.isActive === true || children.props['aria-current']) {
- return true;
- }
- }
-
- return false;
-}
-
-export default SideNavMenu;
-export { SideNavMenu };
diff --git a/packages/react/src/components/UIShell/SideNavMenu.tsx b/packages/react/src/components/UIShell/SideNavMenu.tsx
index cfee364113fa..bcdb6869fe1f 100644
--- a/packages/react/src/components/UIShell/SideNavMenu.tsx
+++ b/packages/react/src/components/UIShell/SideNavMenu.tsx
@@ -132,9 +132,7 @@ const SideNavMenu = React.forwardRef(
- {title}
-
+ {title}
diff --git a/packages/react/src/components/UIShell/SideNavMenuItem.js b/packages/react/src/components/UIShell/SideNavMenuItem.js
deleted file mode 100644
index 352732ec7de6..000000000000
--- a/packages/react/src/components/UIShell/SideNavMenuItem.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * 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 SideNavLinkText from './SideNavLinkText';
-import Link from './Link';
-import { usePrefix } from '../../internal/usePrefix';
-
-const SideNavMenuItem = React.forwardRef(function SideNavMenuItem(props, ref) {
- const prefix = usePrefix();
- const { children, className: customClassName, isActive, ...rest } = props;
- const className = cx(`${prefix}--side-nav__menu-item`, customClassName);
- const linkClassName = cx({
- [`${prefix}--side-nav__link`]: true,
- [`${prefix}--side-nav__link--current`]: isActive,
- });
-
- return (
-
- {children}
-
-
- );
-});
-
-SideNavMenuItem.displayName = 'SideNavMenuItem';
-SideNavMenuItem.propTypes = {
- /**
- * Specify the children to be rendered inside of the `SideNavMenuItem`
- */
- children: PropTypes.node,
-
- /**
- * Provide an optional class to be applied to the containing node
- */
- className: PropTypes.string,
-
- /**
- * Optionally specify whether the link is "active". An active link is one that
- * has an href that is the same as the current page. Can also pass in
- * `aria-current="page"`, as well.
- */
- isActive: PropTypes.bool,
-};
-
-export default SideNavMenuItem;
diff --git a/packages/react/src/components/UIShell/SideNavMenuItem.tsx b/packages/react/src/components/UIShell/SideNavMenuItem.tsx
new file mode 100644
index 000000000000..322971d3638d
--- /dev/null
+++ b/packages/react/src/components/UIShell/SideNavMenuItem.tsx
@@ -0,0 +1,74 @@
+/**
+ * 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, { ElementType, ForwardedRef, HTMLAttributes, Ref } from 'react';
+import SideNavLinkText from './SideNavLinkText';
+import Link from './Link';
+import { usePrefix } from '../../internal/usePrefix';
+
+interface SideNavMenuItemProps extends HTMLAttributes {
+ /**
+ * Specify the children to be rendered inside of the `SideNavMenuItem`
+ */
+ children?: React.ReactNode;
+
+ /**
+ * Provide an optional class to be applied to the containing node
+ */
+ className?: string;
+
+ /**
+ * Optionally specify whether the link is "active". An active link is one that
+ * has an href that is the same as the current page. Can also pass in
+ * `aria-current="page"`, as well.
+ */
+ isActive?: boolean;
+}
+
+const SideNavMenuItem = React.forwardRef(
+ function SideNavMenuItem(props, ref: ForwardedRef) {
+ const prefix = usePrefix();
+ const { children, className: customClassName, isActive, ...rest } = props;
+ const className = cx(`${prefix}--side-nav__menu-item`, customClassName);
+ const linkClassName = cx({
+ [`${prefix}--side-nav__link`]: true,
+ [`${prefix}--side-nav__link--current`]: isActive,
+ });
+
+ return (
+
+ {children}
+
+
+ );
+ }
+);
+
+SideNavMenuItem.displayName = 'SideNavMenuItem';
+SideNavMenuItem.propTypes = {
+ /**
+ * Specify the children to be rendered inside of the `SideNavMenuItem`
+ */
+ children: PropTypes.node,
+
+ /**
+ * Provide an optional class to be applied to the containing node
+ */
+ className: PropTypes.string,
+
+ /**
+ * Optionally specify whether the link is "active". An active link is one that
+ * has an href that is the same as the current page. Can also pass in
+ * `aria-current="page"`, as well.
+ */
+ isActive: PropTypes.bool,
+};
+
+export default SideNavMenuItem;
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
index 14e20ee01f13..774125a677ff 100644
--- a/packages/react/src/index.js
+++ b/packages/react/src/index.js
@@ -298,4 +298,8 @@ 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';
+export {
+ Slug as unstable__Slug,
+ SlugContent as unstable__SlugContent,
+ SlugActions as unstable__SlugActions,
+} from './components/Slug';
diff --git a/packages/styles/scss/components/slider/_slider.scss b/packages/styles/scss/components/slider/_slider.scss
index 67ff6f1f6c60..212a6c8fca27 100644
--- a/packages/styles/scss/components/slider/_slider.scss
+++ b/packages/styles/scss/components/slider/_slider.scss
@@ -146,7 +146,7 @@
block-size: convert.to-rem(2px);
content: '';
inline-size: convert.to-rem(6px);
- inset-block-start: calc(50% - #{convert.to-rem(2px) / 2});
+ inset-block-start: calc(50% - #{convert.to-rem(2px) * 0.5});
inset-inline-end: 0;
}
diff --git a/packages/styles/scss/components/slug/_slug.scss b/packages/styles/scss/components/slug/_slug.scss
index fd625e4a4f0f..21fde4e37099 100644
--- a/packages/styles/scss/components/slug/_slug.scss
+++ b/packages/styles/scss/components/slug/_slug.scss
@@ -309,7 +309,7 @@ $sizes: (
}
// Slug callout styles
- .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--popover-content {
+ .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--slug-content {
border: 1px solid $border-subtle;
border-radius: 16px;
// 84px seems to make this fully opaque?
@@ -334,13 +334,44 @@ $sizes: (
min-inline-size: convert.to-rem(280px);
}
- .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--popover-caret {
+ .#{$prefix}--slug.#{$prefix}--slug--enabled
+ > .#{$prefix}--toggletip
+ > .#{$prefix}--popover
+ > .#{$prefix}--popover-caret {
background: $border-subtle;
}
.#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--toggletip-content {
+ // This sets the max size to the size of the action bar with 3 buttons
+ max-inline-size: convert.to-rem(334px);
padding-block-end: convert.to-rem(80px);
padding-block-start: convert.to-rem(32px);
padding-inline: convert.to-rem(32px);
}
+
+ .#{$prefix}--slug.#{$prefix}--slug--enabled .#{$prefix}--slug-actions {
+ position: absolute;
+ justify-content: flex-end;
+ background: $layer-accent;
+ border-end-end-radius: convert.to-rem(15px);
+ border-end-start-radius: convert.to-rem(15px);
+ column-gap: 0;
+ inline-size: 100%;
+ inset-block-end: 0;
+ inset-inline-end: 0;
+ }
+
+ .#{$prefix}--slug.#{$prefix}--slug--enabled
+ .#{$prefix}--slug-actions
+ .#{$prefix}--btn:focus {
+ border-color: $focus;
+ box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $background;
+ }
+
+ .#{$prefix}--slug.#{$prefix}--slug--enabled
+ .#{$prefix}--slug-actions
+ .#{$prefix}--btn--primary {
+ order: 1;
+ border-end-end-radius: convert.to-rem(16px);
+ }
}
diff --git a/yarn.lock b/yarn.lock
index 9cd9584370a7..ab018e86bac6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -78,12 +78,13 @@ __metadata:
languageName: node
linkType: hard
-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.22.5, @babel/code-frame@npm:^7.8.3":
- version: 7.22.5
- resolution: "@babel/code-frame@npm:7.22.5"
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.22.13, @babel/code-frame@npm:^7.22.5, @babel/code-frame@npm:^7.8.3":
+ version: 7.22.13
+ resolution: "@babel/code-frame@npm:7.22.13"
dependencies:
- "@babel/highlight": ^7.22.5
- checksum: cfe804f518f53faaf9a1d3e0f9f74127ab9a004912c3a16fda07fb6a633393ecb9918a053cb71804204c1b7ec3d49e1699604715e2cfb0c9f7bc4933d324ebb6
+ "@babel/highlight": ^7.22.13
+ chalk: ^2.4.2
+ checksum: 22e342c8077c8b77eeb11f554ecca2ba14153f707b85294fcf6070b6f6150aae88a7b7436dd88d8c9289970585f3fe5b9b941c5aa3aa26a6d5a8ef3f292da058
languageName: node
linkType: hard
@@ -131,15 +132,15 @@ __metadata:
languageName: node
linkType: hard
-"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.18.2, @babel/generator@npm:^7.22.0, @babel/generator@npm:^7.22.7, @babel/generator@npm:^7.22.9, @babel/generator@npm:^7.7.2":
- version: 7.22.9
- resolution: "@babel/generator@npm:7.22.9"
+"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.18.2, @babel/generator@npm:^7.22.0, @babel/generator@npm:^7.22.9, @babel/generator@npm:^7.23.0, @babel/generator@npm:^7.7.2":
+ version: 7.23.0
+ resolution: "@babel/generator@npm:7.23.0"
dependencies:
- "@babel/types": ^7.22.5
+ "@babel/types": ^7.23.0
"@jridgewell/gen-mapping": ^0.3.2
"@jridgewell/trace-mapping": ^0.3.17
jsesc: ^2.5.1
- checksum: 7c9d2c58b8d5ac5e047421a6ab03ec2ff5d9a5ff2c2212130a0055e063ac349e0b19d435537d6886c999771aef394832e4f54cd9fc810100a7f23d982f6af06b
+ checksum: 8efe24adad34300f1f8ea2add420b28171a646edc70f2a1b3e1683842f23b8b7ffa7e35ef0119294e1901f45bfea5b3dc70abe1f10a1917ccdfb41bed69be5f1
languageName: node
linkType: hard
@@ -239,20 +240,20 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-environment-visitor@npm:^7.22.5":
- version: 7.22.5
- resolution: "@babel/helper-environment-visitor@npm:7.22.5"
- checksum: 248532077d732a34cd0844eb7b078ff917c3a8ec81a7f133593f71a860a582f05b60f818dc5049c2212e5baa12289c27889a4b81d56ef409b4863db49646c4b1
+"@babel/helper-environment-visitor@npm:^7.22.20, @babel/helper-environment-visitor@npm:^7.22.5":
+ version: 7.22.20
+ resolution: "@babel/helper-environment-visitor@npm:7.22.20"
+ checksum: d80ee98ff66f41e233f36ca1921774c37e88a803b2f7dca3db7c057a5fea0473804db9fb6729e5dbfd07f4bed722d60f7852035c2c739382e84c335661590b69
languageName: node
linkType: hard
-"@babel/helper-function-name@npm:^7.22.5":
- version: 7.22.5
- resolution: "@babel/helper-function-name@npm:7.22.5"
+"@babel/helper-function-name@npm:^7.22.5, @babel/helper-function-name@npm:^7.23.0":
+ version: 7.23.0
+ resolution: "@babel/helper-function-name@npm:7.23.0"
dependencies:
- "@babel/template": ^7.22.5
- "@babel/types": ^7.22.5
- checksum: 6b1f6ce1b1f4e513bf2c8385a557ea0dd7fa37971b9002ad19268ca4384bbe90c09681fe4c076013f33deabc63a53b341ed91e792de741b4b35e01c00238177a
+ "@babel/template": ^7.22.15
+ "@babel/types": ^7.23.0
+ checksum: e44542257b2d4634a1f979244eb2a4ad8e6d75eb6761b4cfceb56b562f7db150d134bc538c8e6adca3783e3bc31be949071527aa8e3aab7867d1ad2d84a26e10
languageName: node
linkType: hard
@@ -374,10 +375,10 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-validator-identifier@npm:^7.22.5":
- version: 7.22.5
- resolution: "@babel/helper-validator-identifier@npm:7.22.5"
- checksum: 7f0f30113474a28298c12161763b49de5018732290ca4de13cdaefd4fd0d635a6fe3f6686c37a02905fb1e64f21a5ee2b55140cf7b070e729f1bd66866506aea
+"@babel/helper-validator-identifier@npm:^7.22.20, @babel/helper-validator-identifier@npm:^7.22.5":
+ version: 7.22.20
+ resolution: "@babel/helper-validator-identifier@npm:7.22.20"
+ checksum: 136412784d9428266bcdd4d91c32bcf9ff0e8d25534a9d94b044f77fe76bc50f941a90319b05aafd1ec04f7d127cd57a179a3716009ff7f3412ef835ada95bdc
languageName: node
linkType: hard
@@ -410,14 +411,14 @@ __metadata:
languageName: node
linkType: hard
-"@babel/highlight@npm:^7.22.5":
- version: 7.22.5
- resolution: "@babel/highlight@npm:7.22.5"
+"@babel/highlight@npm:^7.22.13":
+ version: 7.22.20
+ resolution: "@babel/highlight@npm:7.22.20"
dependencies:
- "@babel/helper-validator-identifier": ^7.22.5
- chalk: ^2.0.0
+ "@babel/helper-validator-identifier": ^7.22.20
+ chalk: ^2.4.2
js-tokens: ^4.0.0
- checksum: f61ae6de6ee0ea8d9b5bcf2a532faec5ab0a1dc0f7c640e5047fc61630a0edb88b18d8c92eb06566d30da7a27db841aca11820ecd3ebe9ce514c9350fbed39c4
+ checksum: 84bd034dca309a5e680083cd827a766780ca63cef37308404f17653d32366ea76262bd2364b2d38776232f2d01b649f26721417d507e8b4b6da3e4e739f6d134
languageName: node
linkType: hard
@@ -439,12 +440,12 @@ __metadata:
languageName: node
linkType: hard
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.22.0, @babel/parser@npm:^7.22.5, @babel/parser@npm:^7.22.7":
- version: 7.22.7
- resolution: "@babel/parser@npm:7.22.7"
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.22.0, @babel/parser@npm:^7.22.15, @babel/parser@npm:^7.22.7, @babel/parser@npm:^7.23.0":
+ version: 7.23.0
+ resolution: "@babel/parser@npm:7.23.0"
bin:
parser: ./bin/babel-parser.js
- checksum: 02209ddbd445831ee8bf966fdf7c29d189ed4b14343a68eb2479d940e7e3846340d7cc6bd654a5f3d87d19dc84f49f50a58cf9363bee249dc5409ff3ba3dab54
+ checksum: 453fdf8b9e2c2b7d7b02139e0ce003d1af21947bbc03eb350fb248ee335c9b85e4ab41697ddbdd97079698de825a265e45a0846bb2ed47a2c7c1df833f42a354
languageName: node
linkType: hard
@@ -1756,43 +1757,43 @@ __metadata:
languageName: node
linkType: hard
-"@babel/template@npm:^7.16.7, @babel/template@npm:^7.22.5, @babel/template@npm:^7.3.3":
- version: 7.22.5
- resolution: "@babel/template@npm:7.22.5"
+"@babel/template@npm:^7.16.7, @babel/template@npm:^7.22.15, @babel/template@npm:^7.22.5, @babel/template@npm:^7.3.3":
+ version: 7.22.15
+ resolution: "@babel/template@npm:7.22.15"
dependencies:
- "@babel/code-frame": ^7.22.5
- "@babel/parser": ^7.22.5
- "@babel/types": ^7.22.5
- checksum: c5746410164039aca61829cdb42e9a55410f43cace6f51ca443313f3d0bdfa9a5a330d0b0df73dc17ef885c72104234ae05efede37c1cc8a72dc9f93425977a3
+ "@babel/code-frame": ^7.22.13
+ "@babel/parser": ^7.22.15
+ "@babel/types": ^7.22.15
+ checksum: 1f3e7dcd6c44f5904c184b3f7fe280394b191f2fed819919ffa1e529c259d5b197da8981b6ca491c235aee8dbad4a50b7e31304aa531271cb823a4a24a0dd8fd
languageName: node
linkType: hard
"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.22.0, @babel/traverse@npm:^7.22.6, @babel/traverse@npm:^7.22.8, @babel/traverse@npm:^7.7.2":
- version: 7.22.8
- resolution: "@babel/traverse@npm:7.22.8"
+ version: 7.23.2
+ resolution: "@babel/traverse@npm:7.23.2"
dependencies:
- "@babel/code-frame": ^7.22.5
- "@babel/generator": ^7.22.7
- "@babel/helper-environment-visitor": ^7.22.5
- "@babel/helper-function-name": ^7.22.5
+ "@babel/code-frame": ^7.22.13
+ "@babel/generator": ^7.23.0
+ "@babel/helper-environment-visitor": ^7.22.20
+ "@babel/helper-function-name": ^7.23.0
"@babel/helper-hoist-variables": ^7.22.5
"@babel/helper-split-export-declaration": ^7.22.6
- "@babel/parser": ^7.22.7
- "@babel/types": ^7.22.5
+ "@babel/parser": ^7.23.0
+ "@babel/types": ^7.23.0
debug: ^4.1.0
globals: ^11.1.0
- checksum: a381369bc3eedfd13ed5fef7b884657f1c29024ea7388198149f0edc34bd69ce3966e9f40188d15f56490a5e12ba250ccc485f2882b53d41b054fccefb233e33
+ checksum: 26a1eea0dde41ab99dde8b9773a013a0dc50324e5110a049f5d634e721ff08afffd54940b3974a20308d7952085ac769689369e9127dea655f868c0f6e1ab35d
languageName: node
linkType: hard
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.12.6, @babel/types@npm:^7.18.4, @babel/types@npm:^7.2.0, @babel/types@npm:^7.22.0, @babel/types@npm:^7.22.5, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
- version: 7.22.5
- resolution: "@babel/types@npm:7.22.5"
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.12.6, @babel/types@npm:^7.18.4, @babel/types@npm:^7.2.0, @babel/types@npm:^7.22.0, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
+ version: 7.23.0
+ resolution: "@babel/types@npm:7.23.0"
dependencies:
"@babel/helper-string-parser": ^7.22.5
- "@babel/helper-validator-identifier": ^7.22.5
+ "@babel/helper-validator-identifier": ^7.22.20
to-fast-properties: ^2.0.0
- checksum: c13a9c1dc7d2d1a241a2f8363540cb9af1d66e978e8984b400a20c4f38ba38ca29f06e26a0f2d49a70bad9e57615dac09c35accfddf1bb90d23cd3e0a0bab892
+ checksum: 215fe04bd7feef79eeb4d33374b39909ce9cad1611c4135a4f7fdf41fe3280594105af6d7094354751514625ea92d0875aba355f53e86a92600f290e77b0e604
languageName: node
linkType: hard
@@ -10878,7 +10879,7 @@ __metadata:
languageName: node
linkType: hard
-"chalk@npm:^2.0.0, chalk@npm:^2.4.1, chalk@npm:^2.4.2":
+"chalk@npm:^2.4.1, chalk@npm:^2.4.2":
version: 2.4.2
resolution: "chalk@npm:2.4.2"
dependencies:
