Skip to content

Remove BackgroundColorProvider from Halstack #1774

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 9 commits into from
Jan 30, 2024
Merged

Remove BackgroundColorProvider from Halstack #1774

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ab3d7b7
Partial removal of the BackgroundColorProvider
GomezIvann Jan 24, 2024
7528822
Second part of the removal of the background provider
GomezIvann Jan 24, 2024
863b69a
Removing onDark tokens
GomezIvann Jan 24, 2024
fbb0700
Progress Bar remaining tokens
GomezIvann Jan 24, 2024
f5341b9
Documentation updates
GomezIvann Jan 24, 2024
2184eb3
Updates based on feedback
GomezIvann Jan 29, 2024
be2dfe5
updated method naming
GomezIvann Jan 30, 2024
aff3e92
Merge branch 'master' into gomezivann/remove-backgroundColorProvider
GomezIvann Jan 30, 2024
9f64704
Fixing Spinner issue
GomezIvann Jan 30, 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
27,019 changes: 15,193 additions & 11,826 deletions app/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

21 changes: 9 additions & 12 deletions app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,22 @@
"private": true,
"dependencies": {
"@dxc-technology/halstack-react": "file:../dist",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "5.0.1",
"styled-components": "^5.0.1"
"styled-components": "^5.0.1",
"@radix-ui/react-popover": "^1.0.7",
"color": "^3.1.3",
"dayjs": "^1.11.1",
"slugify": "^1.6.5",
"uuid": "^8.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"cy:open": "cypress open",
"cy:fast": "cypress run --spec 'cypress/integration/fast-visual-regression.js' --config video=false",
"cy:detailed": "cypress run --spec 'cypress/integration/detailed-visual-regression.js' --config video=false",
"cy:updateSnapshot": "cypress run --config video=false --env updateSnapshots=true"
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
Expand All @@ -34,9 +35,5 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"cypress": "^13.1.0",
"cypress-image-snapshot": "^3.1.1"
}
}
159 changes: 1 addition & 158 deletions app/src/pages/Button.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
import React from "react";
import {
DxcButton,
HalstackProvider,
BackgroundColorProvider,
} from "@dxc-technology/halstack-react";
import { DxcButton, HalstackProvider } from "@dxc-technology/halstack-react";
import styled from "styled-components";
import homeLogo from "../images/home.svg";

Expand Down Expand Up @@ -556,161 +552,8 @@ function App() {
</div>
</HalstackProvider>
</div>
<BackgroundColorProvider color="#000000">
<Mode mode="dark" text="Default">
<DxcButton
mode="primary"
label="Custom Button"
onClick={onClick}
size="large"
margin="small"
/>
</Mode>
<Mode mode="dark" text="Primary">
<DxcButton
mode="primary"
onClick={onClick}
icon={
<svg
x="0px"
y="0px"
width="24px"
height="24px"
viewBox="0 0 24 24"
enableBackground="new 0 0 24 24"
fill="currentColor"
>
<g id="Bounding_Box">
<rect fill="none" width="24" height="24" />
</g>
<g id="Master">
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
</g>
</svg>
}
margin="xsmall"
/>
</Mode>
<Mode mode="dark" text="Primary">
<DxcButton
mode="primary"
label="Custom Button"
onClick={onClick}
size="large"
margin="small"
disabled
/>
</Mode>
<Mode mode="dark" text="Secondary">
<DxcButton
mode="secondary"
label="Custom Button"
onClick={onClick}
size="large"
margin="small"
/>
</Mode>
<Mode mode="dark" text="Secondary">
<DxcButton
mode="secondary"
onClick={onClick}
icon={
<svg
x="0px"
y="0px"
width="24px"
height="24px"
viewBox="0 0 24 24"
enableBackground="new 0 0 24 24"
fill="currentColor"
>
<g id="Bounding_Box">
<rect fill="none" width="24" height="24" />
</g>
<g id="Master">
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
</g>
</svg>
}
margin="xsmall"
/>
</Mode>
<Mode mode="dark" text="Secondary">
<DxcButton
mode="secondary"
label="Custom Button"
onClick={onClick}
size="large"
margin="small"
disabled
/>
</Mode>
<Mode mode="dark" text="Text">
<DxcButton
mode="text"
label="Custom Button"
onClick={onClick}
size="large"
margin="small"
/>
</Mode>
<Mode mode="dark" text="Text">
<DxcButton
mode="text"
onClick={onClick}
icon={
<svg
x="0px"
y="0px"
width="24px"
height="24px"
viewBox="0 0 24 24"
enableBackground="new 0 0 24 24"
fill="currentColor"
>
<g id="Bounding_Box">
<rect fill="none" width="24" height="24" />
</g>
<g id="Master">
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
</g>
</svg>
}
margin="xsmall"
/>
</Mode>
<Mode mode="dark" text="Text">
<DxcButton
mode="text"
label="Custom Button"
onClick={onClick}
size="large"
margin="small"
disabled
/>
</Mode>
</BackgroundColorProvider>
</div>
);
}

