Skip to content

Add new tokens for the Text Input #2017

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jun 12, 2024
Merged

Add new tokens for the Text Input #2017

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fe5bf4e
Alert changes based on feedback
GomezIvann Jun 7, 2024
758d607
New requested tokens for the Text Input
GomezIvann Jun 10, 2024
ae84a57
Merge branch 'master' into gomezivann/component-udpates
raquelarrojo Jun 12, 2024
f38a3dc
Added requested tokens
raquelarrojo Jun 12, 2024
7758a1b
Merge branch 'gomezivann/component-udpates' of https://github.com/dxc…
GomezIvann Jun 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions lib/src/alert/Alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@ const DxcAlert = ({
type === "info"
? translatedLabels.alert.infoTitleText
: type === "confirm"
? translatedLabels.alert.successTitleText
: type === "warning"
? translatedLabels.alert.warningTitleText
: translatedLabels.alert.errorTitleText;
? translatedLabels.alert.successTitleText
: type === "warning"
? translatedLabels.alert.warningTitleText
: translatedLabels.alert.errorTitleText;

return (
<ThemeProvider theme={colorsTheme.alert}>
Expand All @@ -53,7 +53,7 @@ const DxcAlert = ({
{inlineText && inlineText !== "" && "-"}
<AlertInlineText>{inlineText}</AlertInlineText>
</AlertText>
{onClose && (
{typeof onClose === "function" && (
<AlertCloseAction onClick={onClose} tabIndex={tabIndex} aria-label="Close alert">
<DxcIcon icon="close" />
</AlertCloseAction>
Expand Down
6 changes: 6 additions & 0 deletions lib/src/common/variables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1022,7 +1022,13 @@ export const componentTokens = {
helperTextLineHeight: CoreTokens.type_leading_normal,
disabledHelperTextFontColor: CoreTokens.color_grey_500,
prefixColor: CoreTokens.color_grey_700,
prefixDividerBorderWidth: "1px",
prefixDividerBorderStyle: CoreTokens.border_solid,
prefixDividerPaddingRight: CoreTokens.spacing_8,
suffixColor: CoreTokens.color_grey_700,
suffixDividerBorderStyle: CoreTokens.border_solid,
suffixDividerBorderWidth: "1px",
suffixDividerPaddingLeft: CoreTokens.spacing_8,
disabledPrefixColor: CoreTokens.color_grey_400,
disabledSuffixColor: CoreTokens.color_grey_400,
placeholderFontColor: CoreTokens.color_grey_800_a,
Expand Down
28 changes: 7 additions & 21 deletions lib/src/text-input/TextInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -504,15 +504,14 @@ const TextInputContainer = styled.div<{ margin: TextInputPropsType["margin"]; si
props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""};
margin-left: ${(props) =>
props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
font-family: ${(props) => props.theme.fontFamily};
`;

const Label = styled.label<{
disabled: TextInputPropsType["disabled"];
hasHelperText: boolean;
}>`
color: ${(props) => (props.disabled ? props.theme.disabledLabelFontColor : props.theme.labelFontColor)};

font-family: ${(props) => props.theme.fontFamily};
font-size: ${(props) => props.theme.labelFontSize};
font-style: ${(props) => props.theme.labelFontStyle};
font-weight: ${(props) => props.theme.labelFontWeight};
Expand All @@ -526,7 +525,6 @@ const OptionalLabel = styled.span`

const HelperText = styled.span<{ disabled: TextInputPropsType["disabled"] }>`
color: ${(props) => (props.disabled ? props.theme.disabledHelperTextFontColor : props.theme.helperTextFontColor)};
font-family: ${(props) => props.theme.fontFamily};
font-size: ${(props) => props.theme.helperTextFontSize};
font-style: ${(props) => props.theme.helperTextFontStyle};
font-weight: ${(props) => props.theme.helperTextFontWeight};
Expand All @@ -544,7 +542,6 @@ const InputContainer = styled.div<{
align-items: center;
height: calc(2.5rem - 2px);
padding: 0 0.5rem;

${(props) => {
if (props.disabled) return `background-color: ${props.theme.disabledContainerFillColor};`;
}}
Expand All @@ -562,7 +559,6 @@ const InputContainer = styled.div<{
`border-color: transparent;
box-shadow: 0 0 0 2px ${props.theme.errorBorderColor};
`}

${(props) =>
!props.disabled
? `
Expand Down Expand Up @@ -594,9 +590,7 @@ const Input = styled.input`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

color: ${(props) => (props.disabled ? props.theme.disabledValueFontColor : props.theme.valueFontColor)};

font-family: ${(props) => props.theme.fontFamily};
font-size: ${(props) => props.theme.valueFontSize};
font-style: ${(props) => props.theme.valueFontStyle};
Expand All @@ -611,29 +605,27 @@ const Input = styled.input`

const Prefix = styled.span<{ disabled: TextInputPropsType["disabled"] }>`
height: 1.5rem;
line-height: 1.5rem;
margin-left: 0.25rem;
padding: 0 0.5rem 0 0;
padding-right: ${(props) => props.theme.prefixDividerPaddingRight};
${(props) => {
const color = props.disabled ? props.theme.disabledPrefixColor : props.theme.prefixColor;
return `color: ${color}; border-right: 1px solid ${color};`;
return `color: ${color}; border-right: ${props.theme.prefixDividerBorderWidth} ${props.theme.prefixDividerBorderStyle} ${color};`;
}};
font-family: ${(props) => props.theme.fontFamily};
font-size: 1rem;
line-height: 1.5rem;
pointer-events: none;
`;

const Suffix = styled.span<{ disabled: TextInputPropsType["disabled"] }>`
height: 1.5rem;
line-height: 1.5rem;
margin: 0 0.25rem;
padding: 0 0 0 0.5rem;
padding-left: ${(props) => props.theme.suffixDividerPaddingLeft};
${(props) => {
const color = props.disabled ? props.theme.disabledSuffixColor : props.theme.suffixColor;
return `color: ${color}; border-left: 1px solid ${color};`;
return `color: ${color}; border-left: ${props.theme.suffixDividerBorderWidth} ${props.theme.suffixDividerBorderStyle} ${color};`;
}};
font-family: ${(props) => props.theme.fontFamily};
font-size: 1rem;
line-height: 1.5rem;
pointer-events: none;
`;

Expand All @@ -646,17 +638,11 @@ const ErrorIcon = styled.span`
width: 18px;
font-size: 18px;
color: ${(props) => props.theme.errorIconColor};

svg {
line-height: 18px;
font-size: 1.25rem;
}
`;

const Error = styled.span`
min-height: 1.5em;
color: ${(props) => props.theme.errorMessageColor};
font-family: ${(props) => props.theme.fontFamily};
font-size: 0.75rem;
font-weight: 400;
line-height: 1.5em;
Expand Down
6 changes: 6 additions & 0 deletions website/screens/common/themes/advanced-theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1015,7 +1015,13 @@
"helperTextLineHeight": "1.5em",
"disabledHelperTextFontColor": "#999999",
"prefixColor": "#666666",
"prefixDividerBorderWidth": "1px",
"prefixDividerBorderStyle": "solid",
"prefixDividerPaddingRight": "0.5rem",
"suffixColor": "#666666",
"suffixDividerBorderWidth": "1px",
"suffixDividerBorderStyle": "solid",
"suffixDividerPaddingLeft": "0.5rem",
"disabledPrefixColor": "#bfbfbf",
"disabledSuffixColor": "#bfbfbf",
"placeholderFontColor": "#000000b3",
Expand Down
25 changes: 11 additions & 14 deletions website/screens/components/alert/code/AlertCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,17 +41,14 @@ const sections = [
Uses one of the available alert modes:
<ul>
<li>
<b>inline:</b> If an <Code>onClose</Code> prop is received,
close button will be visible and the function will be executed
when it's clicked. There is no overlay layer. Position should
be decided by the user.
<b>inline:</b> Renders as a regular component, following the
natural order of the elements in the document tree.
</li>
<li>
<b>modal:</b> The alert will be displayed in the middle of the
screen with an overlay layer behind. The <Code>onClose</Code>{" "}
function will be executed when the X button or the overlay is
clicked. The user has the responsibility of hiding the modal
in the <Code>onClose</Code> event, otherwise the modal will
screen with an overlay layer behind. In this mode, the user
has the responsibility of hiding the alert with the{" "}
<Code>onClose</Code> event, otherwise the overlaid modal will
remain visible.
</li>
</ul>
Expand All @@ -65,9 +62,7 @@ const sections = [
<td>
<TableCode>string</TableCode>
</td>
<td>
Message of the alert.
</td>
<td>Message of the alert.</td>
<td>-</td>
</tr>
<tr>
Expand All @@ -76,9 +71,11 @@ const sections = [
<TableCode>{"() => void"}</TableCode>
</td>
<td>
This function will be called when the user clicks the close
button. If there is no function we should close the alert by
default.
If defined, a close button will be displayed and this function
will be executed when the action is clicked. When{" "}
<Code>mode="modal"</Code> this function will also be executed when
the background overlay is clicked. The user has the responsibility
of hiding the modal, otherwise it will remain visible.
</td>
<td>-</td>
</tr>
Expand Down
68 changes: 68 additions & 0 deletions website/screens/components/text-input/specs/TextInputSpecsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -876,6 +876,26 @@ const sections = [
</td>
<td>0.25rem / 4px</td>
</tr>
<tr>
<td>
<Code>prefixDividerPaddingRight</Code>
</td>
<td>Prefix</td>
<td>
<Code>spacing-8</Code>
</td>
<td>0.5rem / 8px</td>
</tr>
<tr>
<td>
<Code>suffixDividerPaddingLeft</Code>
</td>
<td>Suffix</td>
<td>
<Code>spacing-8</Code>
</td>
<td>0.5rem / 8px</td>
</tr>
</tbody>
</DxcTable>
<DxcTable>
Expand Down Expand Up @@ -1087,6 +1107,54 @@ const sections = [
title: "Border",
content: (
<>
<DxcTable>
<thead>
<tr>
<th>Property</th>
<th>Element</th>
<th>Core token</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<Code>prefixDividerBorderWidth</Code>
</td>
<td>Prefix</td>
<td>-</td>
<td>1px</td>
</tr>
<tr>
<td>
<Code>prefixDividerBorderStyle</Code>
</td>
<td>Prefix</td>
<td>
<Code>border-style-solid</Code>
</td>
<td>solid</td>
</tr>
<tr>
<td>
<Code>suffixDividerBorderWidth</Code>
</td>
<td>Suffix</td>
<td>-</td>
<td>1px</td>
</tr>
<tr>
<td>
<Code>suffixDividerBorderStyle</Code>
</td>
<td>Suffix</td>
<td>
<Code>border-style-solid</Code>
</td>
<td>solid</td>
</tr>
</tbody>
</DxcTable>
<DxcTable>
<thead>
<tr>
Expand Down
6 changes: 6 additions & 0 deletions website/screens/theme-generator/themes/schemas/advanced.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1015,7 +1015,13 @@
"helperTextLineHeight": "length",
"disabledHelperTextFontColor": "color",
"prefixColor": "color",
"prefixDividerBorderWidth": "length",
"prefixDividerBorderStyle": "bStyle",
"prefixDividerPaddingRight": "length",
"suffixColor": "color",
"suffixDividerBorderWidth": "length",
"suffixDividerBorderStyle": "bStyle",
"suffixDividerPaddingLeft": "length",
"disabledPrefixColor": "color",
"disabledSuffixColor": "color",
"placeholderFontColor": "color",
Expand Down