@manuscripts/style-guide 1.7.10-LEAN-3415-1 → 1.7.10-LEAN-3415-2

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.
Files changed (5) hide show
  1. package/dist/cjs/components/Button.js +2 -8
  2. package/dist/cjs/components/ContextMenu.js +10 -1
  3. package/dist/es/components/Button.js +2 -8
  4. package/dist/es/components/ContextMenu.js +10 -1
  5. package/package.json +1 -1
package/dist/cjs/components/Button.js CHANGED
@@ -44,8 +44,7 @@ const dangerBtnStyles = (0, styled_components_1.css) `
44
44
  ${(props) => btnColors(props.theme.colors.button.error.color.default, props.theme.colors.button.error.background.default, props.theme.colors.button.error.border.default, true)}
45
45
 
46
46
  &:not([disabled]):hover, &:not([disabled]):focus {
47
- ${(props) => btnColors('red', 'pink', props.theme.colors.button.error.border.hover, true)}
48
- }
47
+ ${(props) => btnColors(props.theme.colors.button.error.color.hover, props.theme.colors.button.error.background.hover, props.theme.colors.button.error.border.hover, true)}
49
48
 
50
49
  &:not([disabled]):active {
51
50
  ${(props) => btnColors(props.theme.colors.button.error.color.active, props.theme.colors.button.error.background.active, props.theme.colors.button.error.border.active)}
@@ -233,7 +232,7 @@ exports.IconButton = (0, styled_components_1.default)(IconButtonTemplate) `
233
232
  ${(props) => btnColors('#6e6e6e', props.theme.colors.button.default.background.default, props.theme.colors.button.default.border.default, false)}
234
233
 
235
234
  &:not([disabled]):hover, &:not([disabled]):focus {
236
- ${(props) => btnColors('#363636', '#f2f2f2', '#f2f2f2', false)}
235
+ ${(props) => btnColors(props.theme.colors.brand.medium, 'transparent', 'transparent', false)}
237
236
  }
238
237
 
