@auth0/quantum-product 2.4.4 → 2.4.5

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 (9) hide show
  1. package/card/card.js +2 -1
  2. package/dialog/dialog-title/dialog-title.js +1 -1
  3. package/esm/card/card.js +2 -1
  4. package/esm/dialog/dialog-title/dialog-title.js +1 -1
  5. package/esm/promo-banner/promo-banner.js +7 -1
  6. package/esm/status/status-dot/status-dot.js +1 -2
  7. package/package.json +1 -1
  8. package/promo-banner/promo-banner.js +7 -1
  9. package/status/status-dot/status-dot.js +1 -2
package/card/card.js CHANGED
@@ -85,7 +85,7 @@ var Root = (0, styled_1.styled)(Card_1.default, {
85
85
  },
86
86
  };
87
87
  var defaultBorderStyle = {
88
- '&:hover': theme.palette.mode === 'dark' && {
88
+ '&:hover': {
89
89
  borderColor: theme.tokens.color_border_bold,
90
90
  },
91
91
  };
@@ -98,6 +98,7 @@ var Root = (0, styled_1.styled)(Card_1.default, {
98
98
  '&:hover': theme.palette.mode === 'light'
99
99
  ? {
100
100
  boxShadow: theme.palette.mode === 'light' ? theme.shadows[1] : theme.shadows[2],
101
+ borderColor: theme.tokens.color_border_bold,
101
102
  }
102
103
  : {
103
104
  backgroundColor: (0, color_manipulator_1.fade)(theme.palette.action.hoverBackground, 0.1),
package/dialog/dialog-title/dialog-title.js CHANGED
@@ -72,6 +72,6 @@ exports.DialogTitle = React.forwardRef(function (props, ref) {
72
72
  var classes = (0, classes_1.useMergedClasses)(dialog_title_classes_1.dialogTitleClasses, dialog_title_classes_1.getDialogTitleUtilityClass, propClasses);
73
73
  return (React.createElement(Root, __assign({}, dialogTitleProps, { className: (0, clsx_1.default)(classes.root, className), ref: ref }),
74
74
  disableTypography ? (children) : (React.createElement(text_1.Text, { id: id, className: classes.title, variant: "h5", color: "textPrimary" }, children)),
75
- !!onClose && (React.createElement(icon_button_1.IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); }, label: "close button" },
75
+ !!onClose && (React.createElement(icon_button_1.IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); }, label: "Close" },
76
76
  React.createElement(icon_1.XIcon, null)))));
77
77
  });
package/esm/card/card.js CHANGED
@@ -56,7 +56,7 @@ var Root = styled(MuiCard, {
56
56
  },
57
57
  };
