@primer/react
Version:
An implementation of GitHub's Primer Design System using React
83 lines (80 loc) • 4.03 kB
JavaScript
import React from 'react';
import styled from 'styled-components';
import sx from '../sx.js';
import { SEGMENTED_CONTROL_CSS_MODULES_FEATURE_FLAG, getSegmentedControlListItemStyles, getSegmentedControlButtonStyles } from './getSegmentedControlStyles.js';
import Box from '../Box/Box.js';
import { defaultSxProp } from '../utils/defaultSxProp.js';
import { isElement } from 'react-is';
import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles.js';
import '../FeatureFlags/FeatureFlags.js';
import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
import '../FeatureFlags/DefaultFeatureFlags.js';
import classes from './SegmentedControl.module.css.js';
import { clsx } from 'clsx';
import { toggleStyledComponent } from '../internal/utils/toggleStyledComponent.js';
import { Tooltip } from '../TooltipV2/Tooltip.js';
import merge from 'deepmerge';
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const SegmentedControlIconButtonStyled = toggleStyledComponent(SEGMENTED_CONTROL_CSS_MODULES_FEATURE_FLAG, 'button', styled.button.withConfig({
displayName: "SegmentedControlIconButton__SegmentedControlIconButtonStyled",
componentId: "sc-oxh6a9-0"
})(["", ";", ";"], getGlobalFocusStyles('-1px'), sx));
const SegmentedControlIconButton = ({
'aria-label': ariaLabel,
icon: Icon,
selected,
sx: sxProp = defaultSxProp,
className,
description,
tooltipDirection,
...rest
}) => {
const enabled = useFeatureFlag(SEGMENTED_CONTROL_CSS_MODULES_FEATURE_FLAG);
const mergedSx = enabled ? sxProp : merge({
width: '32px',
// TODO: use primitive `control.medium.size` when it is available
...getSegmentedControlListItemStyles()
}, sxProp);
const tooltipFlagEnabled = useFeatureFlag('primer_react_segmented_control_tooltip');
if (tooltipFlagEnabled) {
return /*#__PURE__*/React.createElement(Box, {
as: "li",
sx: mergedSx,
className: clsx(enabled && classes.Item, className),
"data-selected": selected || undefined
}, /*#__PURE__*/React.createElement(Tooltip, {
type: description ? undefined : 'label',
text: description ? description : ariaLabel,
direction: tooltipDirection
}, /*#__PURE__*/React.createElement(SegmentedControlIconButtonStyled, _extends({
"aria-current": selected
// If description is provided, we will use the tooltip to describe the button, so we need to keep the aria-label to label the button.
,
"aria-label": description ? ariaLabel : undefined,
sx: enabled ? undefined : getSegmentedControlButtonStyles({
selected
}),
className: clsx(enabled && classes.Button, enabled && classes.IconButton)
}, rest), /*#__PURE__*/React.createElement("span", {
className: clsx(enabled ? classes.Content : 'segmentedControl-content')
}, isElement(Icon) ? Icon : /*#__PURE__*/React.createElement(Icon, null)))));
} else {
// This can be removed when primer_react_segmented_control_tooltip feature flag is GA-ed.
return /*#__PURE__*/React.createElement(Box, {
as: "li",
sx: mergedSx,
className: clsx(enabled && classes.Item, className),
"data-selected": selected || undefined
}, /*#__PURE__*/React.createElement(SegmentedControlIconButtonStyled, _extends({
"aria-label": ariaLabel,
"aria-current": selected,
sx: enabled ? undefined : getSegmentedControlButtonStyles({
selected
}),
className: clsx(enabled && classes.Button, enabled && classes.IconButton)
}, rest), /*#__PURE__*/React.createElement("span", {
className: clsx(enabled ? classes.Content : 'segmentedControl-content')
}, isElement(Icon) ? Icon : /*#__PURE__*/React.createElement(Icon, null))));
}
};
export { SegmentedControlIconButton, SegmentedControlIconButton as default };