@paprika/tag 3.0.2 → 3.0.3
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 +3 -3
- package/src/Tag.styles.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.0.3
|
|
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
|
|
11
|
+
- @paprika/raw-button@1.0.19
|
|
12
|
+
|
|
13
|
+
## 3.0.3-next.0
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- ac538bf: Add RTL (Right-to-Left) language support by converting physical CSS properties to logical properties
|
|
18
|
+
- Updated dependencies [ac538bf]
|
|
19
|
+
- Updated dependencies [4c5c420]
|
|
20
|
+
- @paprika/stylers@1.1.12-next.0
|
|
21
|
+
- @paprika/raw-button@1.0.19-next.0
|
|
22
|
+
|
|
3
23
|
## 3.0.2
|
|
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",
|
|
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,8 +18,8 @@
|
|
|
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.
|
|
21
|
+
"@paprika/raw-button": "^1.0.19",
|
|
22
|
+
"@paprika/stylers": "^1.1.12",
|
|
23
23
|
"@paprika/tokens": "^3.1.0",
|
|
24
24
|
"@paprika/icon": "^3.0.2",
|
|
25
25
|
"prop-types": "^15.7.2"
|
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]}
|