Skip to content

Commit ba45742

Browse files
JialeclJialecl
authored
Merge pull request #2128 from dxc-technology/gomezivann/color-updates
Color and docs updates
2 parents e2fae80 + 3210662 commit ba45742

File tree

7 files changed

+58
-62
lines changed

7 files changed

+58
-62
lines changed

‎apps/website/screens/components/heading/specs/HeadingSpecsPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const sections = [
5454
<td>
5555
<Code>font-size</Code>
5656
</td>
57-
<td>32px / 2.5rem</td>
57+
<td>40px / 2.5rem</td>
5858
<td>
5959
<Code>font-scale-07</Code>
6060
</td>

‎apps/website/screens/components/toast/specs/images/toast_anatomy.png‎

92 Bytes
Loading

‎apps/website/screens/components/toast/specs/images/toast_specs.png‎

-30 Bytes
Loading

‎apps/website/screens/components/toast/usage/images/loading_toast.png‎

-3 KB
Loading

‎apps/website/screens/components/toast/usage/images/semantic_toasts.png‎

-6.47 KB
Loading

‎packages/lib/src/action-icon/ActionIcon.tsx‎

Lines changed: 26 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,39 +5,16 @@ import CoreTokens from "../common/coreTokens";
55
import DxcIcon from "../icon/Icon";
66
import { Tooltip } from "../tooltip/Tooltip";
77

8-
const DxcActionIcon = forwardRef<RefType, ActionIconPropsTypes>(
9-
({ disabled = false, title, icon, onClick, tabIndex }, ref): JSX.Element => (
10-
<Tooltip label={title}>
11-
<ActionIcon
12-
aria-label={title}
13-
disabled={disabled}
14-
onClick={onClick}
15-
onMouseDown={(event) => {
16-
event.stopPropagation();
17-
}}
18-
tabIndex={tabIndex}
19-
type="button"
20-
ref={ref}
21-
>
22-
{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}
23-
</ActionIcon>
24-
</Tooltip>
25-
)
26-
);
27-
288
const ActionIcon = styled.button`
9+
all: unset;
2910
display: flex;
3011
align-items: center;
3112
justify-content: center;
3213
flex-shrink: 0;
33-
border: none;
3414
border-radius: 2px;
3515
width: 24px;
3616
height: 24px;
37-
font-size: 16px;
38-
padding: 0px;
3917
${(props) => (props.disabled ? `cursor: not-allowed;` : `cursor: pointer;`)}
40-
4118
box-shadow: 0 0 0 2px transparent;
4219
background-color: ${(props) =>
4320
props.disabled
@@ -46,7 +23,7 @@ const ActionIcon = styled.button`
4623
color: ${(props) =>
4724
props.disabled
4825
? (props.theme.disabledActionIconColor ?? CoreTokens.color_grey_500)
49-
: (props.theme.actionIconColor ?? CoreTokens.color_black)};
26+
: (props.theme.actionIconColor ?? CoreTokens.color_grey_900)};
5027
5128
${(props) =>
5229
!props.disabled &&
@@ -55,22 +32,41 @@ const ActionIcon = styled.button`
5532
&:focus-visible {
5633
outline: none;
5734
box-shadow: 0 0 0 2px ${props.theme.focusActionBorderColor ?? CoreTokens.color_blue_600};
58-
color: ${props.theme.focusActionIconColor ?? CoreTokens.color_black};
35+
color: ${props.theme.focusActionIconColor ?? CoreTokens.color_grey_900};
5936
}
6037
&:hover {
6138
background-color: ${props.theme.hoverActionBackgroundColor ?? CoreTokens.color_grey_100};
62-
color: ${props.theme.hoverActionIconColor ?? CoreTokens.color_black};
39+
color: ${props.theme.hoverActionIconColor ?? CoreTokens.color_grey_900};
6340
}
6441
&:active {
6542
background-color: ${props.theme.activeActionBackgroundColor ?? CoreTokens.color_grey_300};
66-
color: ${props.theme.activeActionIconColor ?? CoreTokens.color_black};
43+
color: ${props.theme.activeActionIconColor ?? CoreTokens.color_grey_900};
6744
}
6845
`}
6946
70-
svg {
47+
font-size: 16px;
48+
> svg {
7149
width: 16px;
7250
height: 16px;
7351
}
7452
`;
7553

76-
export default DxcActionIcon;
54+
export default forwardRef<RefType, ActionIconPropsTypes>(
55+
({ disabled = false, title, icon, onClick, tabIndex }, ref) => (
56+
<Tooltip label={title}>
57+
<ActionIcon
58+
aria-label={title}
59+
disabled={disabled}
60+
onClick={onClick}
61+
onMouseDown={(event) => {
62+
event.stopPropagation();
63+
}}
64+
tabIndex={tabIndex}
65+
type="button"
66+
ref={ref}
67+
>
68+
{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}
69+
</ActionIcon>
70+
</Tooltip>
71+
)
72+
);

‎packages/lib/src/toast/Toast.tsx‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -37,29 +37,6 @@ const getSemantic = (semantic: ToastPropsType["semantic"]) => {
3737
}
3838
};
3939

40-
const ContentContainer = styled.div<{ loading: ToastPropsType["loading"] }>`
41-
display: flex;
42-
align-items: center;
43-
gap: ${CoreTokens.spacing_8};
44-
overflow: hidden;
45-
46-
${({ loading }) => !loading && `font-size: ${CoreTokens.type_scale_05}`};
47-
> svg {
48-
width: 24px;
49-
height: 24px;
50-
}
51-
`;
52-
53-
const Message = styled.span`
54-
color: ${CoreTokens.color_black};
55-
font-family: ${CoreTokens.type_sans};
56-
font-size: ${CoreTokens.type_scale_02};
57-
font-weight: ${CoreTokens.type_semibold};
58-
overflow: hidden;
59-
text-overflow: ellipsis;
60-
white-space: nowrap;
61-
`;
62-
6340
const fadeInUp = keyframes`
6441
0% {
6542
transform: translateY(100%);
@@ -95,14 +72,37 @@ const Toast = styled.output<{ semantic: ToastPropsType["semantic"]; isClosing: b
9572
gap: ${CoreTokens.spacing_24};
9673
padding: ${CoreTokens.spacing_8} ${CoreTokens.spacing_12};
9774
background-color: ${({ semantic }) => getSemantic(semantic).secondaryColor};
98-
color: ${({ semantic }) => getSemantic(semantic).primaryColor};
9975
animation: ${({ isClosing }) => (isClosing ? fadeOutDown : fadeInUp)} 0.3s ease forwards;
10076
10177
@media (max-width: ${responsiveSizes.medium}rem) {
10278
max-width: 100%;
10379
}
10480
`;
10581

82+
const ContentContainer = styled.div<{ loading: ToastPropsType["loading"]; semantic: ToastPropsType["semantic"] }>`
83+
display: flex;
84+
align-items: center;
85+
gap: ${CoreTokens.spacing_8};
86+
overflow: hidden;
87+
color: ${({ semantic }) => getSemantic(semantic).primaryColor};
88+
89+
${({ loading }) => !loading && `font-size: ${CoreTokens.type_scale_05}`};
90+
> svg {
91+
width: 24px;
92+
height: 24px;
93+
}
94+
`;
95+
96+
const Message = styled.span`
97+
color: ${CoreTokens.color_grey_900};
98+
font-family: ${CoreTokens.type_sans};
99+
font-size: ${CoreTokens.type_scale_02};
100+
font-weight: ${CoreTokens.type_semibold};
101+
overflow: hidden;
102+
text-overflow: ellipsis;
103+
white-space: nowrap;
104+
`;
105+
106106
const spinnerTheme = {
107107
spinner: {
108108
accentColor: getSemantic("info").primaryColor,
@@ -156,24 +156,23 @@ const DxcToast = ({
156156

157157
return (
158158
<Toast semantic={semantic} isClosing={isClosing} role="status">
159-
<ContentContainer loading={loading}>
160-
<ToastIcon semantic={semantic} icon={icon} loading={loading} hideSemanticIcon={hideSemanticIcon} />
159+
<ContentContainer loading={loading} semantic={semantic}>
160+
<ToastIcon hideSemanticIcon={hideSemanticIcon} icon={icon} loading={loading} semantic={semantic} />
161161
<Message>{message}</Message>
162162
</ContentContainer>
163163
<DxcFlex alignItems="center" gap="0.25rem">
164164
{action && (
165165
<DxcButton
166-
semantic={semantic}
167-
mode="tertiary"
168-
size={{ height: "small" }}
169-
label={action.label}
170166
icon={action.icon}
167+
label={action.label}
168+
mode="tertiary"
171169
onClick={action.onClick}
170+
semantic={semantic}
171+
size={{ height: "small" }}
172172
/>
173173
)}
174174
<DxcActionIcon
175175
icon="clear"
176-
title={translatedLabels.toast.clearToastActionTitle}
177176
onClick={() => {
178177
if (!loading) {
179178
clearClosingAnimationTimer();
@@ -184,6 +183,7 @@ const DxcToast = ({
184183
onClear();
185184
}, 300);
186185
}}
186+
title={translatedLabels.toast.clearToastActionTitle}
187187
/>
188188
</DxcFlex>
189189
</Toast>

0 commit comments

Comments
 (0)