@primer/components 0.0.0-202196125110 → 0.0.0-202196141044
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -1
- package/lib/SelectMenu/SelectMenu.d.ts +2 -8
- package/lib/TextInput.d.ts +3 -6
- package/lib/TextInput.js +10 -9
- package/lib/Token/IssueLabelToken.js +3 -2
- package/lib/Token/ProfileToken.js +5 -2
- package/lib/Token/Token.js +3 -0
- package/lib/index.d.ts +0 -1
- package/lib/index.js +0 -8
- package/lib-esm/SelectMenu/SelectMenu.d.ts +2 -8
- package/lib-esm/TextInput.d.ts +3 -6
- package/lib-esm/TextInput.js +9 -8
- package/lib-esm/Token/IssueLabelToken.js +4 -3
- package/lib-esm/Token/ProfileToken.js +4 -1
- package/lib-esm/Token/Token.js +4 -1
- package/lib-esm/index.d.ts +0 -1
- package/lib-esm/index.js +0 -1
- package/package.json +1 -1
- package/lib/TextInputWithTokens.d.ts +0 -325
- package/lib/TextInputWithTokens.js +0 -252
- package/lib/_UnstyledTextInput.d.ts +0 -2
- package/lib/_UnstyledTextInput.js +0 -20
- package/lib-esm/TextInputWithTokens.d.ts +0 -325
- package/lib-esm/TextInputWithTokens.js +0 -226
- package/lib-esm/_UnstyledTextInput.d.ts +0 -2
- package/lib-esm/_UnstyledTextInput.js +0 -7
package/CHANGELOG.md
CHANGED
@@ -32,15 +32,11 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
|
|
32
32
|
Divider: import("styled-components").StyledComponent<"div", any, SystemCommonProps & SxProp, never>;
|
33
33
|
Filter: React.ForwardRefExoticComponent<Pick<{
|
34
34
|
value?: string | undefined;
|
35
|
-
} &
|
36
|
-
ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
|
37
|
-
}, string | number | symbol> & {
|
35
|
+
} & Pick<{
|
38
36
|
className?: string | undefined;
|
39
37
|
icon?: React.ComponentType<{
|
40
38
|
className?: string | undefined;
|
41
39
|
}> | undefined;
|
42
|
-
inputComponent?: React.ComponentType<HTMLInputElement> | undefined;
|
43
|
-
wrapperRef?: React.RefObject<HTMLSpanElement> | undefined;
|
44
40
|
} & Pick<{
|
45
41
|
color?: string | undefined;
|
46
42
|
maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
@@ -319,9 +315,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
|
|
319
315
|
} & {
|
320
316
|
as?: string | React.ComponentType<any> | undefined;
|
321
317
|
forwardedAs?: string | React.ComponentType<any> | undefined;
|
322
|
-
}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast" |
|
323
|
-
as?: "input" | undefined;
|
324
|
-
}, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
|
318
|
+
}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
|
325
319
|
Footer: import("styled-components").StyledComponent<"footer", any, SystemCommonProps & SxProp, never>;
|
326
320
|
Item: React.ForwardRefExoticComponent<Pick<{
|
327
321
|
as?: React.ElementType<any> | undefined;
|
package/lib/TextInput.d.ts
CHANGED
@@ -1,9 +1,8 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { MaxWidthProps, MinWidthProps, WidthProps } from 'styled-system';
|
3
|
-
import type * as Polymorphic from '@radix-ui/react-polymorphic';
|
4
3
|
import { SxProp } from './sx';
|
5
4
|
import { ComponentProps } from './utils/types';
|
6
|
-
import
|
5
|
+
declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
|
7
6
|
declare const Wrapper: import("styled-components").StyledComponent<"span", any, {
|
8
7
|
disabled?: boolean | undefined;
|
9
8
|
hasIcon?: boolean | undefined;
|
@@ -16,10 +15,8 @@ declare type NonPassthroughProps = {
|
|
16
15
|
icon?: React.ComponentType<{
|
17
16
|
className?: string;
|
18
17
|
}>;
|
19
|
-
inputComponent?: React.ComponentType<HTMLInputElement>;
|
20
|
-
wrapperRef?: React.RefObject<HTMLSpanElement>;
|
21
18
|
} & Pick<ComponentProps<typeof Wrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'>;
|
22
|
-
declare type TextInputInternalProps = NonPassthroughProps & Omit<React.ComponentPropsWithoutRef<typeof
|
23
|
-
declare const TextInput:
|
19
|
+
declare type TextInputInternalProps = NonPassthroughProps & Omit<React.ComponentPropsWithoutRef<typeof Input>, keyof NonPassthroughProps>;
|
20
|
+
declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputInternalProps, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
|
24
21
|
export declare type TextInputProps = ComponentProps<typeof TextInput>;
|
25
22
|
export default TextInput;
|
package/lib/TextInput.js
CHANGED
@@ -17,8 +17,6 @@ var _constants = require("./constants");
|
|
17
17
|
|
18
18
|
var _sx = _interopRequireDefault(require("./sx"));
|
19
19
|
|
20
|
-
var _UnstyledTextInput = _interopRequireDefault(require("./_UnstyledTextInput"));
|
21
|
-
|
22
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
23
21
|
|
24
22
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
@@ -44,20 +42,25 @@ const sizeVariants = (0, _styledSystem.variant)({
|
|
44
42
|
}
|
45
43
|
});
|
46
44
|
|
45
|
+
const Input = _styledComponents.default.input.withConfig({
|
46
|
+
displayName: "TextInput__Input",
|
47
|
+
componentId: "sc-1apmpmt-0"
|
48
|
+
})(["border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;&:focus{outline:0;}"]);
|
49
|
+
|
47
50
|
const Wrapper = _styledComponents.default.span.withConfig({
|
48
51
|
displayName: "TextInput__Wrapper",
|
49
|
-
componentId: "sc-1apmpmt-
|
52
|
+
componentId: "sc-1apmpmt-1"
|
50
53
|
})(["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:", ";", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
|
51
54
|
if (props.hasIcon) {
|
52
55
|
return (0, _styledComponents.css)(["padding:0;"]);
|
53
56
|
} else {
|
54
57
|
return (0, _styledComponents.css)(["padding:6px 12px;"]);
|
55
58
|
}
|
56
|
-
}, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default);
|
59
|
+
}, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default); // Props that are not passed through to Input:
|
60
|
+
|
57
61
|
|
58
62
|
// using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
|
59
63
|
const TextInput = /*#__PURE__*/_react.default.forwardRef(({
|
60
|
-
inputComponent: InputComponent,
|
61
64
|
icon: IconComponent,
|
62
65
|
block,
|
63
66
|
className,
|
@@ -69,7 +72,6 @@ const TextInput = /*#__PURE__*/_react.default.forwardRef(({
|
|
69
72
|
minWidth: minWidthProp,
|
70
73
|
maxWidth: maxWidthProp,
|
71
74
|
variant: variantProp,
|
72
|
-
wrapperRef,
|
73
75
|
...inputProps
|
74
76
|
}, ref) => {
|
75
77
|
// this class is necessary to style FilterSearch, plz no touchy!
|
@@ -85,11 +87,10 @@ const TextInput = /*#__PURE__*/_react.default.forwardRef(({
|
|
85
87
|
width: widthProp,
|
86
88
|
minWidth: minWidthProp,
|
87
89
|
maxWidth: maxWidthProp,
|
88
|
-
variant: variantProp
|
89
|
-
ref: wrapperRef
|
90
|
+
variant: variantProp
|
90
91
|
}, IconComponent && /*#__PURE__*/_react.default.createElement(IconComponent, {
|
91
92
|
className: "TextInput-icon"
|
92
|
-
}), /*#__PURE__*/_react.default.createElement(
|
93
|
+
}), /*#__PURE__*/_react.default.createElement(Input, _extends({
|
93
94
|
ref: ref,
|
94
95
|
disabled: disabled
|
95
96
|
}, inputProps)));
|
@@ -110,7 +110,7 @@ const IssueLabelToken = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef
|
|
110
110
|
}
|
111
111
|
} : {})
|
112
112
|
};
|
113
|
-
}, [colorScheme, fillColor]);
|
113
|
+
}, [colorScheme, fillColor, isSelected]);
|
114
114
|
return /*#__PURE__*/_react.default.createElement(_TokenBase.default, _extends({
|
115
115
|
onRemove: onRemove,
|
116
116
|
id: id === null || id === void 0 ? void 0 : id.toString(),
|
@@ -132,7 +132,8 @@ const IssueLabelToken = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef
|
|
132
132
|
}) : null);
|
133
133
|
});
|
134
134
|
IssueLabelToken.defaultProps = {
|
135
|
-
fillColor: '#999'
|
135
|
+
fillColor: '#999',
|
136
|
+
size: _TokenBase.defaultTokenSize
|
136
137
|
};
|
137
138
|
var _default = IssueLabelToken;
|
138
139
|
exports.default = _default;
|
@@ -7,10 +7,10 @@ exports.default = void 0;
|
|
7
7
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
9
9
|
|
10
|
-
var _constants = require("../constants");
|
11
|
-
|
12
10
|
var _primitives = _interopRequireDefault(require("@primer/primitives"));
|
13
11
|
|
12
|
+
var _constants = require("../constants");
|
13
|
+
|
14
14
|
var _TokenBase = require("./TokenBase");
|
15
15
|
|
16
16
|
var _Token = _interopRequireDefault(require("./Token"));
|
@@ -46,5 +46,8 @@ const ProfileToken = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
46
46
|
}
|
47
47
|
}, rest));
|
48
48
|
});
|
49
|
+
ProfileToken.defaultProps = {
|
50
|
+
size: _TokenBase.defaultTokenSize
|
51
|
+
};
|
49
52
|
var _default = ProfileToken;
|
50
53
|
exports.default = _default;
|
package/lib/Token/Token.js
CHANGED
package/lib/index.d.ts
CHANGED
@@ -98,7 +98,6 @@ export { default as TabNav } from './TabNav';
|
|
98
98
|
export type { TabNavProps, TabNavLinkProps } from './TabNav';
|
99
99
|
export { default as TextInput } from './TextInput';
|
100
100
|
export type { TextInputProps } from './TextInput';
|
101
|
-
export { default as TextInputWithTokens } from './TextInputWithTokens';
|
102
101
|
export { default as Text } from './Text';
|
103
102
|
export type { TextProps } from './Text';
|
104
103
|
export { default as Timeline } from './Timeline';
|
package/lib/index.js
CHANGED
@@ -429,12 +429,6 @@ Object.defineProperty(exports, "TextInput", {
|
|
429
429
|
return _TextInput.default;
|
430
430
|
}
|
431
431
|
});
|
432
|
-
Object.defineProperty(exports, "TextInputWithTokens", {
|
433
|
-
enumerable: true,
|
434
|
-
get: function () {
|
435
|
-
return _TextInputWithTokens.default;
|
436
|
-
}
|
437
|
-
});
|
438
432
|
Object.defineProperty(exports, "Text", {
|
439
433
|
enumerable: true,
|
440
434
|
get: function () {
|
@@ -606,8 +600,6 @@ var _TabNav = _interopRequireDefault(require("./TabNav"));
|
|
606
600
|
|
607
601
|
var _TextInput = _interopRequireDefault(require("./TextInput"));
|
608
602
|
|
609
|
-
var _TextInputWithTokens = _interopRequireDefault(require("./TextInputWithTokens"));
|
610
|
-
|
611
603
|
var _Text = _interopRequireDefault(require("./Text"));
|
612
604
|
|
613
605
|
var _Timeline = _interopRequireDefault(require("./Timeline"));
|
@@ -32,15 +32,11 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
|
|
32
32
|
Divider: import("styled-components").StyledComponent<"div", any, SystemCommonProps & SxProp, never>;
|
33
33
|
Filter: React.ForwardRefExoticComponent<Pick<{
|
34
34
|
value?: string | undefined;
|
35
|
-
} &
|
36
|
-
ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
|
37
|
-
}, string | number | symbol> & {
|
35
|
+
} & Pick<{
|
38
36
|
className?: string | undefined;
|
39
37
|
icon?: React.ComponentType<{
|
40
38
|
className?: string | undefined;
|
41
39
|
}> | undefined;
|
42
|
-
inputComponent?: React.ComponentType<HTMLInputElement> | undefined;
|
43
|
-
wrapperRef?: React.RefObject<HTMLSpanElement> | undefined;
|
44
40
|
} & Pick<{
|
45
41
|
color?: string | undefined;
|
46
42
|
maxWidth?: import("styled-system").ResponsiveValue<import("csstype").Property.MaxWidth<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
@@ -319,9 +315,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
|
|
319
315
|
} & {
|
320
316
|
as?: string | React.ComponentType<any> | undefined;
|
321
317
|
forwardedAs?: string | React.ComponentType<any> | undefined;
|
322
|
-
}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast" |
|
323
|
-
as?: "input" | undefined;
|
324
|
-
}, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
|
318
|
+
}, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast">, string | number | symbol> & React.RefAttributes<HTMLInputElement>, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
|
325
319
|
Footer: import("styled-components").StyledComponent<"footer", any, SystemCommonProps & SxProp, never>;
|
326
320
|
Item: React.ForwardRefExoticComponent<Pick<{
|
327
321
|
as?: React.ElementType<any> | undefined;
|
package/lib-esm/TextInput.d.ts
CHANGED
@@ -1,9 +1,8 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { MaxWidthProps, MinWidthProps, WidthProps } from 'styled-system';
|
3
|
-
import type * as Polymorphic from '@radix-ui/react-polymorphic';
|
4
3
|
import { SxProp } from './sx';
|
5
4
|
import { ComponentProps } from './utils/types';
|
6
|
-
import
|
5
|
+
declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
|
7
6
|
declare const Wrapper: import("styled-components").StyledComponent<"span", any, {
|
8
7
|
disabled?: boolean | undefined;
|
9
8
|
hasIcon?: boolean | undefined;
|
@@ -16,10 +15,8 @@ declare type NonPassthroughProps = {
|
|
16
15
|
icon?: React.ComponentType<{
|
17
16
|
className?: string;
|
18
17
|
}>;
|
19
|
-
inputComponent?: React.ComponentType<HTMLInputElement>;
|
20
|
-
wrapperRef?: React.RefObject<HTMLSpanElement>;
|
21
18
|
} & Pick<ComponentProps<typeof Wrapper>, 'block' | 'contrast' | 'disabled' | 'sx' | 'theme' | 'width' | 'maxWidth' | 'minWidth' | 'variant'>;
|
22
|
-
declare type TextInputInternalProps = NonPassthroughProps & Omit<React.ComponentPropsWithoutRef<typeof
|
23
|
-
declare const TextInput:
|
19
|
+
declare type TextInputInternalProps = NonPassthroughProps & Omit<React.ComponentPropsWithoutRef<typeof Input>, keyof NonPassthroughProps>;
|
20
|
+
declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputInternalProps, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
|
24
21
|
export declare type TextInputProps = ComponentProps<typeof TextInput>;
|
25
22
|
export default TextInput;
|
package/lib-esm/TextInput.js
CHANGED
@@ -6,7 +6,6 @@ import styled, { css } from 'styled-components';
|
|
6
6
|
import { maxWidth, minWidth, variant, width } from 'styled-system';
|
7
7
|
import { get } from './constants';
|
8
8
|
import sx from './sx';
|
9
|
-
import UnstyledTextInput from './_UnstyledTextInput';
|
10
9
|
const sizeVariants = variant({
|
11
10
|
variants: {
|
12
11
|
small: {
|
@@ -23,19 +22,23 @@ const sizeVariants = variant({
|
|
23
22
|
}
|
24
23
|
}
|
25
24
|
});
|
25
|
+
const Input = styled.input.withConfig({
|
26
|
+
displayName: "TextInput__Input",
|
27
|
+
componentId: "sc-1apmpmt-0"
|
28
|
+
})(["border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;&:focus{outline:0;}"]);
|
26
29
|
const Wrapper = styled.span.withConfig({
|
27
30
|
displayName: "TextInput__Wrapper",
|
28
|
-
componentId: "sc-1apmpmt-
|
31
|
+
componentId: "sc-1apmpmt-1"
|
29
32
|
})(["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:", ";", " .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 => {
|
30
33
|
if (props.hasIcon) {
|
31
34
|
return css(["padding:0;"]);
|
32
35
|
} else {
|
33
36
|
return css(["padding:6px 12px;"]);
|
34
37
|
}
|
35
|
-
}, 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.fg.muted'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx);
|
38
|
+
}, 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.fg.muted'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx); // Props that are not passed through to Input:
|
39
|
+
|
36
40
|
// using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
|
37
41
|
const TextInput = /*#__PURE__*/React.forwardRef(({
|
38
|
-
inputComponent: InputComponent,
|
39
42
|
icon: IconComponent,
|
40
43
|
block,
|
41
44
|
className,
|
@@ -47,7 +50,6 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
|
|
47
50
|
minWidth: minWidthProp,
|
48
51
|
maxWidth: maxWidthProp,
|
49
52
|
variant: variantProp,
|
50
|
-
wrapperRef,
|
51
53
|
...inputProps
|
52
54
|
}, ref) => {
|
53
55
|
// this class is necessary to style FilterSearch, plz no touchy!
|
@@ -63,11 +65,10 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
|
|
63
65
|
width: widthProp,
|
64
66
|
minWidth: minWidthProp,
|
65
67
|
maxWidth: maxWidthProp,
|
66
|
-
variant: variantProp
|
67
|
-
ref: wrapperRef
|
68
|
+
variant: variantProp
|
68
69
|
}, IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
|
69
70
|
className: "TextInput-icon"
|
70
|
-
}), /*#__PURE__*/React.createElement(
|
71
|
+
}), /*#__PURE__*/React.createElement(Input, _extends({
|
71
72
|
ref: ref,
|
72
73
|
disabled: disabled
|
73
74
|
}, inputProps)));
|
@@ -1,7 +1,7 @@
|
|
1
1
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2
2
|
|
3
3
|
import React, { forwardRef, useMemo } from 'react';
|
4
|
-
import TokenBase, { isTokenInteractive } from './TokenBase';
|
4
|
+
import TokenBase, { defaultTokenSize, isTokenInteractive } from './TokenBase';
|
5
5
|
import RemoveTokenButton from './_RemoveTokenButton';
|
6
6
|
import { parseToHsla, parseToRgba } from 'color2k';
|
7
7
|
import { useTheme } from '../ThemeProvider';
|
@@ -91,7 +91,7 @@ const IssueLabelToken = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
91
91
|
}
|
92
92
|
} : {})
|
93
93
|
};
|
94
|
-
}, [colorScheme, fillColor]);
|
94
|
+
}, [colorScheme, fillColor, isSelected]);
|
95
95
|
return /*#__PURE__*/React.createElement(TokenBase, _extends({
|
96
96
|
onRemove: onRemove,
|
97
97
|
id: id === null || id === void 0 ? void 0 : id.toString(),
|
@@ -113,6 +113,7 @@ const IssueLabelToken = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
113
113
|
}) : null);
|
114
114
|
});
|
115
115
|
IssueLabelToken.defaultProps = {
|
116
|
-
fillColor: '#999'
|
116
|
+
fillColor: '#999',
|
117
|
+
size: defaultTokenSize
|
117
118
|
};
|
118
119
|
export default IssueLabelToken;
|
@@ -1,8 +1,8 @@
|
|
1
1
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2
2
|
|
3
3
|
import React, { forwardRef } from 'react';
|
4
|
-
import { get } from '../constants';
|
5
4
|
import primitives from '@primer/primitives';
|
5
|
+
import { get } from '../constants';
|
6
6
|
import { defaultTokenSize, tokenSizes } from './TokenBase';
|
7
7
|
import Token from './Token';
|
8
8
|
import { Avatar } from '..';
|
@@ -27,4 +27,7 @@ const ProfileToken = /*#__PURE__*/forwardRef(({
|
|
27
27
|
}
|
28
28
|
}, rest));
|
29
29
|
});
|
30
|
+
ProfileToken.defaultProps = {
|
31
|
+
size: defaultTokenSize
|
32
|
+
};
|
30
33
|
export default ProfileToken;
|
package/lib-esm/Token/Token.js
CHANGED
@@ -4,7 +4,7 @@ import React, { forwardRef } from 'react';
|
|
4
4
|
import styled, { css } from 'styled-components';
|
5
5
|
import { get } from '../constants';
|
6
6
|
import { sx } from '../sx';
|
7
|
-
import TokenBase, { isTokenInteractive } from './TokenBase';
|
7
|
+
import TokenBase, { defaultTokenSize, isTokenInteractive } from './TokenBase';
|
8
8
|
import RemoveTokenButton from './_RemoveTokenButton';
|
9
9
|
import TokenTextContainer from './_TokenTextContainer';
|
10
10
|
const tokenBorderWidthPx = 1;
|
@@ -66,4 +66,7 @@ const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
66
66
|
} : {}
|
67
67
|
}) : null);
|
68
68
|
});
|
69
|
+
Token.defaultProps = {
|
70
|
+
size: defaultTokenSize
|
71
|
+
};
|
69
72
|
export default Token;
|
package/lib-esm/index.d.ts
CHANGED
@@ -98,7 +98,6 @@ export { default as TabNav } from './TabNav';
|
|
98
98
|
export type { TabNavProps, TabNavLinkProps } from './TabNav';
|
99
99
|
export { default as TextInput } from './TextInput';
|
100
100
|
export type { TextInputProps } from './TextInput';
|
101
|
-
export { default as TextInputWithTokens } from './TextInputWithTokens';
|
102
101
|
export { default as Text } from './Text';
|
103
102
|
export type { TextProps } from './Text';
|
104
103
|
export { default as Timeline } from './Timeline';
|
package/lib-esm/index.js
CHANGED
@@ -61,7 +61,6 @@ export { default as StyledOcticon } from './StyledOcticon';
|
|
61
61
|
export { default as SubNav } from './SubNav';
|
62
62
|
export { default as TabNav } from './TabNav';
|
63
63
|
export { default as TextInput } from './TextInput';
|
64
|
-
export { default as TextInputWithTokens } from './TextInputWithTokens';
|
65
64
|
export { default as Text } from './Text';
|
66
65
|
export { default as Timeline } from './Timeline';
|
67
66
|
export { default as Token, IssueLabelToken, ProfileToken } from './Token';
|