@primer/components 0.0.0-202110303104 → 0.0.0-2021103082237

package/lib/StyledOcticon.d.ts

@@ -1,12 +1,11 @@
 import { IconProps } from '@primer/octicons-react';
 import React from 'react';
-import { SystemCommonProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
 declare type OcticonProps = {
     icon: React.ElementType;
 } & IconProps;
 declare function Octicon({ icon: IconComponent, ...rest }: OcticonProps): JSX.Element;
-declare const StyledOcticon: import("styled-components").StyledComponent<typeof Octicon, any, SystemCommonProps & SxProp, never>;
+declare const StyledOcticon: import("styled-components").StyledComponent<typeof Octicon, any, SxProp, never>;
 export declare type StyledOcticonProps = ComponentProps<typeof StyledOcticon>;
 export default StyledOcticon;

package/lib/StyledOcticon.js

@@ -9,8 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _constants = require("./constants");
-
 var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26,7 +24,7 @@ Octicon.displayName = "Octicon";
 const StyledOcticon = (0, _styledComponents.default)(Octicon).withConfig({
   displayName: "StyledOcticon",
   componentId: "uhnt7w-0"
-})(["", " ", ""], _constants.COMMON, _sx.default);
+})(["", ""], _sx.default);
 StyledOcticon.defaultProps = {
   size: 16
 };

package/lib/SubNav.d.ts

@@ -1,10 +1,8 @@
 import * as History from 'history';
 import React from 'react';
-import { SystemBorderProps, SystemCommonProps, SystemFlexProps } from './constants';
-import { BoxProps } from './Box';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const SubNavBase: import("styled-components").StyledComponent<"nav", any, SystemFlexProps & SystemCommonProps & SxProp, never>;
+declare const SubNavBase: import("styled-components").StyledComponent<"nav", any, SxProp, never>;
 export declare type SubNavProps = {
     actions?: React.ReactNode;
     align?: 'right';
@@ -12,21 +10,17 @@ export declare type SubNavProps = {
     label?: string;
 } & ComponentProps<typeof SubNavBase>;
 declare function SubNav({ actions, className, children, label, ...rest }: SubNavProps): JSX.Element;
-export declare type SubNavLinksProps = BoxProps;
-declare function SubNavLinks(props: SubNavLinksProps): JSX.Element;
-declare namespace SubNavLinks {
-    var displayName: string;
-}
+export declare type SubNavLinksProps = SxProp;
 declare const SubNavLink: import("styled-components").StyledComponent<"a", any, {
     to?: History.LocationDescriptor<unknown> | undefined;
     selected?: boolean | undefined;
-} & SystemCommonProps & SxProp & SystemBorderProps, never>;
+} & SxProp, never>;
 export declare type SubNavLinkProps = ComponentProps<typeof SubNavLink>;
 declare const _default: typeof SubNav & {
     Link: import("styled-components").StyledComponent<"a", any, {
         to?: History.LocationDescriptor<unknown> | undefined;
         selected?: boolean | undefined;
-    } & SystemCommonProps & SxProp & SystemBorderProps, never>;
-    Links: typeof SubNavLinks;
+    } & SxProp, never>;
+    Links: import("styled-components").StyledComponent<"div", any, SxProp, never>;
 };
 export default _default;

package/lib/SubNav.js

@@ -13,8 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("./constants");
 
