Skip to content

Remove deprecated padding prop from the Box component #1625

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 6 commits into from
Jun 21, 2023
Merged

Remove deprecated padding prop from the Box component #1625

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
60a3d0d
Removing padding prop from Box component
GomezIvann Jun 19, 2023
925650b
Removing unnecessary code lines
GomezIvann Jun 20, 2023
e319372
Removing padding from Box specs
GomezIvann Jun 20, 2023
dcfd9d4
Merge branch 'master' into gomezivann-box-padding
raquelarrojo Jun 21, 2023
6436b48
Box doc updated & fixes in app box
GomezIvann Jun 21, 2023
984c7a0
Merge branch 'gomezivann-box-padding' of https://github.com/dxc-techn…
GomezIvann Jun 21, 2023
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
1 change: 0 additions & 1 deletion app/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

61 changes: 3 additions & 58 deletions app/src/pages/Box.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,42 +67,6 @@ function App() {
xxLarge margin box
</DxcBox>
</div>
<h4>Paddings</h4>
<div className="test-case" id="padding-xxsmall">
<DxcBox size="medium" padding="xxsmall">
xxSmall padding box
</DxcBox>
</div>
<div className="test-case" id="padding-xsmall">
<DxcBox size="medium" padding="xsmall">
xSmall padding box
</DxcBox>
</div>
<div className="test-case" id="padding-small">
<DxcBox size="medium" padding="small">
Small padding box
</DxcBox>
</div>
<div className="test-case" id="padding-medium">
<DxcBox size="medium" padding="medium">
Medium padding box
</DxcBox>
</div>
<div className="test-case" id="padding-large">
<DxcBox size="medium" padding="large">
Large padding box
</DxcBox>
</div>
<div className="test-case" id="padding-xlarge">
<DxcBox size="medium" padding="xlarge">
xLarge padding box
</DxcBox>
</div>
<div className="test-case" id="padding-xxlarge">
<DxcBox size="medium" padding="xxlarge">
xxLarge padding box
</DxcBox>
</div>
<h4>Shadow Depth</h4>
<div className="test-case" id="shadowDepth-0">
<DxcBox size="medium" margin="medium" shadowDepth={0}>
Expand All @@ -120,37 +84,18 @@ function App() {
</DxcBox>
</div>
<h4>Examples</h4>
<DxcBox
margin="medium"
padding="medium"
shadowDepth={1}
display="block"
size="medium"
>
<DxcBox margin="medium" shadowDepth={1} display="block" size="medium">
Hola que tal
</DxcBox>
<DxcBox
margin="medium"
padding="medium"
shadowDepth={1}
display="block"
size="large"
>
<DxcBox margin="medium" shadowDepth={1} display="block" size="large">
Hola que tal
</DxcBox>
<DxcBox
margin="medium"
padding="medium"
shadowDepth={1}
display="block"
size="small"
>
<DxcBox margin="medium" shadowDepth={1} display="block" size="small">
Hola que tal
</DxcBox>
<div style={{ width: "250px" }}>
<DxcBox
margin="medium"
padding="medium"
shadowDepth={1}
display="block"
size="fillParent"
Expand Down
78 changes: 25 additions & 53 deletions lib/src/box/Box.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from "react";
import Title from "../../.storybook/components/Title";
import ExampleContainer from "../../.storybook/components/ExampleContainer";
import DxcBox from "./Box";
import DxcInset from "../inset/Inset";
import { HalstackProvider } from "../HalstackContext";

export default {
Expand All @@ -19,99 +20,70 @@ export const Chromatic = () => (
<>
<Title title="Display flex" theme="light" level={2} />
<ExampleContainer>
<DxcBox display="flex" padding="medium">
Box
<DxcBox display="flex">
<DxcInset space="2rem">Box</DxcInset>
</DxcBox>
</ExampleContainer>
<Title title="ShadowDepth" theme="light" level={2} />
<ExampleContainer>
<Title title="ShadowDepth 0" theme="light" level={4} />
<DxcBox shadowDepth={0} margin="medium" padding="medium">
Box
<DxcBox shadowDepth={0} margin="medium">
<DxcInset space="2rem">Box</DxcInset>
</DxcBox>
</ExampleContainer>
<ExampleContainer>
<Title title="ShadowDepth 1" theme="light" level={4} />
<DxcBox shadowDepth={1} margin="medium" padding="medium">
Box
<DxcBox shadowDepth={1} margin="medium">
<DxcInset space="2rem">Box</DxcInset>
</DxcBox>
</ExampleContainer>
<ExampleContainer>
<Title title="ShadowDepth 2" theme="light" level={4} />
<DxcBox shadowDepth={2} margin="medium" padding="medium">
Box
<DxcBox shadowDepth={2} margin="medium">
<DxcInset space="2rem">Box</DxcInset>
</DxcBox>
</ExampleContainer>
<Title title="Paddings" theme="light" level={2} />
<ExampleContainer>
<Title title="Xxsmall padding" theme="light" level={4} />
<DxcBox padding="xxsmall">Box</DxcBox>
</ExampleContainer>
<ExampleContainer>
<Title title="Xsmall padding" theme="light" level={4} />
<DxcBox padding="xsmall">Box</DxcBox>
</ExampleContainer>
<ExampleContainer>
<Title title="Small padding" theme="light" level={4} />
<DxcBox padding="small">Box</DxcBox>
</ExampleContainer>
<ExampleContainer>
<Title title="Medium padding" theme="light" level={4} />
<DxcBox padding="medium">Box</DxcBox>
</ExampleContainer>
<ExampleContainer>
<Title title="Large padding" theme="light" level={4} />
<DxcBox padding="large">Box</DxcBox>
</ExampleContainer>
<ExampleContainer>
<Title title="Xlarge padding" theme="light" level={4} />
<DxcBox padding="xlarge">Box</DxcBox>
</ExampleContainer>
<ExampleContainer>
<Title title="Xxlarge padding" theme="light" level={4} />
<DxcBox padding="xxlarge">Box</DxcBox>
</ExampleContainer>
<Title title="Margins" theme="light" level={2} />
<ExampleContainer>
<Title title="Xxsmall margin" theme="light" level={4} />
<DxcBox margin="xxsmall" padding="medium">
Box
<DxcBox margin="xxsmall">
<DxcInset space="2rem">Box</DxcInset>
</DxcBox>
</ExampleContainer>
<ExampleContainer>
<Title title="Xsmall margin" theme="light" level={4} />
<DxcBox margin="xsmall" padding="medium">
Box
<DxcBox margin="xsmall">
<DxcInset space="2rem">Box</DxcInset>
</DxcBox>
</ExampleContainer>
<ExampleContainer>
<Title title="Small margin" theme="light" level={4} />
<DxcBox margin="small" padding="medium">
Box
<DxcBox margin="small">
<DxcInset space="2rem">Box</DxcInset>
</DxcBox>
</ExampleContainer>
<ExampleContainer>
<Title title="Medium margin" theme="light" level={4} />
<DxcBox margin="medium" padding="medium">
Box
<DxcBox margin="medium">
<DxcInset space="2rem">Box</DxcInset>
</DxcBox>
</ExampleContainer>
<ExampleContainer>
<Title title="Large margin" theme="light" level={4} />
<DxcBox margin="large" padding="medium">
Box
<DxcBox margin="large">
<DxcInset space="2rem">Box</DxcInset>
</DxcBox>
</ExampleContainer>
<ExampleContainer>
<Title title="Xlarge margin" theme="light" level={4} />
<DxcBox margin="xlarge" padding="medium">
Box
<DxcBox margin="xlarge">
<DxcInset space="2rem">Box</DxcInset>
</DxcBox>
</ExampleContainer>
<ExampleContainer>
<Title title="Xxlarge margin" theme="light" level={4} />
<DxcBox margin="xxlarge" padding="medium">
Box
<DxcBox margin="xxlarge">
<DxcInset space="2rem">Box</DxcInset>
</DxcBox>
</ExampleContainer>
<Title title="Sizes" theme="light" level={2} />
Expand All @@ -138,8 +110,8 @@ export const Chromatic = () => (
<Title title="Opinionated theme" theme="light" level={2} />
<ExampleContainer>
<HalstackProvider theme={opinionatedTheme}>
<DxcBox display="flex" padding="medium">
Box
<DxcBox display="flex">
<DxcInset space="2rem">Box</DxcInset>
</DxcBox>
</HalstackProvider>
</ExampleContainer>
Expand Down
30 changes: 8 additions & 22 deletions lib/src/box/Box.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,15 @@ const DxcBox = ({
display = "inline-flex",
children,
margin,
padding,
size = "fitContent",
}: BoxPropsType): JSX.Element => {
const colorsTheme = useTheme();

return (
<ThemeProvider theme={colorsTheme.box}>
<StyledDxcBox shadowDepth={shadowDepth} display={display} margin={margin} padding={padding} size={size}>
<Box shadowDepth={shadowDepth} display={display} margin={margin} size={size}>
<BackgroundColorProvider color={colorsTheme.box.backgroundColor}>{children}</BackgroundColorProvider>
</StyledDxcBox>
</Box>
</ThemeProvider>
);
};
Expand All @@ -33,22 +32,19 @@ const sizes = {
fitContent: "fit-content",
};

const calculateWidth = (margin, size, padding) => {
if (size === "fillParent") {
return `calc(${sizes[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")} -
${getMargin(padding, "left")} - ${getMargin(padding, "right")})`;
}
return sizes[size];
};
const calculateWidth = (margin: BoxPropsType["margin"], size: BoxPropsType["size"]) =>
size === "fillParent"
? `calc(${sizes[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`
: sizes[size];

const StyledDxcBox = styled.div<BoxPropsType>`
const Box = styled.div<BoxPropsType>`
display: ${(props) => props.display};
border-radius: ${(props) => props.theme.borderRadius};
border-width: ${(props) => props.theme.borderThickness};
border-style: ${(props) => props.theme.borderStyle};
border-color: ${(props) => props.theme.borderColor};
overflow: hidden;
width: ${(props) => calculateWidth(props.margin, props.size, props.padding)};
width: ${(props) => calculateWidth(props.margin, props.size)};
background-color: ${(props) => props.theme.backgroundColor};
box-shadow: ${(props) =>
props.shadowDepth === 1
Expand All @@ -66,16 +62,6 @@ const StyledDxcBox = styled.div<BoxPropsType>`
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] : ""};

padding: ${({ padding }) => (padding && typeof padding !== "object" ? spaces[padding] : "0px")};
padding-top: ${(props) =>
props.padding && typeof props.padding === "object" && props.padding.top ? spaces[props.padding.top] : ""};
padding-right: ${(props) =>
props.padding && typeof props.padding === "object" && props.padding.right ? spaces[props.padding.right] : ""};
padding-bottom: ${(props) =>
props.padding && typeof props.padding === "object" && props.padding.bottom ? spaces[props.padding.bottom] : ""};
padding-left: ${(props) =>
props.padding && typeof props.padding === "object" && props.padding.left ? spaces[props.padding.left] : ""};
`;

export default DxcBox;
12 changes: 0 additions & 12 deletions lib/src/box/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@ type Margin = {
left?: Space;
right?: Space;
};
type Padding = {
top?: Space;
bottom?: Space;
left?: Space;
right?: Space;
};

type Props = {
/**
Expand All @@ -30,12 +24,6 @@ type Props = {
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
*/
margin?: Space | Margin;
/**
* @deprecated This prop will be removed shortly, consider using the Inset component for this purpose.
* Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
*/
padding?: Space | Padding;
/**
* Size of the component.
*/
Expand Down
Loading