Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Compiled className get's overwritten by className from the props #268

Open
bohdanbirdie opened this issue Aug 14, 2019 · 3 comments
Open

Comments

@bohdanbirdie
Copy link

Having two components, NavIconLink and AnchorDefault I pass styleName to the AnchorDefault, but also there might be a className from the props spread that will be passed as well.
In this case of className is passed - whatever was transformed from styleName to className get's overwritten by passed className from the spread.

import React from 'react';
import PropTypes from 'prop-types';

import {
    AnchorDefault,
    Icon,
} from '../../elements';

import styles from './NavIconLink.scss';

export const NavIconLink = ({
    label,
    icon,
    ...props
}) => (
    <AnchorDefault
        styleName="a-navicon-link"
        activeClassName={styles['a-navicon-link--active']}
        {...props}
    >
        <span className="u-visible-sml">
            {label}
        </span>
        <span className="u-block-md">
            <Icon
                className="a-svg-medium"
                icon={icon}
            />
        </span>
    </AnchorDefault>
);

NavIconLink.propTypes = {
    label: PropTypes.string,
    icon: PropTypes.string,
};

Compiled part

var NavIconLink = function NavIconLink(_ref) {
  var label = _ref.label,
      icon = _ref.icon,
      props = _objectWithoutProperties(_ref, ["label", "icon"]);

  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements__WEBPACK_IMPORTED_MODULE_2__[/* AnchorDefault */ "b"], _extends({
    className: "a-navicon-link___36tEr" + (" " + (props ? props.className || "" : "")),
    activeClassName: _NavIconLink_scss__WEBPACK_IMPORTED_MODULE_3___default.a['a-navicon-link--active']
  }, props), _jsx("span", {
    className: "u-visible-sml"
  }, void 0, label), _jsx("span", {
    className: "u-block-md"
  }, void 0, _jsx(_elements__WEBPACK_IMPORTED_MODULE_2__[/* Icon */ "s"], {
    className: "a-svg-medium",
    icon: icon
  })));
};
import React from 'react';
import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';

export const AnchorDefault = ({
    label,
    onClick,
    children,
    disabled,
    className,
    openNewTab,
    ...other
}) => {
    const LinkComponent = other.to
        ? NavLink
        : other.href ? 'a' : 'button';

    return (
        <LinkComponent
            onClick={onClick}
            className={className}
            disabled={disabled}
            {...openNewTab && { target: '_blank' }}
            {...openNewTab && { rel: 'noopener noreferrer' }}
            {...other}
        >
            {children || label}
        </LinkComponent>
    );
};

AnchorDefault.propTypes = {
    children: PropTypes.any,
    label: PropTypes.string,
    disabled: PropTypes.bool,
    className: PropTypes.string,
    href: PropTypes.string,
    onClick: PropTypes.func,
    openNewTab: PropTypes.bool,
};

export default AnchorDefault;

The current workaround is to manually write className prop and set it.

export const NavIconLink = ({
    label,
    icon,
    className,
    ...props
}) => (
    <AnchorDefault
        styleName="a-navicon-link"
        className={className} // <--- here
        activeClassName={styles['a-navicon-link--active']}
        {...props}
    >
        <span className="u-visible-sml">
            {label}
        </span>
        <span className="u-block-md">
            <Icon
                className="a-svg-medium"
                icon={icon}
            />
        </span>
    </AnchorDefault>
);
var NavIconLink = function NavIconLink(_ref) {
  var label = _ref.label,
      icon = _ref.icon,
      className = _ref.className,
      props = _objectWithoutProperties(_ref, ["label", "icon", "className"]);

  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements__WEBPACK_IMPORTED_MODULE_2__[/* AnchorDefault */ "b"], _extends({
    className: (className ? className + " " : "") + "a-navicon-link___36tEr" + (" " + (props ? props.className || "" : "")),
    activeClassName: _NavIconLink_scss__WEBPACK_IMPORTED_MODULE_3___default.a['a-navicon-link--active']
  }, props), _jsx("span", {
    className: "u-visible-sml"
  }, void 0, label), _jsx("span", {
    className: "u-block-md"
  }, void 0, _jsx(_elements__WEBPACK_IMPORTED_MODULE_2__[/* Icon */ "s"], {
    className: "a-svg-medium",
    icon: icon
  })));
};
@bohdanbirdie
Copy link
Author

seems like this is because of props = _objectWithoutProperties(_ref, ["label", "icon", "className"]); having className included
@gajus any thoughts on that?
I tried to modify plugin code, but without success so far

@tyler-dot-earth
Copy link

@bohdanbirdie Try putting styleName after the props spread.

@bohdanbirdie
Copy link
Author

@tsnieman, unfortunately, it won't add className to the excluded props

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants