Skip to content
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

Jump to bottom

Fix custom icons sizing #1445

Merged
merged 5 commits into from Jan 26, 2023
Merged

Fix custom icons sizing #1445

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d8e89bc
First attempt on solving custom icons sizing issue
GomezIvann Jan 18, 2023
14206af
Updating the icons of the Paginator
GomezIvann Jan 18, 2023
36dfe47
Updating Select/TextInput icon prop description
GomezIvann Jan 24, 2023
37b65cf
Update Sidenav stories based on feedback
GomezIvann Jan 26, 2023
8dd341d
Merge branch 'master' into gomezivann-fix-icons
Jialecl Jan 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
64 changes: 52 additions & 12 deletions lib/src/accordion/Accordion.stories.tsx
View file
Open in desktop
Expand Up @@ -30,10 +30,33 @@ const folderIcon = (
</svg>
);

const thumbIcon = (
<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z" />
const smallIcon = (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20">
<path d="m7.646 18.333-.313-2.625q-.208-.125-.458-.27-.25-.146-.458-.271l-2.438 1.021-2.354-4.063 2.083-1.583V9.458L1.625 7.875l2.354-4.063 2.438 1.021q.208-.125.458-.27.25-.146.458-.271l.313-2.625h4.708l.313 2.625q.208.125.458.271.25.145.458.27l2.438-1.021 2.354 4.063-2.063 1.583v1.084l2.063 1.583-2.354 4.063-2.438-1.021q-.208.125-.458.271-.25.145-.458.27l-.313 2.625ZM10 12.979q1.229 0 2.104-.875T12.979 10q0-1.229-.875-2.104T10 7.021q-1.229 0-2.104.875T7.021 10q0 1.229.875 2.104t2.104.875Zm0-1.75q-.5 0-.865-.364-.364-.365-.364-.865t.364-.865q.365-.364.865-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.854 6.583h1.666l.25-2.166q.605-.167 1.167-.5.562-.334 1.021-.792l2.021.854.833-1.375-1.771-1.354q.104-.292.146-.604.042-.313.042-.646 0-.292-.042-.594t-.125-.635l1.771-1.375-.834-1.375-2.02.875q-.48-.479-1.032-.802-.552-.323-1.156-.49l-.271-2.187H9.167l-.271 2.187q-.604.167-1.156.49-.552.323-1.011.781l-2.021-.854-.833 1.375 1.75 1.354q-.083.333-.125.646-.042.312-.042.604t.042.594q.042.302.125.635l-1.75 1.375.833 1.375 2.021-.854q.459.458 1.011.781.552.323 1.156.49Z" />
</svg>
);

const facebookIcon = (
<svg
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="438.536px"
height="438.536px"
viewBox="0 0 438.536 438.536"
fill="currentColor"
>
<g>
<path
d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
/>
</g>
</svg>
);

Expand Down Expand Up @@ -78,8 +101,30 @@ export const Chromatic = () => (
</DxcAccordion>
</ExampleContainer>
<ExampleContainer>
<Title title="With bigger icon 48x48" theme="light" level={4} />
<DxcAccordion label="Accordion" assistiveText="Assistive text" icon={thumbIcon}>
<Title title="With smaller icon" theme="light" level={4} />
<DxcAccordion label="Accordion" assistiveText="Assistive text" icon={smallIcon}>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
lobortis eget.
</div>
</DxcAccordion>
</ExampleContainer>
<ExampleContainer>
<Title title="With bigger icon (SVG)" theme="light" level={4} />
<DxcAccordion label="Accordion" assistiveText="Assistive text" icon={facebookIcon}>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
lobortis eget.
</div>
</DxcAccordion>
</ExampleContainer>
<ExampleContainer>
<Title title="With bigger icon (image)" theme="light" level={4} />
<DxcAccordion
label="Accordion"
assistiveText="Assistive text"
icon="https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png"
>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
lobortis eget.
Expand Down Expand Up @@ -134,12 +179,7 @@ export const Chromatic = () => (
padding="medium"
>
<div style={{ display: "flex", flexDirection: "column", gap: "36px" }}>
<DxcTextInput
label="Label"
helperText="HelperText"
placeholder="Placeholder"
size="fillParent"
/>
<DxcTextInput label="Label" helperText="HelperText" placeholder="Placeholder" size="fillParent" />
<DxcButton label="Submit" size="medium" />
</div>
</DxcAccordion>
Expand Down
15 changes: 6 additions & 9 deletions lib/src/accordion/Accordion.tsx
View file
Open in desktop
Expand Up @@ -59,7 +59,7 @@ const DxcAccordion = ({
<AccordionLabel>
{icon && (
<IconContainer disabled={disabled}>
{typeof icon === "string" ? <IconImg src={icon} /> : icon}
{typeof icon === "string" ? <img src={icon} /> : icon}
</IconContainer>
)}
<DxcTypography
Expand Down Expand Up @@ -193,18 +193,15 @@ const AccordionLabel = styled.span`

const IconContainer = styled.span<{ disabled: boolean }>`
display: flex;
flex-wrap: wrap;
align-content: center;
height: ${(props) => props.theme.iconSize};
width: ${(props) => props.theme.iconSize};
margin-left: ${(props) => props.theme.iconMarginLeft};
margin-right: ${(props) => props.theme.iconMarginRigth};
color: ${(props) => (props.disabled ? props.theme.disabledIconColor : props.theme.iconColor)};
`;

const IconImg = styled.img`
height: ${(props) => props.theme.iconSize};
width: ${(props) => props.theme.iconSize};
svg,
img {
height: ${(props) => props.theme.iconSize};
width: ${(props) => props.theme.iconSize};
}
`;

const AccordionAssistiveText = styled.span<{ disabled: boolean }>`
Expand Down
53 changes: 52 additions & 1 deletion lib/src/button/Button.stories.tsx
View file
Open in desktop
Expand Up @@ -12,11 +12,42 @@ export default {
};

const iconSVG = (
<svg viewBox="0 0 24 24" fill="currentColor">
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="currentColor">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
</svg>
);

const facebookIcon = (
<svg
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="438.536px"
height="438.536px"
Jialecl marked this conversation as resolved.
Show resolved Hide resolved
viewBox="0 0 438.536 438.536"
fill="currentColor"
>
<g>
<path
d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
/>
</g>
</svg>
);

const smallIcon = (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20" fill="currentColor">
<path d="m7.646 18.333-.313-2.625q-.208-.125-.458-.27-.25-.146-.458-.271l-2.438 1.021-2.354-4.063 2.083-1.583V9.458L1.625 7.875l2.354-4.063 2.438 1.021q.208-.125.458-.27.25-.146.458-.271l.313-2.625h4.708l.313 2.625q.208.125.458.271.25.145.458.27l2.438-1.021 2.354 4.063-2.063 1.583v1.084l2.063 1.583-2.354 4.063-2.438-1.021q-.208.125-.458.271-.25.145-.458.27l-.313 2.625ZM10 12.979q1.229 0 2.104-.875T12.979 10q0-1.229-.875-2.104T10 7.021q-1.229 0-2.104.875T7.021 10q0 1.229.875 2.104t2.104.875Zm0-1.75q-.5 0-.865-.364-.364-.365-.364-.865t.364-.865q.365-.364.865-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.854 6.583h1.666l.25-2.166q.605-.167 1.167-.5.562-.334 1.021-.792l2.021.854.833-1.375-1.771-1.354q.104-.292.146-.604.042-.313.042-.646 0-.292-.042-.594t-.125-.635l1.771-1.375-.834-1.375-2.02.875q-.48-.479-1.032-.802-.552-.323-1.156-.49l-.271-2.187H9.167l-.271 2.187q-.604.167-1.156.49-.552.323-1.011.781l-2.021-.854-.833 1.375 1.75 1.354q-.083.333-.125.646-.042.312-.042.604t.042.594q.042.302.125.635l-1.75 1.375.833 1.375 2.021-.854q.459.458 1.011.781.552.323 1.156.49Z" />
</svg>
);

export const Chromatic = () => (
<>
<Title title="Primary" theme="light" level={2} />
Expand Down Expand Up @@ -52,6 +83,18 @@ export const Chromatic = () => (
<Title title="Only icon" theme="light" level={4} />
<DxcButton icon={iconSVG} />
</ExampleContainer>
<ExampleContainer>
<Title title="Big icon (SVG)" theme="light" level={4} />
<DxcButton icon={facebookIcon} />
</ExampleContainer>
<ExampleContainer>
<Title title="Big icon (image)" theme="light" level={4} />
<DxcButton icon="https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png" />
</ExampleContainer>
<ExampleContainer>
<Title title="Small icon" theme="light" level={4} />
<DxcButton icon={smallIcon} />
</ExampleContainer>
<Title title="Secondary" theme="light" level={2} />
<ExampleContainer>
<Title title="Enabled" theme="light" level={4} />
Expand All @@ -77,6 +120,10 @@ export const Chromatic = () => (
<Title title="With icon" theme="light" level={4} />
<DxcButton mode="secondary" label="Secondary" icon={iconSVG} />
</ExampleContainer>
<ExampleContainer>
<Title title="Only icon (image)" theme="light" level={4} />
<DxcButton mode="secondary" icon="https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png" />
</ExampleContainer>
<Title title="Text" theme="light" level={2} />
<ExampleContainer>
<Title title="Enabled" theme="light" level={4} />
Expand All @@ -102,6 +149,10 @@ export const Chromatic = () => (
<Title title="With icon" theme="light" level={4} />
<DxcButton label="Text" mode="text" icon={iconSVG} />
</ExampleContainer>
<ExampleContainer>
<Title title="Only icon (image)" theme="light" level={4} />
<DxcButton mode="text" icon="https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png" />
</ExampleContainer>
<BackgroundColorProvider color="#333333">
<DarkContainer>
<Title title="Primary" theme="dark" level={2} />
Expand Down
36 changes: 14 additions & 22 deletions lib/src/button/Button.tsx
View file
Open in desktop
Expand Up @@ -36,12 +36,6 @@ const DxcButton = ({
const colorsTheme = useTheme();
const backgroundType = useContext(BackgroundColorContext);

const labelComponent = (
<LabelContainer icon={icon} iconPosition={iconPosition}>
{label}
</LabelContainer>
);

return (
<ThemeProvider theme={colorsTheme.button}>
<Button
Expand All @@ -57,13 +51,21 @@ const DxcButton = ({
onClick();
}}
>
{label && iconPosition === "after" && labelComponent}
{label && iconPosition === "after" && (
<LabelContainer icon={icon} iconPosition={iconPosition}>
{label}
</LabelContainer>
)}
{icon && (
<IconContainer label={label} iconPosition={iconPosition}>
{typeof icon === "string" ? <ButtonIcon src={icon} /> : icon}
{typeof icon === "string" ? <img src={icon} /> : icon}
</IconContainer>
)}
{label && iconPosition === "before" && labelComponent}
{label && iconPosition === "before" && (
<LabelContainer icon={icon} iconPosition={iconPosition}>
{label}
</LabelContainer>
)}
</Button>
</ThemeProvider>
);
Expand Down Expand Up @@ -303,26 +305,16 @@ type IconPropsType = {
};

const IconContainer = styled.div<IconPropsType>`
max-height: 24px;
max-width: 24px;
display: flex;
margin-left: ${(props) =>
!props.label ? "0px" : (props.iconPosition === "after" && props.label !== "" && "8px") || "8px"};
margin-right: ${(props) =>
!props.label ? "0px" : (props.iconPosition === "before" && props.label !== "" && "8px") || "8px"};
overflow: hidden;
display: flex;
img,
svg {
height: 100%;
width: 100%;
}
`;

const ButtonIcon = styled.img`
img,
svg {
height: 100%;
width: 100%;
height: 24px;
width: 24px;
}
`;

Expand Down
50 changes: 41 additions & 9 deletions lib/src/chip/Chip.stories.tsx
View file
Open in desktop
Expand Up @@ -10,9 +10,32 @@ export default {
};

const iconSVG = (
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
<svg
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="438.536px"
height="438.536px"
viewBox="0 0 438.536 438.536"
fill="currentColor"
>
<g>
<path
d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
/>
</g>
</svg>
);

const smallIconSVG = (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20">
<path d="m10 17-1.042-.938q-2.083-1.854-3.437-3.177-1.354-1.323-2.136-2.354Q2.604 9.5 2.302 8.646 2 7.792 2 6.896q0-1.854 1.271-3.125T6.396 2.5q1.021 0 1.979.438.958.437 1.625 1.229.667-.792 1.625-1.229.958-.438 1.979-.438 1.854 0 3.125 1.271T18 6.896q0 .896-.292 1.729-.291.833-1.073 1.854-.781 1.021-2.145 2.365-1.365 1.344-3.49 3.26Zm0-2.021q1.938-1.729 3.188-2.948 1.25-1.219 1.989-2.125.74-.906 1.031-1.614.292-.709.292-1.396 0-1.229-.833-2.063Q14.833 4 13.604 4q-.729 0-1.364.302-.636.302-1.094.844L10.417 6h-.834l-.729-.854q-.458-.542-1.114-.844Q7.083 4 6.396 4q-1.229 0-2.063.833-.833.834-.833 2.063 0 .687.271 1.364.271.678.989 1.573.719.896 1.98 2.125Q8 13.188 10 14.979Zm0-5.5Z" />
</svg>
);

Expand All @@ -23,20 +46,29 @@ export const Chromatic = () => (
<DxcChip label="Default Chip" />
</ExampleContainer>
<ExampleContainer>
<Title title="Chip with prefix" theme="light" level={4} />
<DxcChip label="Chip with prefix" prefixIcon={iconSVG} />
<Title title="Chip with prefix SVG (small icon)" theme="light" level={4} />
<DxcChip label="Chip with prefix" prefixIcon={smallIconSVG} />
</ExampleContainer>
<ExampleContainer>
<Title title="Chip with suffix" theme="light" level={4} />
<Title title="Chip with suffix SVG (large icon)" theme="light" level={4} />
<DxcChip label="Chip with suffix" suffixIcon={iconSVG} />
</ExampleContainer>
<ExampleContainer>
<Title title="Chip with prefix and suffix" theme="light" level={4} />
<DxcChip label="Chip with prefix and suffix" prefixIcon={iconSVG} suffixIcon={iconSVG} />
<Title title="Chip with prefix (SVG) and suffix (URL)" theme="light" level={4} />
<DxcChip
label="Chip with prefix and suffix"
prefixIcon={iconSVG}
suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
/>
</ExampleContainer>
<ExampleContainer>
<Title title="Disabled chip" theme="light" level={4} />
<DxcChip label="Disabled" disabled prefixIcon={iconSVG} suffixIcon={iconSVG} />
<DxcChip
label="Disabled"
disabled
prefixIcon={iconSVG}
suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
Jialecl marked this conversation as resolved.
Show resolved Hide resolved
/>
</ExampleContainer>
<ExampleContainer>
<Title title="Chip with ellipsis" theme="light" level={4} />
Expand Down