@primer/components 0.0.0-202111194229 → 0.0.0-2021112133435

package/lib-esm/TextInput.js

@@ -7,21 +7,16 @@ import TextInputWrapper from './_TextInputWrapper';
 // using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
 const TextInput = /*#__PURE__*/React.forwardRef(({
   icon: IconComponent,
-  leadingVisual: LeadingVisual,
-  trailingVisual: TrailingVisual,
   block,
   className,
   contrast,
   disabled,
-  validationStatus,
   sx: sxProp,
-  size: sizeProp,
-  // start deprecated props
+  theme,
   width: widthProp,
   minWidth: minWidthProp,
   maxWidth: maxWidthProp,
   variant: variantProp,
-  // end deprecated props
   ...inputProps
 }, ref) => {
   // this class is necessary to style FilterSearch, plz no touchy!
@@ -29,27 +24,21 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
   return /*#__PURE__*/React.createElement(TextInputWrapper, {
     block: block,
     className: wrapperClasses,
-    validationStatus: validationStatus,
     contrast: contrast,
     disabled: disabled,
+    hasIcon: !!IconComponent,
     sx: sxProp,
-    size: sizeProp,
+    theme: theme,
     width: widthProp,
     minWidth: minWidthProp,
     maxWidth: maxWidthProp,
     variant: variantProp
   }, IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
     className: "TextInput-icon"
-  }), LeadingVisual && /*#__PURE__*/React.createElement("span", {
-    "data-component": "leadingVisual"
-  }, typeof LeadingVisual === 'function' ? /*#__PURE__*/React.createElement(LeadingVisual, null) : LeadingVisual), /*#__PURE__*/React.createElement(UnstyledTextInput, _extends({
+  }), /*#__PURE__*/React.createElement(UnstyledTextInput, _extends({
     ref: ref,
     disabled: disabled
-  }, inputProps, {
-    "data-component": "input"
-  })), TrailingVisual && /*#__PURE__*/React.createElement("span", {
-    "data-component": "leadingVisual"
-  }, typeof TrailingVisual === 'function' ? /*#__PURE__*/React.createElement(TrailingVisual, null) : TrailingVisual));
+  }, inputProps)));
 });
 TextInput.defaultProps = {
   type: 'text'

package/lib-esm/TextInputWithTokens.d.ts

@@ -44,17 +44,11 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
 } & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
-}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingVisual" | "trailingVisual" | "contrast"> & {
+}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "contrast"> & {
     className?: string | undefined;
     icon?: React.ComponentType<{
         className?: string | undefined;
     }> | undefined;
-    leadingVisual?: string | React.ComponentType<{
-        className?: string | undefined;
-    }> | undefined;
-    trailingVisual?: string | React.ComponentType<{
-        className?: string | undefined;
-    }> | undefined;
 } & Pick<{
     color?: string | undefined;
     maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -67,7 +61,6 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
-    size?: "small" | "large" | undefined;
     block?: boolean | undefined;
     variant?: "small" | "large" | undefined;
     role?: React.AriaRole | undefined;
@@ -325,10 +318,9 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
     disabled?: boolean | undefined;
     hasIcon?: boolean | undefined;
     contrast?: boolean | undefined;
-    validationStatus?: "error" | "warning" | undefined;
 } & {
     theme?: any;
-}, "maxWidth" | "minWidth" | "width" | "size" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement> & {
+}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "variant" | "sx" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement> & {
     selectedTokenIndex: number | undefined;
     setSelectedTokenIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
 }, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;

package/lib-esm/_TextInputWrapper.d.ts

@@ -5,9 +5,6 @@ declare const TextInputWrapper: import("styled-components").StyledComponent<"spa
     hasIcon?: boolean | undefined;
     block?: boolean | undefined;
     contrast?: boolean | undefined;
-    validationStatus?: "error" | "warning" | undefined;
-    /** @deprecated Use `size` prop instead */
     variant?: "small" | "large" | undefined;
-    size?: "small" | "large" | undefined;
 } & WidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Width<import("styled-system").TLengthStyledSystem>> & MinWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MinWidth<import("styled-system").TLengthStyledSystem>> & MaxWidthProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>> & SxProp, never>;
 export default TextInputWrapper;

package/lib-esm/_TextInputWrapper.js

