+
{Buttons}
{selectedOption && selectedOption.subText && (
@@ -118,4 +157,4 @@ ButtonGroup.propTypes = {
tooltipMoveBy: PropTypes.object
};
-export default ButtonGroup;
\ No newline at end of file
+export default ButtonGroup;
diff --git a/src/components/ButtonGroup/ButtonGroup.scss b/src/components/ButtonGroup/ButtonGroup.scss
index 6447ac3fd8..0a65a85406 100644
--- a/src/components/ButtonGroup/ButtonGroup.scss
+++ b/src/components/ButtonGroup/ButtonGroup.scss
@@ -2,7 +2,6 @@
@import "../../styles/themes.scss";
@import "../../styles/typography.scss";
-
.monday-style-button-group-component {
display: flex;
flex-direction: column;
@@ -17,29 +16,17 @@
justify-content: center;
.monday-style-button {
- border: 1px solid;
- border-radius: 0;
@include theme-prop(background-color, primary-background-color);
@include theme-prop(border-color, ui-border-color);
- margin-left: -1px;
-
- &:first-child {
- border-radius: $border-radius-small 0 0 $border-radius-small;
- margin-left: 0;
- }
- &:last-child {
- border-radius: 0 $border-radius-small $border-radius-small 0;
- }
-
&--color {
&-primary {
&-active {
+ z-index: 20;
&:hover {
@include theme-prop(background-color, primary-selected-color);
}
@include theme-prop(background-color, primary-selected-color);
@include theme-prop(border-color, primary-color);
- z-index: 10;
}
}
}
@@ -49,6 +36,7 @@
&:not(.disabled) {
@include theme-prop(color, primary-text-color);
&.selected {
+ z-index: 10;
@include theme-prop(color, primary-text-color);
}
}
@@ -69,4 +57,16 @@
&.disabled {
cursor: not-allowed;
}
+
+ .disabled {
+ cursor: not-allowed;
+ background-color: var(--disabled-background-color);
+ opacity: 0.5;
+ }
+
+ .button-disabled {
+ background-color: var(--disabled-background-color);
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
}
diff --git a/src/components/ButtonGroup/__stories__/buttonGroup.stories.js b/src/components/ButtonGroup/__stories__/buttonGroup.stories.js
index beb1d9d528..d260b14648 100644
--- a/src/components/ButtonGroup/__stories__/buttonGroup.stories.js
+++ b/src/components/ButtonGroup/__stories__/buttonGroup.stories.js
@@ -4,6 +4,9 @@ import ButtonGroup from "../ButtonGroup";
import { StoryStateColumn, StoryStateRow } from "../../storybook-helpers";
import { FakeXMLHttpRequest } from "sinon";
import DescriptionLabel from "../../storybook-helpers/description-label/description-label";
+import TextSmall from "../../Icon/Icons/components/TextSmall";
+import Doc from "../../Icon/Icons/components/Doc";
+import { Bolt } from "../../Icon/Icons";
export const Sandbox = () => (
) : null}
{!readOnly && !disabled && (
-
-
-
+ iconType={Icon.type.SVG}
+ clickable
+ icon={CloseSmall}
+ iconSize={iconSize}
+ onClick={onDeleteCallback}
+ />
)}