UNPKG

@wordpress/components

Version:
76 lines (66 loc) 2.05 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = exports.ToggleGroupControlOptionIcon = void 0; var _element = require("@wordpress/element"); var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _toggleGroupControlOptionBase = require("../toggle-group-control-option-base"); var _icon = _interopRequireDefault(require("../../icon")); /** * External dependencies */ /** * WordPress dependencies */ function UnforwardedToggleGroupControlOptionIcon(props, ref) { const { icon, label, ...restProps } = props; return (0, _element.createElement)(_toggleGroupControlOptionBase.ToggleGroupControlOptionBase, (0, _extends2.default)({}, restProps, { isIcon: true, "aria-label": label, showTooltip: true, ref: ref }), (0, _element.createElement)(_icon.default, { icon: icon })); } /** * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a * child of `ToggleGroupControl` and displays an icon. * * ```jsx * * import { * __experimentalToggleGroupControl as ToggleGroupControl, * __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, * from '@wordpress/components'; * import { formatLowercase, formatUppercase } from '@wordpress/icons'; * * function Example() { * return ( * <ToggleGroupControl> * <ToggleGroupControlOptionIcon * value="uppercase" * label="Uppercase" * icon={ formatUppercase } * /> * <ToggleGroupControlOptionIcon * value="lowercase" * label="Lowercase" * icon={ formatLowercase } * /> * </ToggleGroupControl> * ); * } * ``` */ const ToggleGroupControlOptionIcon = (0, _element.forwardRef)(UnforwardedToggleGroupControlOptionIcon); exports.ToggleGroupControlOptionIcon = ToggleGroupControlOptionIcon; var _default = ToggleGroupControlOptionIcon; exports.default = _default; //# sourceMappingURL=component.js.map