@@ -2,24 +2,7 @@ import styled, { css } from 'styled-components';
 import { maxWidth, minWidth, variant, width } from 'styled-system';
 import { get } from './constants';
 import sx from './sx';
-const sizeDeprecatedVariants = variant({
-  variants: {
-    small: {
-      minHeight: '28px',
-      px: 2,
-      py: '3px',
-      fontSize: 0,
-      lineHeight: '20px'
-    },
-    large: {
-      px: 2,
-      py: '10px',
-      fontSize: 3
-    }
-  }
-});
 const sizeVariants = variant({
-  prop: 'size',
   variants: {
     small: {
       minHeight: '28px',
@@ -38,5 +21,11 @@ const sizeVariants = variant({
 const TextInputWrapper = styled.span.withConfig({
   displayName: "_TextInputWrapper__TextInputWrapper",
   componentId: "sc-5vfcis-0"
-})(["width:max-content;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-color:", ";background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;padding:6px 12px;display:grid;grid-template-columns:auto 1fr auto;justify-items:end;& >:not(:last-child){margin-right:", ";}[data-component=' leadingVisual ']{align-self:center;color:", ";}[data-component=' trailingVisual ']{align-self:center;color:", ";}.TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.canvas.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), get('space.2'), get('colors.fg.muted'), get('colors.fg.muted'), get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.primer.fg.disabled'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.validationStatus === 'error' && css(["border-color:", ";&:focus-within{border-color:", ";box-shadow:", ";}"], get('colors.danger.emphasis'), get('colors.danger.emphasis'), get('shadows.btn.danger.focusShadow')), props => props.validationStatus === 'warning' && css(["border-color:", ";&:focus-within{border-color:", ";box-shadow:0 0 0 3px ", ";}"], get('colors.attention.emphasis'), get('colors.attention.emphasis'), get('colors.attention.muted')), props => props.block && css(["width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeDeprecatedVariants, sizeVariants, sx);
+})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), props => {
+  if (props.hasIcon) {
+    return css(["padding:0;"]);
+  } else {
+    return css(["padding:6px 12px;"]);
+  }
+}, get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.primer.fg.disabled'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), props => props.block && props.hasIcon && css(["display:flex;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx);
 export default TextInputWrapper;

package/lib-esm/drafts.d.ts

@@ -6,3 +6,4 @@
  */
 export * from './ActionList2';
 export * from './NewButton';
+export * from './ActionMenu2';

package/lib-esm/drafts.js

@@ -6,4 +6,5 @@
  */
 // Components
 export * from './ActionList2';
-export * from './NewButton';
+export * from './NewButton';
+export * from './ActionMenu2';

package/lib-esm/index.d.ts

@@ -21,6 +21,8 @@ export { useOpenAndCloseFocus } from './hooks/useOpenAndCloseFocus';
 export { useOnEscapePress } from './hooks/useOnEscapePress';
 export { useOverlay } from './hooks/useOverlay';
 export { useConfirm } from './Dialog/ConfirmationDialog';
+export { default as Radio } from './Radio';
+export type { RadioProps } from './Radio';
 export { ActionList } from './ActionList';
 export { ActionMenu } from './ActionMenu';
 export type { ActionMenuProps } from './ActionMenu';

package/lib-esm/index.js

@@ -17,6 +17,7 @@ export { useOnEscapePress } from './hooks/useOnEscapePress';
 export { useOverlay } from './hooks/useOverlay';
 export { useConfirm } from './Dialog/ConfirmationDialog'; // Components
 
+export { default as Radio } from './Radio';
 export { ActionList } from './ActionList';
 export { ActionMenu } from './ActionMenu';
 export { default as Autocomplete } from './Autocomplete';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-202111194229",
+  "version": "0.0.0-2021112133435",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -91,6 +91,7 @@
     "@types/jest-axe": "3.5.3",
     "@types/lodash.isempty": "4.4.6",
     "@types/lodash.isobject": "3.0.6",
+    "@types/node": "16.11.11",
     "@typescript-eslint/eslint-plugin": "4.31.2",
     "@typescript-eslint/parser": "4.26.1",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.3",
@@ -116,6 +117,7 @@
     "eslint-plugin-primer-react": "0.7.0",
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
+    "front-matter": "4.0.2",
     "jest": "27.0.4",
     "jest-axe": "5.0.1",
     "jest-styled-components": "6.3.4",