@primer/components 0.0.0-2021927182958 → 0.0.0-2021927184638
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 +5 -5
- package/dist/browser.esm.js +15 -13
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +34 -32
- package/dist/browser.umd.js.map +1 -1
- package/lib/TextInputWithTokens.d.ts +0 -4
- package/lib/TextInputWithTokens.js +48 -81
- package/lib/Token/Token.js +13 -2
- package/lib/Token/TokenBase.js +0 -4
- package/lib/Token/_RemoveTokenButton.js +15 -2
- package/lib/_TextInputWrapper.js +1 -1
- package/lib-esm/TextInputWithTokens.d.ts +0 -4
- package/lib-esm/TextInputWithTokens.js +48 -81
- package/lib-esm/Token/Token.js +13 -2
- package/lib-esm/Token/TokenBase.js +0 -4
- package/lib-esm/Token/_RemoveTokenButton.js +11 -2
- package/lib-esm/_TextInputWrapper.js +1 -1
- package/package.json +1 -1
|
@@ -20,7 +20,6 @@ const variants = variant({
|
|
|
20
20
|
variants: {
|
|
21
21
|
small: {
|
|
22
22
|
fontSize: 0,
|
|
23
|
-
gap: 1,
|
|
24
23
|
height: tokenSizes.small,
|
|
25
24
|
// without setting lineHeight to match height, the "x" appears vertically mis-aligned
|
|
26
25
|
lineHeight: tokenSizes.small,
|
|
@@ -33,7 +32,6 @@ const variants = variant({
|
|
|
33
32
|
},
|
|
34
33
|
medium: {
|
|
35
34
|
fontSize: 0,
|
|
36
|
-
gap: 1,
|
|
37
35
|
height: tokenSizes.medium,
|
|
38
36
|
lineHeight: tokenSizes.medium,
|
|
39
37
|
paddingLeft: 2,
|
|
@@ -43,7 +41,6 @@ const variants = variant({
|
|
|
43
41
|
},
|
|
44
42
|
large: {
|
|
45
43
|
fontSize: 0,
|
|
46
|
-
gap: 2,
|
|
47
44
|
height: tokenSizes.large,
|
|
48
45
|
lineHeight: tokenSizes.large,
|
|
49
46
|
paddingLeft: 2,
|
|
@@ -53,7 +50,6 @@ const variants = variant({
|
|
|
53
50
|
},
|
|
54
51
|
extralarge: {
|
|
55
52
|
fontSize: 1,
|
|
56
|
-
gap: 2,
|
|
57
53
|
height: tokenSizes.extralarge,
|
|
58
54
|
lineHeight: tokenSizes.extralarge,
|
|
59
55
|
paddingLeft: 3,
|
|
@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
2
2
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { XIcon } from '@primer/octicons-react';
|
|
5
|
-
import styled from 'styled-components';
|
|
5
|
+
import styled, { css } from 'styled-components';
|
|
6
6
|
import { variant } from 'styled-system';
|
|
7
7
|
import { get } from '../constants';
|
|
8
8
|
import sx from '../sx';
|
|
@@ -34,7 +34,16 @@ const getTokenButtonIconSize = size => parseInt(tokenSizes[size || defaultTokenS
|
|
|
34
34
|
const StyledTokenButton = styled.span.withConfig({
|
|
35
35
|
displayName: "_RemoveTokenButton__StyledTokenButton",
|
|
36
36
|
componentId: "sc-14lvcw1-0"
|
|
37
|
-
})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px
|
|
37
|
+
})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;", " &:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, props => {
|
|
38
|
+
switch (props.size) {
|
|
39
|
+
case 'large':
|
|
40
|
+
case 'extralarge':
|
|
41
|
+
return css(["margin-left:", ";"], get('space.2'));
|
|
42
|
+
|
|
43
|
+
default:
|
|
44
|
+
return css(["margin-left:", ";"], get('space.1'));
|
|
45
|
+
}
|
|
46
|
+
}, get('colors.neutral.muted'), get('colors.neutral.subtle'), variants, sx);
|
|
38
47
|
|
|
39
48
|
const RemoveTokenButton = ({
|
|
40
49
|
'aria-label': ariaLabel,
|
|
@@ -21,7 +21,7 @@ const sizeVariants = variant({
|
|
|
21
21
|
const TextInputWrapper = styled.span.withConfig({
|
|
22
22
|
displayName: "_TextInputWrapper__TextInputWrapper",
|
|
23
23
|
componentId: "sc-5vfcis-0"
|
|
24
|
-
})(["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:", ";
|
|
24
|
+
})(["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 => {
|
|
25
25
|
if (props.hasIcon) {
|
|
26
26
|
return css(["padding:0;"]);
|
|
27
27
|
} else {
|