@paprika/tag 0.0.13 → 0.0.15
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 +41 -0
- package/lib/Tag.js +7 -5
- package/lib/Tag.js.map +1 -1
- package/lib/Tag.styles.js +4 -4
- package/lib/Tag.styles.js.map +1 -1
- package/lib/index.js +2 -2
- package/lib/types.js +4 -4
- package/package.json +5 -5
- package/src/Tag.styles.js +4 -4
- package/stories/Examples/Variations.js +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,46 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.0.15
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [27e1439]
|
|
8
|
+
- @paprika/tokens@1.1.1
|
|
9
|
+
- @paprika/button@1.1.7
|
|
10
|
+
- @paprika/raw-button@1.0.8
|
|
11
|
+
- @paprika/stylers@1.1.2
|
|
12
|
+
|
|
13
|
+
## 0.0.15-next.0
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Updated dependencies [27e1439]
|
|
18
|
+
- @paprika/tokens@1.1.1-next.0
|
|
19
|
+
- @paprika/button@1.1.7-next.0
|
|
20
|
+
- @paprika/raw-button@1.0.8-next.0
|
|
21
|
+
- @paprika/stylers@1.1.2-next.0
|
|
22
|
+
|
|
23
|
+
## 0.0.14
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- Updated dependencies [3385c1f]
|
|
28
|
+
- Updated dependencies [fd94ddb]
|
|
29
|
+
- @paprika/tokens@1.1.0
|
|
30
|
+
- @paprika/button@1.1.6
|
|
31
|
+
- @paprika/raw-button@1.0.7
|
|
32
|
+
- @paprika/stylers@1.1.1
|
|
33
|
+
|
|
34
|
+
## 0.0.14-next.0
|
|
35
|
+
|
|
36
|
+
### Patch Changes
|
|
37
|
+
|
|
38
|
+
- Updated dependencies [3385c1f]
|
|
39
|
+
- @paprika/tokens@1.1.0-next.0
|
|
40
|
+
- @paprika/button@1.1.6-next.0
|
|
41
|
+
- @paprika/raw-button@1.0.7-next.0
|
|
42
|
+
- @paprika/stylers@1.1.1-next.0
|
|
43
|
+
|
|
3
44
|
## 0.0.13
|
|
4
45
|
|
|
5
46
|
### Patch Changes
|
package/lib/Tag.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _typeof = require("@babel/runtime-corejs2/helpers/typeof");
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _WeakMap = require("@babel/runtime-corejs2/core-js/weak-map");
|
|
6
6
|
|
|
7
7
|
var _Object$defineProperty = require("@babel/runtime-corejs2/core-js/object/define-property");
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs2/core-js/object/get-own-property-descriptor");
|
|
10
10
|
|
|
11
|
-
var
|
|
11
|
+
var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
|
|
12
12
|
|
|
13
13
|
_Object$defineProperty(exports, "__esModule", {
|
|
14
14
|
value: true
|
|
@@ -32,6 +32,8 @@ var sc = _interopRequireWildcard(require("./Tag.styles"));
|
|
|
32
32
|
|
|
33
33
|
var types = _interopRequireWildcard(require("./types"));
|
|
34
34
|
|
|
35
|
+
var _excluded = ["children", "onRemove", "size", "onClick", "a11yText", "avatar", "isDisabled"];
|
|
36
|
+
|
|
35
37
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
36
38
|
|
|
37
39
|
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,7 +46,7 @@ function Tag(props) {
|
|
|
44
46
|
a11yText = props.a11yText,
|
|
45
47
|
avatar = props.avatar,
|
|
46
48
|
isDisabled = props.isDisabled,
|
|
47
|
-
moreProps = (0, _objectWithoutProperties2["default"])(props,
|
|
49
|
+
moreProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
|
48
50
|
var I18n = (0, _useI18n["default"])();
|
|
49
51
|
|
|
50
52
|
var handleRemove = function handleRemove(e) {
|
package/lib/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Tag.js"],"names":["Tag","props","children","onRemove","size","onClick","a11yText","avatar","isDisabled","moreProps","I18n","handleRemove","e","stopPropagation","handleDeleteKeyDown","key","a11yTagText","t","value","content","tagProps","RawButton","types","sizes","theme","themes","severityTheme","severityThemes","propTypes","PropTypes","string","node","isRequired","bool","func","oneOf","MEDIUM","LARGE","BLACK","BLUE","GREEN","GREY","LIGHT_BLUE","LIGHT_ORANGE","ORANGE","NO_RISK","LOW_RISK","MEDIUM_RISK","HIGH_RISK","ALERT","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA
|
|
1
|
+
{"version":3,"sources":["../src/Tag.js"],"names":["Tag","props","children","onRemove","size","onClick","a11yText","avatar","isDisabled","moreProps","I18n","handleRemove","e","stopPropagation","handleDeleteKeyDown","key","a11yTagText","t","value","content","tagProps","RawButton","types","sizes","theme","themes","severityTheme","severityThemes","propTypes","PropTypes","string","node","isRequired","bool","func","oneOf","MEDIUM","LARGE","BLACK","BLUE","GREEN","GREY","LIGHT_BLUE","LIGHT_ORANGE","ORANGE","NO_RISK","LOW_RISK","MEDIUM_RISK","HIGH_RISK","ALERT","defaultProps"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport RawButton from \"@paprika/raw-button\";\nimport useI18n from \"@paprika/l10n/lib/useI18n\";\nimport * as sc from \"./Tag.styles\";\nimport * as types from \"./types\";\n\nexport default function Tag(props) {\n const { children, onRemove, size, onClick, a11yText, avatar, isDisabled, ...moreProps } = props;\n const I18n = useI18n();\n\n const handleRemove = e => {\n onRemove();\n e.stopPropagation();\n };\n\n const handleDeleteKeyDown = e => {\n if (e.key === \"Enter\" || e.key === \"Backspace\" || e.key === \" \") {\n handleRemove(e);\n }\n };\n\n const a11yTagText = typeof children === \"string\" ? I18n.t(\"remove_a11y\", { value: children }) : I18n.t(\"remove\");\n\n const content = (\n <>\n {avatar}\n <sc.Ellipsis size={size}>{children}</sc.Ellipsis>\n {onRemove ? (\n <sc.Delete\n a11yText={a11yText || a11yTagText}\n isDisabled={isDisabled}\n size={size}\n data-pka-anchor=\"tag.remove\"\n data-qa-anchor=\"paprika.tag.remove\"\n onClick={handleRemove}\n onKeyDown={handleDeleteKeyDown}\n />\n ) : null}\n </>\n );\n\n const tagProps = {\n size,\n \"data-pka-anchor\": \"tag\",\n };\n\n if (onClick) {\n tagProps.a11yText = a11yText;\n tagProps.isDisabled = isDisabled;\n tagProps.onClick = onClick;\n }\n\n return (\n <sc.Tag as={onClick ? RawButton : \"div\"} {...tagProps} {...moreProps}>\n {content}\n </sc.Tag>\n );\n}\n\nTag.types = {\n size: types.sizes,\n theme: types.themes,\n severityTheme: types.severityThemes,\n};\n\nconst propTypes = {\n /** used in aria-tag on the root element */\n a11yText: PropTypes.string,\n /** Can pass a avatar to be displayed to the left of the tag content */\n avatar: PropTypes.node,\n /** Content to show in the central area of the tag */\n children: PropTypes.node.isRequired,\n /** Disables tag onClick and remove button functionality */\n isDisabled: PropTypes.bool,\n /** Fires when clicking the root element. Should also pass value for a11yText when using this */\n onClick: PropTypes.func,\n /** Pass a function to show a remove button */\n onRemove: PropTypes.func,\n /** Size of the tag(font size, min-height, padding, etc). */\n size: PropTypes.oneOf([Tag.types.size.MEDIUM, Tag.types.size.LARGE]),\n /** Visual theme of the tag */\n theme: PropTypes.oneOf([\n Tag.types.theme.BLACK,\n Tag.types.theme.BLUE,\n Tag.types.theme.GREEN,\n Tag.types.theme.GREY,\n Tag.types.theme.LIGHT_BLUE,\n Tag.types.theme.LIGHT_ORANGE,\n Tag.types.theme.ORANGE,\n Tag.types.severityTheme.NO_RISK,\n Tag.types.severityTheme.LOW_RISK,\n Tag.types.severityTheme.MEDIUM_RISK,\n Tag.types.severityTheme.HIGH_RISK,\n Tag.types.severityTheme.ALERT,\n ]),\n};\n\nconst defaultProps = {\n a11yText: null,\n avatar: null,\n isDisabled: false,\n onClick: null,\n onRemove: null,\n size: Tag.types.size.MEDIUM,\n theme: Tag.types.theme.GREY,\n};\n\nTag.propTypes = propTypes;\nTag.defaultProps = defaultProps;\n"],"file":"Tag.js"}
|
package/lib/Tag.styles.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _typeof = require("@babel/runtime-corejs2/helpers/typeof");
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _WeakMap = require("@babel/runtime-corejs2/core-js/weak-map");
|
|
6
6
|
|
|
7
7
|
var _Object$defineProperty = require("@babel/runtime-corejs2/core-js/object/define-property");
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs2/core-js/object/get-own-property-descriptor");
|
|
10
10
|
|
|
11
|
-
var
|
|
11
|
+
var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
|
|
12
12
|
|
|
13
13
|
_Object$defineProperty(exports, "__esModule", {
|
|
14
14
|
value: true
|
package/lib/Tag.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Tag.styles.js"],"names":["themeStyles","types","themes","BLACK","css","tokens","color","black","BLUE","blue","GREY","blackLighten70","GREEN","greenDarken10","ORANGE","orangeDarken10","LIGHT_BLUE","blueLighten50","blueDarken20","LIGHT_ORANGE","orangeLighten40","orangeDarken20","severityThemes","NO_RISK","LOW_RISK","MEDIUM_RISK","HIGH_RISK","ALERT","Tags","styled","ul","widthAndHeight","medium","large","avatarWidthAndHeight","tagStyles","theme","size","white","spaceSm","Tag","div","Ellipsis","getFontSize","space","truncateText","Delete","Button","Close","fontSize","padding","width","blackLighten60"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,WAAW,sEACdC,KAAK,CAACC,MAAN,CAAaC,KADC,MACOC,qBADP,wBAECC,mBAAOC,KAAP,CAAaC,KAFd,mDAKdN,KAAK,CAACC,MAAN,CAAaM,IALC,MAKMJ,qBALN,wBAMCC,mBAAOC,KAAP,CAAaG,IANd,mDASdR,KAAK,CAACC,MAAN,CAAaQ,IATC,MASMN,qBATN,mCAUCC,mBAAOC,KAAP,CAAaK,cAVd,EAWJN,mBAAOC,KAAP,CAAaC,KAXT,mDAcdN,KAAK,CAACC,MAAN,CAAaU,KAdC,MAcOR,qBAdP,wBAeCC,mBAAOC,KAAP,CAAaO,aAfd,mDAkBdZ,KAAK,CAACC,MAAN,CAAaY,MAlBC,MAkBQV,qBAlBR,wBAmBCC,mBAAOC,KAAP,CAAaS,cAnBd,mDAsBdd,KAAK,CAACC,MAAN,CAAac,UAtBC,MAsBYZ,qBAtBZ,mCAuBCC,mBAAOC,KAAP,CAAaW,aAvBd,EAwBJZ,mBAAOC,KAAP,CAAaY,YAxBT,mDA2BdjB,KAAK,CAACC,MAAN,CAAaiB,YA3BC,MA2Bcf,qBA3Bd,mCA4BCC,mBAAOC,KAAP,CAAac,eA5Bd,EA6BJf,mBAAOC,KAAP,CAAae,cA7BT,mDAgCdpB,KAAK,CAACqB,cAAN,CAAqBC,OAhCP,MAgCiBnB,qBAhCjB,mCAiCCC,mBAAOC,KAAP,CAAaK,cAjCd,EAkCJN,mBAAOC,KAAP,CAAaC,KAlCT,mDAqCdN,KAAK,CAACqB,cAAN,CAAqBE,QArCP,MAqCkBpB,qBArClB,4EAyCdH,KAAK,CAACqB,cAAN,CAAqBG,WAzCP,MAyCqBrB,qBAzCrB,4EA6CdH,KAAK,CAACqB,cAAN,CAAqBI,SA7CP,MA6CmBtB,qBA7CnB,4EAiDdH,KAAK,CAACqB,cAAN,CAAqBK,KAjDP,MAiDevB,qBAjDf,yDAmDOC,mBAAOC,KAAP,CAAaS,cAnDpB,EAoDJV,mBAAOC,KAAP,CAAaS,cApDT,iBAAjB;;AAwDO,IAAMa,IAAI,GAAGC,6BAAOC,EAAV;AAAA;AAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/Tag.styles.js"],"names":["themeStyles","types","themes","BLACK","css","tokens","color","black","BLUE","blue","GREY","blackLighten70","GREEN","greenDarken10","ORANGE","orangeDarken10","LIGHT_BLUE","blueLighten50","blueDarken20","LIGHT_ORANGE","orangeLighten40","orangeDarken20","severityThemes","NO_RISK","LOW_RISK","MEDIUM_RISK","HIGH_RISK","ALERT","Tags","styled","ul","widthAndHeight","medium","large","avatarWidthAndHeight","tagStyles","theme","size","white","spaceSm","Tag","div","Ellipsis","getFontSize","space","truncateText","Delete","Button","Close","fontSize","padding","width","blackLighten60"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tokens from \"@paprika/tokens\";\nimport Button from \"@paprika/button\";\nimport { fontSize, spacer } from \"@paprika/stylers/lib/helpers\";\nimport { truncateText } from \"@paprika/stylers/lib/includes\";\nimport * as types from \"./types\";\n\nconst themeStyles = {\n [types.themes.BLACK]: css`\n background: ${tokens.color.black};\n `,\n\n [types.themes.BLUE]: css`\n background: ${tokens.color.blue};\n `,\n\n [types.themes.GREY]: css`\n background: ${tokens.color.blackLighten70};\n color: ${tokens.color.black};\n `,\n\n [types.themes.GREEN]: css`\n background: ${tokens.color.greenDarken10};\n `,\n\n [types.themes.ORANGE]: css`\n background: ${tokens.color.orangeDarken10};\n `,\n\n [types.themes.LIGHT_BLUE]: css`\n background: ${tokens.color.blueLighten50};\n color: ${tokens.color.blueDarken20};\n `,\n\n [types.themes.LIGHT_ORANGE]: css`\n background: ${tokens.color.orangeLighten40};\n color: ${tokens.color.orangeDarken20};\n `,\n\n [types.severityThemes.NO_RISK]: css`\n background: ${tokens.color.blackLighten70};\n color: ${tokens.color.black};\n `,\n\n [types.severityThemes.LOW_RISK]: css`\n background: #299a7a;\n `,\n\n [types.severityThemes.MEDIUM_RISK]: css`\n background: #c9af28;\n `,\n\n [types.severityThemes.HIGH_RISK]: css`\n background: #cd3c44;\n `,\n\n [types.severityThemes.ALERT]: css`\n background: none;\n border: 1px solid ${tokens.color.orangeDarken10};\n color: ${tokens.color.orangeDarken10};\n `,\n};\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-right: ${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(Button.Close)(({ size }) => {\n const fontSize = {\n medium: \"10px\",\n large: \"12px\",\n };\n\n const padding = {\n medium: \"4px\",\n large: \"5px\",\n };\n\n const width = {\n medium: \"20px\",\n large: \"24px\",\n };\n\n return css`\n align-items: center;\n border-radius: 50%;\n box-sizing: border-box;\n display: flex;\n flex-shrink: 0;\n font-size: ${fontSize[size]};\n height: ${width[size]};\n justify-content: center;\n min-height: auto;\n padding: ${padding[size]};\n width: ${width[size]};\n\n &:hover {\n background: ${tokens.color.blackLighten60};\n }\n\n &:focus {\n background: ${tokens.color.blackLighten60};\n }\n `;\n});\n"],"file":"Tag.styles.js"}
|
package/lib/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
3
|
var _Object$defineProperty = require("@babel/runtime-corejs2/core-js/object/define-property");
|
|
6
4
|
|
|
5
|
+
var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
|
|
6
|
+
|
|
7
7
|
_Object$defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
package/lib/types.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs2/core-js/object/get-own-property-descriptor");
|
|
4
|
-
|
|
5
|
-
var _Object$defineProperty = require("@babel/runtime-corejs2/core-js/object/define-property");
|
|
6
|
-
|
|
7
3
|
var _typeof = require("@babel/runtime-corejs2/helpers/typeof");
|
|
8
4
|
|
|
9
5
|
var _WeakMap = require("@babel/runtime-corejs2/core-js/weak-map");
|
|
10
6
|
|
|
7
|
+
var _Object$defineProperty = require("@babel/runtime-corejs2/core-js/object/define-property");
|
|
8
|
+
|
|
9
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs2/core-js/object/get-own-property-descriptor");
|
|
10
|
+
|
|
11
11
|
_Object$defineProperty(exports, "__esModule", {
|
|
12
12
|
value: true
|
|
13
13
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@paprika/tag",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.15",
|
|
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",
|
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@babel/runtime-corejs2": "^7.3.1",
|
|
19
|
-
"@paprika/button": "^1.1.
|
|
19
|
+
"@paprika/button": "^1.1.7",
|
|
20
20
|
"@paprika/constants": "^1.0.0",
|
|
21
21
|
"@paprika/helpers": "^2.1.3",
|
|
22
|
-
"@paprika/raw-button": "^1.0.
|
|
23
|
-
"@paprika/stylers": "^1.1.
|
|
24
|
-
"@paprika/tokens": "^1.
|
|
22
|
+
"@paprika/raw-button": "^1.0.8",
|
|
23
|
+
"@paprika/stylers": "^1.1.2",
|
|
24
|
+
"@paprika/tokens": "^1.1.1",
|
|
25
25
|
"prop-types": "^15.7.2"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
package/src/Tag.styles.js
CHANGED
|
@@ -61,16 +61,16 @@ const themeStyles = {
|
|
|
61
61
|
`,
|
|
62
62
|
};
|
|
63
63
|
|
|
64
|
-
export const Tags = styled.ul(
|
|
65
|
-
|
|
64
|
+
export const Tags = styled.ul(
|
|
65
|
+
() => css`
|
|
66
66
|
display: flex;
|
|
67
67
|
flex-wrap: wrap;
|
|
68
68
|
line-height: 1;
|
|
69
69
|
list-style-type: none;
|
|
70
70
|
margin: 0;
|
|
71
71
|
padding: 0;
|
|
72
|
-
|
|
73
|
-
|
|
72
|
+
`
|
|
73
|
+
);
|
|
74
74
|
|
|
75
75
|
const widthAndHeight = {
|
|
76
76
|
medium: "24px",
|