const Mode = ({ mode, children }) => {
return (
<ModeContainer mode={mode}>
<PreviewsContainer>{children}</PreviewsContainer>
</ModeContainer>
);
};

const ModeContainer = styled.div`
background-color: ${(props) =>
props.mode === "dark" ? "#000000" : "transparent"};
display: flex;
flex-flow: row wrap;
`;

const PreviewsContainer = styled.div`
flex: 100%;
`;

export default App;
49 changes: 0 additions & 49 deletions app/src/pages/Checkbox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React, { useState } from "react";
import {
DxcCheckbox,
HalstackProvider,
BackgroundColorProvider,
} from "@dxc-technology/halstack-react";
import styled from "styled-components";

Expand Down Expand Up @@ -280,56 +279,8 @@ function App() {
<DxcCheckbox checked disabled label="Checkbox " onChange={onChange} />
</HalstackProvider>
</div>
<div>
<h4>Dark</h4>
<BackgroundColorProvider color="#000000">
<Mode mode="dark">
<DxcCheckbox
checked={checked}
label="Checkbox "
onChange={onChange}
/>
</Mode>
<Mode mode="dark">
<DxcCheckbox checked={true} label="Checkbox " onChange={onChange} />
</Mode>
<Mode mode="dark">
<DxcCheckbox
checked={checked}
label="Checkbox "
onChange={onChange}
disabled
/>
<DxcCheckbox
checked={true}
label="Checkbox "
onChange={onChange}
disabled
/>
</Mode>
</BackgroundColorProvider>
</div>
</div>
);
}

const Mode = ({ mode, children }) => {
return (
<ModeContainer mode={mode}>
<PreviewsContainer>{children}</PreviewsContainer>
</ModeContainer>
);
};

const ModeContainer = styled.div`
background-color: ${(props) =>
props.mode === "dark" ? "#000000" : "transparent"};
display: flex;
flex-flow: row wrap;
`;

const PreviewsContainer = styled.div`
flex: 100%;
`;

export default App;
38 changes: 1 addition & 37 deletions app/src/pages/DateInput.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
import React, { useRef, useState } from "react";
import {
DxcDateInput,
DxcButton,
BackgroundColorProvider,
} from "@dxc-technology/halstack-react";
import { DxcDateInput, DxcButton } from "@dxc-technology/halstack-react";
import styled from "styled-components";

function App() {
Expand Down Expand Up @@ -158,40 +154,8 @@ function App() {
margin={{ left: "medium" }}
></DxcButton>
</div>
<BackgroundColorProvider color="#000000">
<DarkMode>
<DxcDateInput
label="Dark date input"
helperText="Some sample text"
margin={{
left: "medium",
bottom: "small",
top: "small",
right: "medium",
}}
/>
</DarkMode>
</BackgroundColorProvider>
</>
);
}

const DarkMode = ({ children }) => {
return (
<ModeContainer>
<PreviewsContainer>{children}</PreviewsContainer>
</ModeContainer>
);
};

const ModeContainer = styled.div`
background-color: #000000;
display: flex;
flex-flow: row wrap;
`;

const PreviewsContainer = styled.div`
flex: 100%;
`;

export default App;
38 changes: 0 additions & 38 deletions app/src/pages/ProgressBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import styled from "styled-components";
import {
DxcProgressBar,
HalstackProvider,
BackgroundColorProvider,
} from "@dxc-technology/halstack-react";

const colors = {
Expand Down Expand Up @@ -126,45 +125,8 @@ function App() {
/>
</HalstackProvider>
</div>
<h4>Dark mode</h4>
<BackgroundColorProvider color="#000000">
<Mode mode="dark" text="Undeterminate default">
<DxcProgressBar
label="Loading"
overlay={false}
margin={{ top: "xsmall", bottom: "xxsmall" }}
/>
</Mode>
<Mode mode="dark" text="Determinate default">
<DxcProgressBar
label="Loading"
overlay={false}
showValue
value={45}
margin={{ top: "xsmall", bottom: "xxsmall" }}
/>
</Mode>
</BackgroundColorProvider>
</div>
);
}

const Mode = ({ mode, children }) => {
return (
<ModeContainer mode={mode}>
<PreviewsContainer>{children}</PreviewsContainer>
</ModeContainer>
);
};

const ModeContainer = styled.div`
background-color: ${(props) =>
props.mode === "dark" ? "#000000" : "transparent"};
display: flex;
flex-flow: row wrap;
`;

const PreviewsContainer = styled.div`
flex: 100%;
`;
export default App;
Loading