@team-monolith/cds 1.60.1 → 1.60.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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import styled from "@emotion/styled";
|
|
3
|
-
import { HOVER, Tooltip } from "../..";
|
|
3
|
+
import { HOVER, RESET_BUTTON, Tooltip } from "../..";
|
|
4
4
|
import { css } from "@emotion/react";
|
|
5
5
|
import { toggleButtonGroupClasses, } from "./ToggleButtonGroup";
|
|
6
6
|
/** 하나의 ToggleButton을 그립니다. */
|
|
@@ -8,11 +8,12 @@ export function ToggleButton(props) {
|
|
|
8
8
|
const { datum, placement, isActive, onClick } = props;
|
|
9
9
|
const { label, onIcon, offIcon } = datum;
|
|
10
10
|
if (isActive) {
|
|
11
|
-
return (_jsxs(Active, Object.assign({ className: toggleButtonGroupClasses.toggleButton.active, onClick: onClick }, { children: [onIcon, label] })));
|
|
11
|
+
return (_jsxs(Active, Object.assign({ "aria-label": `${label} 선택 해제하기`, className: toggleButtonGroupClasses.toggleButton.active, onClick: onClick }, { children: [onIcon, label] })));
|
|
12
12
|
}
|
|
13
|
-
return (_jsx(Tooltip, Object.assign({ placement: placement, text: label }, { children: _jsx(Inactive, Object.assign({ className: toggleButtonGroupClasses.toggleButton.inactive, onClick: onClick }, { children: offIcon })) })));
|
|
13
|
+
return (_jsx(Tooltip, Object.assign({ placement: placement, text: label }, { children: _jsx(Inactive, Object.assign({ "aria-label": `${label} 선택하기`, className: toggleButtonGroupClasses.toggleButton.inactive, onClick: onClick }, { children: offIcon })) })));
|
|
14
14
|
}
|
|
15
|
-
const Active = styled.
|
|
15
|
+
const Active = styled.button(({ theme }) => css `
|
|
16
|
+
${RESET_BUTTON};
|
|
16
17
|
cursor: pointer;
|
|
17
18
|
display: flex;
|
|
18
19
|
padding: 8px 12px;
|
|
@@ -35,7 +36,8 @@ const Active = styled.div(({ theme }) => css `
|
|
|
35
36
|
height: 24px;
|
|
36
37
|
}
|
|
37
38
|
`);
|
|
38
|
-
const Inactive = styled.
|
|
39
|
+
const Inactive = styled.button `
|
|
40
|
+
${RESET_BUTTON};
|
|
39
41
|
cursor: pointer;
|
|
40
42
|
display: flex;
|
|
41
43
|
padding: 8px 12px;
|