239
238
  &:not([disabled]):active {
@@ -294,11 +293,6 @@ exports.IconButtonGroup = styled_components_1.default.div `
294
293
  justify-content: flex-start;
295
294
  align-items: center;
296
295
 
297
- // button:hover {
298
- // color: inherit !important;
299
- // background-color: hotpink !important;
300
- // }
301
-
302
296
  button {
303
297
  width: 28px;
304
298
  height: 28px;
package/dist/cjs/components/ContextMenu.js CHANGED
@@ -20,6 +20,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
21
  exports.ContextMenu = void 0;
22
22
  const react_1 = __importDefault(require("react"));
23
+ const styled_components_1 = __importDefault(require("styled-components"));
23
24
  const Button_1 = require("./Button");
24
25
  const icons_1 = require("./icons");
25
26
  const Tooltip_1 = require("./Tooltip");
@@ -27,6 +28,14 @@ const Icons = {
27
28
  AddComment: icons_1.AddComment,
28
29
  EditIcon: icons_1.EditIcon,
29
30
  };
31
+ const ContextMenuIconButton = (0, styled_components_1.default)(Button_1.IconButton) `
32
+ &:not([disabled]):hover,
33
+ &:not([disabled]):focus {
34
+ color: #363636;
35
+ background-color: #f2f2f2;
36
+ border-color: #f2f2f2;
37
+ }
38
+ `;
30
39
  const ContextMenu = ({ actions }) => {
31
40
  let Icon;
32
41
  return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -34,7 +43,7 @@ const ContextMenu = ({ actions }) => {
34
43
  {
35
44
  Icon = Icons[action.icon];
36
45
  }
37
- return (react_1.default.createElement(Button_1.IconButton, { key: action.icon, "data-tooltip-id": action.icon, onClick: action.action },
46
+ return (react_1.default.createElement(ContextMenuIconButton, { key: action.icon, "data-tooltip-id": action.icon, onClick: action.action },
38
47
  react_1.default.createElement(Icon, null),
39
48
  react_1.default.createElement(Tooltip_1.Tooltip, { id: action.icon, place: "bottom" }, action.label)));
40
49
  }))));
package/dist/es/components/Button.js CHANGED
@@ -18,8 +18,7 @@ const dangerBtnStyles = css `
18
18
  ${(props) => btnColors(props.theme.colors.button.error.color.default, props.theme.colors.button.error.background.default, props.theme.colors.button.error.border.default, true)}
19
19
 
20
20
  &:not([disabled]):hover, &:not([disabled]):focus {
21
- ${(props) => btnColors('red', 'pink', props.theme.colors.button.error.border.hover, true)}
22
- }
21
+ ${(props) => btnColors(props.theme.colors.button.error.color.hover, props.theme.colors.button.error.background.hover, props.theme.colors.button.error.border.hover, true)}
23
22
 
24
23
  &:not([disabled]):active {
25
24
  ${(props) => btnColors(props.theme.colors.button.error.color.active, props.theme.colors.button.error.background.active, props.theme.colors.button.error.border.active)}
@@ -207,7 +206,7 @@ export const IconButton = styled(IconButtonTemplate) `
207
206
  ${(props) => btnColors('#6e6e6e', props.theme.colors.button.default.background.default, props.theme.colors.button.default.border.default, false)}
208
207
 
209
208
  &:not([disabled]):hover, &:not([disabled]):focus {
210
- ${(props) => btnColors('#363636', '#f2f2f2', '#f2f2f2', false)}
209
+ ${(props) => btnColors(props.theme.colors.brand.medium, 'transparent', 'transparent', false)}
211
210
  }
212
211
 
213
212
  &:not([disabled]):active {
@@ -268,11 +267,6 @@ export const IconButtonGroup = styled.div `
268
267
  justify-content: flex-start;
269
268
  align-items: center;
270
269
 
271
- // button:hover {
272
- // color: inherit !important;
273
- // background-color: hotpink !important;
274
- // }
275
-
276
270
  button {
277
271
  width: 28px;
278
272
  height: 28px;
package/dist/es/components/ContextMenu.js CHANGED
@@ -14,6 +14,7 @@
14
14
  * limitations under the License.
15
15
  */
16
16
  import React from 'react';
17
+ import styled from 'styled-components';
17
18
  import { IconButton, IconButtonGroup } from './Button';
18
19
  import { AddComment, EditIcon } from './icons';
19
20
  import { Tooltip } from './Tooltip';
@@ -21,6 +22,14 @@ const Icons = {
21
22
  AddComment: AddComment,
22
23
  EditIcon: EditIcon,
23
24
  };
25
+ const ContextMenuIconButton = styled(IconButton) `
26
+ &:not([disabled]):hover,
27
+ &:not([disabled]):focus {
28
+ color: #363636;
29
+ background-color: #f2f2f2;
30
+ border-color: #f2f2f2;
31
+ }
32
+ `;
24
33
  export const ContextMenu = ({ actions }) => {
25
34
  let Icon;
26
35
  return (React.createElement(React.Fragment, null,
@@ -28,7 +37,7 @@ export const ContextMenu = ({ actions }) => {
28
37
  {
29
38
  Icon = Icons[action.icon];
30
39
  }
31
- return (React.createElement(IconButton, { key: action.icon, "data-tooltip-id": action.icon, onClick: action.action },
40
+ return (React.createElement(ContextMenuIconButton, { key: action.icon, "data-tooltip-id": action.icon, onClick: action.action },
32
41
  React.createElement(Icon, null),
33
42
  React.createElement(Tooltip, { id: action.icon, place: "bottom" }, action.label)));
34
43
  }))));
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@manuscripts/style-guide",
3
3
  "description": "Shared components for Manuscripts applications",
4
- "version": "1.7.10-LEAN-3415-1",
4
+ "version": "1.7.10-LEAN-3415-2",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",