-var _Box = _interopRequireDefault(require("./Box"));
-
 var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,7 +25,7 @@ const SELECTED_CLASS = 'selected';
 const SubNavBase = _styledComponents.default.nav.withConfig({
   displayName: "SubNav__SubNavBase",
   componentId: "f7w0xa-0"
-})(["display:flex;justify-content:space-between;.SubNav-body{display:flex;margin-bottom:-1px;> *{margin-left:", ";}> *:first-child{margin-left:0;}}.SubNav-actions{align-self:center;}", ";", ";", ";"], (0, _constants.get)('space.2'), _constants.COMMON, _constants.FLEX, _sx.default);
+})(["display:flex;justify-content:space-between;.SubNav-body{display:flex;margin-bottom:-1px;> *{margin-left:", ";}> *:first-child{margin-left:0;}}.SubNav-actions{align-self:center;}", ";"], (0, _constants.get)('space.2'), _sx.default);
 
 function SubNav({
   actions,
@@ -49,21 +47,18 @@ function SubNav({
 
 SubNav.displayName = "SubNav";
 
-function SubNavLinks(props) {
-  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
-    display: "flex"
-  }, props));
-}
-
-SubNavLinks.displayName = "SubNavLinks";
+const SubNavLinks = _styledComponents.default.div.withConfig({
+  displayName: "SubNav__SubNavLinks",
+  componentId: "f7w0xa-1"
+})(["display:flex;", ";"], _sx.default);
 
 const SubNavLink = _styledComponents.default.a.attrs(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
   className: (0, _classnames.default)(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
 })).withConfig({
   displayName: "SubNav__SubNavLink",
-  componentId: "f7w0xa-1"
-})(["padding-left:", ";padding-right:", ";font-weight:", ";font-size:", ";line-height:20px;min-height:34px;color:", ";text-align:center;text-decoration:none;border-top:1px solid ", ";border-bottom:1px solid ", ";border-right:1px solid ", ";display:flex;align-items:center;&:first-of-type{border-top-left-radius:", ";border-bottom-left-radius:", ";border-left:1px solid ", ";}&:last-of-type{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:hover,&:focus{text-decoration:none;background-color:", ";transition:0.2s ease;.SubNav-octicon{color:", ";}}&.selected{color:", ";background-color:", ";border-color:", ";.SubNav-octicon{color:", ";}}", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('fontWeights.semibold'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.subtle'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.fg.onEmphasis'), _constants.COMMON, _sx.default);
+  componentId: "f7w0xa-2"
+})(["padding-left:", ";padding-right:", ";font-weight:", ";font-size:", ";line-height:20px;min-height:34px;color:", ";text-align:center;text-decoration:none;border-top:1px solid ", ";border-bottom:1px solid ", ";border-right:1px solid ", ";display:flex;align-items:center;&:first-of-type{border-top-left-radius:", ";border-bottom-left-radius:", ";border-left:1px solid ", ";}&:last-of-type{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:hover,&:focus{text-decoration:none;background-color:", ";transition:0.2s ease;.SubNav-octicon{color:", ";}}&.selected{color:", ";background-color:", ";border-color:", ";.SubNav-octicon{color:", ";}}", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('fontWeights.semibold'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.subtle'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.fg.onEmphasis'), _sx.default);
 
 SubNavLink.displayName = 'SubNav.Link';
 SubNavLinks.displayName = 'SubNav.Links';

package/lib/TabNav.d.ts

@@ -1,20 +1,19 @@
 /// <reference types="react" />
 import * as History from 'history';
-import { SystemCommonProps, SystemTypographyProps } from './constants';
 import { SxProp } from './sx';
 import { ComponentProps } from './utils/types';
-declare const TabNavBase: import("styled-components").StyledComponent<"div", any, SystemCommonProps & SxProp, never>;
+declare const TabNavBase: import("styled-components").StyledComponent<"div", any, SxProp, never>;
 export declare type TabNavProps = ComponentProps<typeof TabNavBase>;
 declare function TabNav({ children, 'aria-label': ariaLabel, ...rest }: TabNavProps): JSX.Element;
 declare const TabNavLink: import("styled-components").StyledComponent<"a", any, {
     to?: History.LocationDescriptor<unknown> | undefined;
     selected?: boolean | undefined;
-} & SystemCommonProps & SxProp & SystemTypographyProps, never>;
+} & SxProp, never>;
 export declare type TabNavLinkProps = ComponentProps<typeof TabNavLink>;
 declare const _default: typeof TabNav & {
     Link: import("styled-components").StyledComponent<"a", any, {
         to?: History.LocationDescriptor<unknown> | undefined;
         selected?: boolean | undefined;
-    } & SystemCommonProps & SxProp & SystemTypographyProps, never>;
+    } & SxProp, never>;
 };
 export default _default;

package/lib/TabNav.js

@@ -23,7 +23,7 @@ const SELECTED_CLASS = 'selected';
 const TabNavBase = _styledComponents.default.div.withConfig({
   displayName: "TabNav__TabNavBase",
   componentId: "sc-1xod0ow-0"
-})(["margin-top:0;border-bottom:1px solid ", ";", " ", ""], (0, _constants.get)('colors.border.default'), _constants.COMMON, _sx.default);
+})(["margin-top:0;border-bottom:1px solid ", ";", ""], (0, _constants.get)('colors.border.default'), _sx.default);
 
 const TabNavBody = _styledComponents.default.nav.withConfig({
   displayName: "TabNav__TabNavBody",
@@ -48,7 +48,7 @@ const TabNavLink = _styledComponents.default.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:", ";}", ";", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.default'), _constants.COMMON, _sx.default);
+})(["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:", ";}", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.default'), _sx.default);
 
 TabNavLink.displayName = 'TabNav.Link';
 

package/lib/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/TextInput.js

@@ -20,16 +20,21 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 // using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
 const TextInput = /*#__PURE__*/_react.default.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!
@@ -37,21 +42,28 @@ const TextInput = /*#__PURE__*/_react.default.forwardRef(({
   return /*#__PURE__*/_react.default.createElement(_TextInputWrapper.default, {
     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.default.createElement(IconComponent, {
-    className: "TextInput-icon"
+    className: "TextInput-leading-icon"
+  }), LeadingIconComponent && /*#__PURE__*/_react.default.createElement(LeadingIconComponent, {
+    className: "TextInput-leading-icon"
   }), /*#__PURE__*/_react.default.createElement(_UnstyledTextInput.default, _extends({
     ref: ref,
     disabled: disabled
-  }, inputProps)));
+  }, inputProps, {
+    "data-component": "input"
+  })), TrailingIconComponent && /*#__PURE__*/_react.default.createElement(TrailingIconComponent, {
+    className: "TextInput-trailing-icon"
+  }));
 });
 
 TextInput.defaultProps = {

package/lib/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>>;