58
58
  var defaultBorderStyle = {
59
- '&:hover': theme.palette.mode === 'dark' && {
59
+ '&:hover': {
60
60
  borderColor: theme.tokens.color_border_bold,
61
61
  },
62
62
  };
@@ -69,6 +69,7 @@ var Root = styled(MuiCard, {
69
69
  '&:hover': theme.palette.mode === 'light'
70
70
  ? {
71
71
  boxShadow: theme.palette.mode === 'light' ? theme.shadows[1] : theme.shadows[2],
72
+ borderColor: theme.tokens.color_border_bold,
72
73
  }
73
74
  : {
74
75
  backgroundColor: fade(theme.palette.action.hoverBackground, 0.1),
package/esm/dialog/dialog-title/dialog-title.js CHANGED
@@ -43,6 +43,6 @@ export var DialogTitle = React.forwardRef(function (props, ref) {
43
43
  var classes = useMergedClasses(dialogTitleClasses, getDialogTitleUtilityClass, propClasses);
44
44
  return (React.createElement(Root, __assign({}, dialogTitleProps, { className: clsx(classes.root, className), ref: ref }),
45
45
  disableTypography ? (children) : (React.createElement(Text, { id: id, className: classes.title, variant: "h5", color: "textPrimary" }, children)),
46
- !!onClose && (React.createElement(IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); }, label: "close button" },
46
+ !!onClose && (React.createElement(IconButton, { shape: "circular", variant: "contained", "aria-label": "Close", size: "small", className: classes.closeButton, onClick: function (event) { return onClose(event, 'closeClick'); }, label: "Close" },
47
47
  React.createElement(XIcon, null)))));
48
48
  });
package/esm/promo-banner/promo-banner.js CHANGED
@@ -94,15 +94,21 @@ var PrimaryActionButton = styled(Button, { name: promoBannerComponentName, slot:
94
94
  background: theme.tokens.color_bg_button_inverse_static,
95
95
  };
96
96
  var showWhiteButtonBackground = ownerState.color !== 'dark' && ownerState.color !== 'default' && whiteButtonBackground;
97
- return __assign(__assign({}, showWhiteButtonBackground), { color: buttonColor, '&:hover': __assign({}, showWhiteButtonBackground), '&:focus': __assign({}, theme.mixins.focusRing({ color: theme.tokens.color_fg_inverse_static })) });
97
+ return __assign(__assign({}, showWhiteButtonBackground), { color: buttonColor, '&:hover': __assign({}, showWhiteButtonBackground), '&:focus': __assign({}, theme.mixins.focusRing({
98
+ color: showWhiteButtonBackground ? theme.tokens.color_fg_inverse_static : theme.tokens.color_border_focus,
99
+ })) });
98
100
  });
99
101
  var SecondaryActionButton = styled(Button, { name: promoBannerComponentName, slot: 'SecondaryAction' })(function (_a) {
100
102
  var theme = _a.theme, ownerState = _a.ownerState;
103
+ var shouldShowWhiteFocusRing = ownerState.color !== 'dark' && ownerState.color !== 'default';
101
104
  return {
102
105
  color: ownerState.color !== 'default' ? theme.tokens.color_fg_on_button_primary : theme.tokens.color_fg_link_primary,
103
106
  '&:hover': {
104
107
  backgroundColor: theme.tokens.color_bg_link_inverse_static_hover,
105
108
  },
109
+ '&:focus': __assign({}, theme.mixins.focusRing({
110
+ color: shouldShowWhiteFocusRing ? theme.tokens.color_fg_inverse_static : theme.tokens.color_border_focus,
111
+ })),
106
112
  };
107
113
  });
108
114
  var ImageContainer = styled('div', { name: promoBannerComponentName, slot: 'ImageContainer' })(function (_a) {
package/esm/status/status-dot/status-dot.js CHANGED
@@ -76,8 +76,7 @@ export var StatusDot = React.forwardRef(function (props, ref) {
76
76
  };
77
77
  return (React.createElement(Root, __assign({ ref: ref, component: "span", variant: textVariant, color: textColor, className: clsx(classes.root, className) }, rootProps),
78
78
  React.createElement(Dot, { role: "img", ownerState: ownerState, className: classes.dot }),
79
- !!label && (React.createElement(Tooltip, { title: label },
80
- React.createElement(Label, { width: width, maxWidth: maxWidth }, label))),
79
+ !!label && (React.createElement(Label, { width: width, maxWidth: maxWidth, title: label }, label)),
81
80
  !!details && (React.createElement(Tooltip, { title: details },
82
81
  React.createElement(DetailsIcon, null,
83
82
  React.createElement(HelpCircleIcon, { size: "1em" }))))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-product",
3
- "version": "2.4.4",
3
+ "version": "2.4.5",
4
4
  "sideEffects": false,
5
5
  "license": "Apache-2.0",
6
6
  "publishConfig": {
package/promo-banner/promo-banner.js CHANGED
@@ -123,15 +123,21 @@ var PrimaryActionButton = (0, styled_1.styled)(button_1.Button, { name: promo_ba
123
123
  background: theme.tokens.color_bg_button_inverse_static,
124
124
  };
125
125
  var showWhiteButtonBackground = ownerState.color !== 'dark' && ownerState.color !== 'default' && whiteButtonBackground;
126
- return __assign(__assign({}, showWhiteButtonBackground), { color: buttonColor, '&:hover': __assign({}, showWhiteButtonBackground), '&:focus': __assign({}, theme.mixins.focusRing({ color: theme.tokens.color_fg_inverse_static })) });
126
+ return __assign(__assign({}, showWhiteButtonBackground), { color: buttonColor, '&:hover': __assign({}, showWhiteButtonBackground), '&:focus': __assign({}, theme.mixins.focusRing({
127
+ color: showWhiteButtonBackground ? theme.tokens.color_fg_inverse_static : theme.tokens.color_border_focus,
128
+ })) });
127
129
  });
128
130
  var SecondaryActionButton = (0, styled_1.styled)(button_1.Button, { name: promo_banner_classes_1.promoBannerComponentName, slot: 'SecondaryAction' })(function (_a) {
129
131
  var theme = _a.theme, ownerState = _a.ownerState;
132
+ var shouldShowWhiteFocusRing = ownerState.color !== 'dark' && ownerState.color !== 'default';
130
133
  return {
131
134
  color: ownerState.color !== 'default' ? theme.tokens.color_fg_on_button_primary : theme.tokens.color_fg_link_primary,
132
135
  '&:hover': {
133
136
  backgroundColor: theme.tokens.color_bg_link_inverse_static_hover,
134
137
  },
138
+ '&:focus': __assign({}, theme.mixins.focusRing({
139
+ color: shouldShowWhiteFocusRing ? theme.tokens.color_fg_inverse_static : theme.tokens.color_border_focus,
140
+ })),
135
141
  };
136
142
  });
137
143
  var ImageContainer = (0, styled_1.styled)('div', { name: promo_banner_classes_1.promoBannerComponentName, slot: 'ImageContainer' })(function (_a) {
package/status/status-dot/status-dot.js CHANGED
@@ -105,8 +105,7 @@ exports.StatusDot = React.forwardRef(function (props, ref) {
105
105
  };
106
106
  return (React.createElement(Root, __assign({ ref: ref, component: "span", variant: textVariant, color: textColor, className: (0, clsx_1.default)(classes.root, className) }, rootProps),
107
107
  React.createElement(Dot, { role: "img", ownerState: ownerState, className: classes.dot }),
108
- !!label && (React.createElement(tooltip_1.Tooltip, { title: label },
109
- React.createElement(Label, { width: width, maxWidth: maxWidth }, label))),
108
+ !!label && (React.createElement(Label, { width: width, maxWidth: maxWidth, title: label }, label)),
110
109
  !!details && (React.createElement(tooltip_1.Tooltip, { title: details },
111
110
  React.createElement(DetailsIcon, null,
112
111
  React.createElement(icon_1.HelpCircleIcon, { size: "1em" }))))));