How to add new prop to ThemeUI components

[sadeghbarati]

for example, consider about THEME UI Button component,

I want to new feature to button like notification (like bootstrap badges ) Badges

or skin props like fill button or outline button

or wide prop button instead of sx={{ width: '100%', display: 'block' }}

or loading prop for display loading button

or gatsby link ( to prop ) how can I do it with theme-ui

here an example of what I saying about but with styled-component and styled-system

import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { NavLink } from 'react-router-dom';
import { space, display, maxWidth, fontSize, themeGet } from 'styled-system';

const width = ({ wide }) => wide === 'true' && '100%';
const cursor = ({ disabled }) => (disabled ? 'not-allowed' : 'pointer');
const opacity = ({ disabled }) => disabled && '0.65';
const btnBg = ({ color, skin }) =>
  themeGet(skin === 'outline' ? `colors.white` : `colors.${color}`);
const btnColor = ({ color, skin }) =>
  themeGet(skin === 'fill' ? `colors.white` : `colors.${color}`);

const styles = css`
  ${display};
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  outline: none;
  user-select: none;
  transition: 0.1s ease;
  border-radius: 0;
  text-transform: lowercase;
  width: ${width};
  cursor: ${cursor};
  opacity: ${opacity};
  color: ${btnColor};
  background: ${btnBg};
  padding: 10px 23px;
  line-height: 1.5;
  ${space};
  ${fontSize};
  ${maxWidth};
  border: 1px solid ${({ color }) => themeGet(`colors.${color}`)};
  ${({ disabled }) =>
    !disabled &&
    css`
      &:hover {
        border-color: ${themeGet('colors.black')};
        background: ${({ color, skin }) =>
          themeGet(
            color === 'black' && skin === 'fill'
              ? 'colors.white'
              : 'colors.black',
          )};
        color: ${({ color, skin }) =>
          themeGet(
            color === 'black' && skin === 'fill'
              ? 'colors.black'
              : 'colors.white',
          )};
      }
    `};
`;

const StyledNavLink = styled(NavLink)`
  ${styles};
`;
const StyledLink = styled.a`
  ${styles};
`;
const StyledButton = styled.button`
  ${styles};
`;

const Button = ({ to, href, type, wide, disabled, ...rest }) => {
  const isWide = wide.toString();
  const DefaultBtn = (
    <StyledButton disabled={disabled} type={type} wide={isWide} {...rest} />
  );
  if (disabled) {
    return DefaultBtn;
  }
  if (to) {
    return <StyledNavLink to={to} wide={isWide} {...rest} />;
  }
  if (href) {
    return (
      <StyledLink
        href={href}
        rel="noopener noreferrer nofollow"
        target="_blank"
        wide={isWide}
        {...rest}
      />
    );
  }
  return DefaultBtn;
};

Button.propTypes = {
  color: PropTypes.oneOf(['brand', 'cta', 'black']),
  skin: PropTypes.oneOf(['fill', 'outline']),
  wide: PropTypes.bool,
  disabled: PropTypes.bool,
  type: PropTypes.oneOf(['submit', 'button']),
  display: PropTypes.string,
  fontSize: PropTypes.string,
  ...space.propTypes,
  ...maxWidth.propTypes,
};

Button.defaultProps = {
  color: 'black',
  skin: 'fill',
  type: 'button',
  display: 'inline-block',
  fontSize: 's',
  disabled: false,
  wide: false,
};

export default Button;

[hasparus]

IMO:

Use composition. Build your own branded components library on top of Theme UI.

So

1. Import Theme UI Button as ThemeUIButton
2. Create a new React component Button which accepts additional props, and ThemeUIButton props through rest params. (({ isLoading, ...rest }) => ...)
3. Handle additional props.
4. Spread rest onto ThemeUIButton.

   <ThemeUIButton disabled={isLoading} {...rest}>
     {isLoading ? "Loading..." : children}
   <ThemeUIButton>
   

[sadeghbarati]

here's my example you cover that

/** @jsx jsx */
import {jsx, Button as ThemeUIButton, css} from "theme-ui"
import PropTypes from 'prop-types';
import {Link as GatsbyLink } from "gatsby"


export default function Buttons({ isLoading, wide, to, href, type, children, ...props }) {
    const isWide = wide.toString();
    return (
        <ThemeUIButton disabled={isLoading} to={to} href={href} type={type} wide={isWide} {...props} sx={{
            display: `${isWide ? 'block' : 'inline-block' }`
        }}
        // which one should use to work props for styling sx or css theme-ui or css Emotion-core ?
        // should we use styled of Emotion or Styled-components to work with props like first Message above? 
        css={css({
            display: `${isWide ? 'block' : 'inline-block'}`
        })}
        >
            {isLoading ? "Loading..." : children}
        </ThemeUIButton>

    )

    if(href) {
        return (
            <ThemeUIButton as="a" href={href} rel="noreferrer nofollow" {...props}>
                {children}
            </ThemeUIButton>
        )
    }

    if(to) {
        return (
            <ThemeUIButton as={GatsbyLink} to={to} {...props}>
                {children}
            </ThemeUIButton>
        )
    }
}

Buttons.propTypes = {
    isLoading: PropTypes.bool,
    wide: PropTypes.bool,
    disabled: PropTypes.bool,
    type: PropTypes.oneOf(['submit', 'button']),
};

Buttons.defaultProps = {

};

[hasparus]

   // which one should use to work props for styling sx or css theme-ui or css Emotion-core ?
   // should we use styled of Emotion or Styled-components to work with props like first Message above? 

Well, so sx is transformed by Theme UI, and css is transformed by @emotion/core, which is a dependency of Theme UI. The css prop has no idea about your theme, and doesn't support responsive tuples,

I suppose you don't want to end up with both styled-components and Emotion in one project, so if you have styled from styled-components you can migrate it to @emotion/styled.

[sadeghbarati]

How to create a component that extends theme ui component without creating a new one just like ThemeUIButton

@jxnblk
@hasparus

here the main goal of this issue and discussion:

1. we must use gatsby shadowing ? but how ?
2. or we don't have any way to extend and we have to create a new Button component to add our custom props ?

https://www.youtube.com/watch?v=6Z4p-qjnKCQ
nice tutorial but do not cover custom props on theme-ui components :(

#1081 #735

[sadeghbarati]

#403 #586

https://stackoverflow.com/questions/58259371/multiple-variants-with-theme-ui

https://spectrum.chat/styled-system/general/multiple-variants-with-theme-ui~86236786-e94f-4010-a763-e15a671adf91

[sadeghbarati]

if these features exist why doesn't mentioned in Documentation