@paprika/tag 3.0.2-next.0 → 3.0.3-next.0
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 +20 -0
- package/lib/Tag.styles.js +1 -1
- package/lib/Tag.styles.js.map +1 -1
- package/package.json +5 -5
- package/src/Tag.styles.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.0.3-next.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- ac538bf: Add RTL (Right-to-Left) language support by converting physical CSS properties to logical properties
|
|
8
|
+
- Updated dependencies [ac538bf]
|
|
9
|
+
- Updated dependencies [4c5c420]
|
|
10
|
+
- @paprika/stylers@1.1.12-next.0
|
|
11
|
+
- @paprika/raw-button@1.0.19-next.0
|
|
12
|
+
|
|
13
|
+
## 3.0.2
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Updated dependencies [80fb5c0]
|
|
18
|
+
- @paprika/tokens@3.1.0
|
|
19
|
+
- @paprika/icon@3.0.2
|
|
20
|
+
- @paprika/raw-button@1.0.18
|
|
21
|
+
- @paprika/stylers@1.1.11
|
|
22
|
+
|
|
3
23
|
## 3.0.2-next.0
|
|
4
24
|
|
|
5
25
|
### Patch Changes
|
package/lib/Tag.styles.js
CHANGED
|
@@ -56,7 +56,7 @@ var avatarWidthAndHeight = {
|
|
|
56
56
|
var tagStyles = function tagStyles(_ref) {
|
|
57
57
|
var theme = _ref.theme,
|
|
58
58
|
size = _ref.size;
|
|
59
|
-
return (0, _styledComponents.css)(["align-items:center;background:", ";border-radius:", ";box-sizing:border-box;color:", ";display:flex;height:", ";line-height:1;margin-bottom:2px;margin-
|
|
59
|
+
return (0, _styledComponents.css)(["align-items:center;background:", ";border-radius:", ";box-sizing:border-box;color:", ";display:flex;height:", ";line-height:1;margin-bottom:2px;margin-inline-end:", ";max-width:100%;padding:2px;", " [data-pka-anchor=\"avatar\"]{height:", ";min-width:", ";}"], _tokens["default"].color.blackLighten70, (0, _helpers.spacer)(2), _tokens["default"].color.white, widthAndHeight[size], _tokens["default"].spaceSm, themeStyles[theme], avatarWidthAndHeight[size], avatarWidthAndHeight[size]);
|
|
60
60
|
};
|
|
61
61
|
|
|
62
62
|
var Tag = _styledComponents["default"].div.withConfig({
|
package/lib/Tag.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Tag.styles.js"],"names":["Tags","styled","ul","css","widthAndHeight","medium","large","avatarWidthAndHeight","tagStyles","theme","size","tokens","color","blackLighten70","white","spaceSm","themeStyles","Tag","div","Ellipsis","getFontSize","space","truncateText","Delete","RawButton","icon","sizeSm","DeleteButtonStylesForLightBackground","blackLighten60","DeleteButtonStylesForDarkBackground","blackLighten30","blackLighten20","types","themes","BLACK","black","BLUE","blue","GREY","GREEN","greenDarken10","ORANGE","orangeDarken10","LIGHT_BLUE","blueLighten50","blueDarken20","LIGHT_ORANGE","orangeLighten40","orangeDarken20","severityThemes","NO_RISK","LOW_RISK","MEDIUM_RISK","HIGH_RISK","ALERT"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEO,IAAMA,IAAI,GAAGC,6BAAOC,EAAV;AAAA;AAAA;AAAA,GACf;AAAA,aAAMC,qBAAN;AAAA,CADe,CAAV;;;AAWP,IAAMC,cAAc,GAAG;AACrBC,EAAAA,MAAM,EAAE,MADa;AAErBC,EAAAA,KAAK,EAAE;AAFc,CAAvB;AAKA,IAAMC,oBAAoB,GAAG;AAC3BF,EAAAA,MAAM,EAAE,MADmB;AAE3BC,EAAAA,KAAK,EAAE;AAFoB,CAA7B;;AAKA,IAAME,SAAS,GAAG,SAAZA,SAAY;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,IAAV,QAAUA,IAAV;AAAA,aAAqBP,qBAArB,
|
|
1
|
+
{"version":3,"sources":["../src/Tag.styles.js"],"names":["Tags","styled","ul","css","widthAndHeight","medium","large","avatarWidthAndHeight","tagStyles","theme","size","tokens","color","blackLighten70","white","spaceSm","themeStyles","Tag","div","Ellipsis","getFontSize","space","truncateText","Delete","RawButton","icon","sizeSm","DeleteButtonStylesForLightBackground","blackLighten60","DeleteButtonStylesForDarkBackground","blackLighten30","blackLighten20","types","themes","BLACK","black","BLUE","blue","GREY","GREEN","greenDarken10","ORANGE","orangeDarken10","LIGHT_BLUE","blueLighten50","blueDarken20","LIGHT_ORANGE","orangeLighten40","orangeDarken20","severityThemes","NO_RISK","LOW_RISK","MEDIUM_RISK","HIGH_RISK","ALERT"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tokens from \"@paprika/tokens\";\nimport RawButton from \"@paprika/raw-button\";\nimport { fontSize, spacer } from \"@paprika/stylers/lib/helpers\";\nimport { truncateText } from \"@paprika/stylers/lib/includes\";\nimport * as types from \"./types\";\n\nexport const Tags = styled.ul(\n () => css`\n display: flex;\n flex-wrap: wrap;\n line-height: 1;\n list-style-type: none;\n margin: 0;\n padding: 0;\n `\n);\n\nconst widthAndHeight = {\n medium: \"24px\",\n large: \"28px\",\n};\n\nconst avatarWidthAndHeight = {\n medium: \"20px\",\n large: \"24px\",\n};\n\nconst tagStyles = ({ theme, size }) => css`\n align-items: center;\n background: ${tokens.color.blackLighten70};\n border-radius: ${spacer(2)};\n box-sizing: border-box;\n color: ${tokens.color.white};\n display: flex;\n height: ${widthAndHeight[size]};\n line-height: 1;\n margin-bottom: 2px;\n margin-inline-end: ${tokens.spaceSm};\n max-width: 100%;\n padding: 2px;\n ${themeStyles[theme]}\n\n [data-pka-anchor=\"avatar\"] {\n height: ${avatarWidthAndHeight[size]};\n min-width: ${avatarWidthAndHeight[size]};\n }\n`;\n\nexport const Tag = styled.div(tagStyles);\n\nexport const Ellipsis = styled.div(({ size }) => {\n const getFontSize = {\n medium: fontSize(-1),\n large: fontSize(0),\n };\n\n return css`\n align-items: center;\n display: block;\n ${getFontSize[size]};\n padding: 0 ${tokens.space} 1px ${tokens.space};\n ${truncateText};\n `;\n});\n\nexport const Delete = styled(RawButton)`\n align-items: center;\n border-radius: 50%;\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n font-size: ${tokens.icon.sizeSm};\n height: ${tokens.icon.sizeSm};\n justify-content: center;\n min-height: auto;\n width: ${tokens.icon.sizeSm};\n`;\n\nconst DeleteButtonStylesForLightBackground = css`\n ${Delete} {\n color: ${tokens.color.blackLighten70};\n &:hover,\n &:focus {\n color: ${tokens.color.blackLighten60};\n }\n }\n`;\n\nconst DeleteButtonStylesForDarkBackground = css`\n ${Delete} {\n color: ${tokens.color.blackLighten30};\n &:hover,\n &:focus {\n color: ${tokens.color.blackLighten20};\n }\n }\n`;\n\nconst themeStyles = {\n [types.themes.BLACK]: css`\n background: ${tokens.color.black};\n ${DeleteButtonStylesForLightBackground}\n `,\n\n [types.themes.BLUE]: css`\n background: ${tokens.color.blue};\n ${DeleteButtonStylesForLightBackground}\n `,\n\n [types.themes.GREY]: css`\n background: ${tokens.color.blackLighten70};\n color: ${tokens.color.black};\n ${DeleteButtonStylesForDarkBackground}\n `,\n\n [types.themes.GREEN]: css`\n background: ${tokens.color.greenDarken10};\n ${DeleteButtonStylesForLightBackground}\n `,\n\n [types.themes.ORANGE]: css`\n background: ${tokens.color.orangeDarken10};\n ${DeleteButtonStylesForLightBackground}\n `,\n\n [types.themes.LIGHT_BLUE]: css`\n background: ${tokens.color.blueLighten50};\n color: ${tokens.color.blueDarken20};\n ${DeleteButtonStylesForDarkBackground}\n `,\n\n [types.themes.LIGHT_ORANGE]: css`\n background: ${tokens.color.orangeLighten40};\n color: ${tokens.color.orangeDarken20};\n ${DeleteButtonStylesForDarkBackground}\n `,\n\n [types.severityThemes.NO_RISK]: css`\n background: ${tokens.color.blackLighten70};\n color: ${tokens.color.black};\n ${DeleteButtonStylesForDarkBackground}\n `,\n\n [types.severityThemes.LOW_RISK]: css`\n background: #299a7a;\n ${DeleteButtonStylesForLightBackground}\n `,\n\n [types.severityThemes.MEDIUM_RISK]: css`\n background: #c9af28;\n ${DeleteButtonStylesForLightBackground}\n `,\n\n [types.severityThemes.HIGH_RISK]: css`\n background: #cd3c44;\n ${DeleteButtonStylesForLightBackground}\n `,\n\n [types.severityThemes.ALERT]: css`\n background: none;\n border: 1px solid ${tokens.color.orangeDarken10};\n color: ${tokens.color.orangeDarken10};\n ${DeleteButtonStylesForDarkBackground}\n `,\n};\n"],"file":"Tag.styles.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@paprika/tag",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.3-next.0",
|
|
4
4
|
"description": "Tag can be both static UI labels or removable components. Static Tag is mostly used to show an item’s status. A removable Tag should be used to add or group objects.",
|
|
5
5
|
"author": "@paprika",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -18,10 +18,10 @@
|
|
|
18
18
|
"@babel/runtime-corejs2": "^7.3.1",
|
|
19
19
|
"@paprika/constants": "^1.0.1",
|
|
20
20
|
"@paprika/helpers": "^2.4.2",
|
|
21
|
-
"@paprika/raw-button": "^1.0.
|
|
22
|
-
"@paprika/stylers": "^1.1.
|
|
23
|
-
"@paprika/tokens": "^3.1.0
|
|
24
|
-
"@paprika/icon": "^3.0.2
|
|
21
|
+
"@paprika/raw-button": "^1.0.19-next.0",
|
|
22
|
+
"@paprika/stylers": "^1.1.12-next.0",
|
|
23
|
+
"@paprika/tokens": "^3.1.0",
|
|
24
|
+
"@paprika/icon": "^3.0.2",
|
|
25
25
|
"prop-types": "^15.7.2"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
package/src/Tag.styles.js
CHANGED
|
@@ -36,7 +36,7 @@ const tagStyles = ({ theme, size }) => css`
|
|
|
36
36
|
height: ${widthAndHeight[size]};
|
|
37
37
|
line-height: 1;
|
|
38
38
|
margin-bottom: 2px;
|
|
39
|
-
margin-
|
|
39
|
+
margin-inline-end: ${tokens.spaceSm};
|
|
40
40
|
max-width: 100%;
|
|
41
41
|
padding: 2px;
|
|
42
42
|
${themeStyles[theme]}
|