@primer/components 0.0.0-202110303104 → 0.0.0-2021103082237

package/lib-esm/TabNav.js

@@ -2,14 +2,14 @@ import classnames from 'classnames'; // eslint-disable-next-line import/no-names
 
 import React from 'react';
 import styled from 'styled-components';
-import { COMMON, get } from './constants';
+import { get } from './constants';
 import sx from './sx';
 const ITEM_CLASS = 'TabNav-item';
 const SELECTED_CLASS = 'selected';
 const TabNavBase = styled.div.withConfig({
   displayName: "TabNav__TabNavBase",
   componentId: "sc-1xod0ow-0"
-})(["margin-top:0;border-bottom:1px solid ", ";", " ", ""], get('colors.border.default'), COMMON, sx);
+})(["margin-top:0;border-bottom:1px solid ", ";", ""], get('colors.border.default'), sx);
 const TabNavBody = styled.nav.withConfig({
   displayName: "TabNav__TabNavBody",
   componentId: "sc-1xod0ow-1"
@@ -32,7 +32,7 @@ const TabNavLink = styled.a.attrs(props => ({
 })).withConfig({
   displayName: "TabNav__TabNavLink",
   componentId: "sc-1xod0ow-2"
-})(["padding:8px 12px;font-size:", ";line-height:20px;color:", ";text-decoration:none;background-color:transparent;border:1px solid transparent;border-bottom:0;&:hover,&:focus{color:", ";text-decoration:none;}&.selected{color:", ";border-color:", ";border-top-right-radius:", ";border-top-left-radius:", ";background-color:", ";}", ";", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('radii.2'), get('colors.canvas.default'), COMMON, sx);
+})(["padding:8px 12px;font-size:", ";line-height:20px;color:", ";text-decoration:none;background-color:transparent;border:1px solid transparent;border-bottom:0;&:hover,&:focus{color:", ";text-decoration:none;}&.selected{color:", ";border-color:", ";border-top-right-radius:", ";border-top-left-radius:", ";background-color:", ";}", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('radii.2'), get('colors.canvas.default'), sx);
 TabNavLink.displayName = 'TabNav.Link';
 export default Object.assign(TabNav, {
   Link: TabNavLink

package/lib-esm/TextInput.d.ts

@@ -4,10 +4,17 @@ import UnstyledTextInput from './_UnstyledTextInput';
 import TextInputWrapper from './_TextInputWrapper';
 declare type NonPassthroughProps = {
     className?: string;
+    /** @deprecated Use `leadingIcon` or `trailingIcon` prop instead */
     icon?: React.ComponentType<{
         className?: string;
     }>;
-} & Pick<ComponentProps<typeof TextInputWrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'>;
+    leadingIcon?: React.ComponentType<{
+        className?: string;
+    }>;
+    trailingIcon?: React.ComponentType<{
+        className?: string;
+    }>;
+} & Pick<ComponentProps<typeof TextInputWrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'width' | 'maxWidth' | 'minWidth' | 'variant' | 'size'>;
 declare type TextInputInternalProps = Merge<React.ComponentPropsWithoutRef<typeof UnstyledTextInput>, NonPassthroughProps>;
 declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputInternalProps, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
 export declare type TextInputProps = ComponentProps<typeof TextInput>;

package/lib-esm/TextInput.js

@@ -7,16 +7,21 @@ 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,
+  leadingIcon: LeadingIconComponent,
+  trailingIcon: TrailingIconComponent,
   block,
   className,
   contrast,
   disabled,
+  validationStatus,
   sx: sxProp,
-  theme,
+  size: sizeProp,
+  // start deprecated props
   width: widthProp,
   minWidth: minWidthProp,
   maxWidth: maxWidthProp,
   variant: variantProp,
+  // end deprecated props
   ...inputProps
 }, ref) => {
   // this class is necessary to style FilterSearch, plz no touchy!
@@ -24,21 +29,28 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
   return /*#__PURE__*/React.createElement(TextInputWrapper, {
     block: block,
     className: wrapperClasses,
+    validationStatus: validationStatus,
     contrast: contrast,
     disabled: disabled,
-    hasIcon: !!IconComponent,
+    hasIcon: !!IconComponent || !!(LeadingIconComponent || TrailingIconComponent),
     sx: sxProp,
-    theme: theme,
+    size: sizeProp,
     width: widthProp,
     minWidth: minWidthProp,
     maxWidth: maxWidthProp,
     variant: variantProp
   }, IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
-    className: "TextInput-icon"
+    className: "TextInput-leading-icon"
+  }), LeadingIconComponent && /*#__PURE__*/React.createElement(LeadingIconComponent, {
+    className: "TextInput-leading-icon"
   }), /*#__PURE__*/React.createElement(UnstyledTextInput, _extends({
     ref: ref,
     disabled: disabled
-  }, inputProps)));
+  }, inputProps, {
+    "data-component": "input"
+  })), TrailingIconComponent && /*#__PURE__*/React.createElement(TrailingIconComponent, {
+    className: "TextInput-trailing-icon"
+  }));
 });
 TextInput.defaultProps = {
   type: 'text'

package/lib-esm/TextInputWithTokens.d.ts

@@ -44,11 +44,17 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
 } & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
-}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "icon" | "sx" | "variant" | "className" | "disabled" | "contrast"> & {
+}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "size" | "block" | "icon" | "variant" | "sx" | "className" | "disabled" | "leadingIcon" | "trailingIcon" | "contrast"> & {
     className?: string | undefined;
     icon?: React.ComponentType<{
         className?: string | undefined;
     }> | undefined;
+    leadingIcon?: React.ComponentType<{
+        className?: string | undefined;
+    }> | undefined;
+    trailingIcon?: 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;
@@ -61,10 +67,11 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
+    size?: "small" | "large" | undefined;
     block?: boolean | undefined;
-    sx?: import("./sx").BetterSystemStyleObject | undefined;
     variant?: "small" | "large" | undefined;
     role?: React.AriaRole | undefined;
+    sx?: import("./sx").BetterSystemStyleObject | undefined;
     key?: React.Key | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -317,9 +324,10 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
     disabled?: boolean | undefined;
     hasIcon?: boolean | undefined;
     contrast?: boolean | undefined;
+    validationStatus?: "error" | "warning" | undefined;
 } & {
     theme?: any;
-}, "maxWidth" | "minWidth" | "width" | "theme" | "block" | "sx" | "variant" | "disabled" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement> & {
+}, "maxWidth" | "minWidth" | "width" | "size" | "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>>;