@shopify/polaris/dist/esm/components/Labelled/Labelled.js

Shopify’s product component library

import { objectWithoutProperties as _objectWithoutProperties } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React$1 from 'react';
import { classNames } from '../../utilities/css.js';
import { buttonFrom } from '../Button/utils.js';
import { Label as Label$1 } from '../Label/Label.js';
export { labelID } from '../Label/Label.js';
import { InlineError as InlineError$1 } from '../InlineError/InlineError.js';
import styles from './Labelled.scss.js';

function Labelled(_ref) {
  var {
    id,
    label,
    error,
    action,
    helpText,
    children,
    labelHidden
  } = _ref,
      rest = _objectWithoutProperties(_ref, ["id", "label", "error", "action", "helpText", "children", "labelHidden"]);

  var className = classNames(labelHidden && styles.hidden);
  var actionMarkup = action ? /*#__PURE__*/React$1.createElement("div", {
    className: styles.Action
  }, buttonFrom(action, {
    plain: true
  })) : null;
  var helpTextMarkup = helpText ? /*#__PURE__*/React$1.createElement("div", {
    className: styles.HelpText,
    id: helpTextID(id)
  }, helpText) : null;
  var errorMarkup = error && typeof error !== 'boolean' && /*#__PURE__*/React$1.createElement("div", {
    className: styles.Error
  }, /*#__PURE__*/React$1.createElement(InlineError$1, {
    message: error,
    fieldID: id
  }));
  var labelMarkup = label ? /*#__PURE__*/React$1.createElement("div", {
    className: styles.LabelWrapper
  }, /*#__PURE__*/React$1.createElement(Label$1, Object.assign({
    id: id
  }, rest, {
    hidden: false
  }), label), actionMarkup) : null;
  return /*#__PURE__*/React$1.createElement("div", {
    className: className
  }, labelMarkup, children, errorMarkup, helpTextMarkup);
}
function helpTextID(id) {
  return "".concat(id, "HelpText");
}

export { Labelled, helpTextID };