Skip to content

Commit b27caed

Browse files
garronejgarronej
committed
Update color picker to encourage use of css variable by default
1 parent 4a8b04d commit b27caed

File tree

8 files changed

+137
-77
lines changed

8 files changed

+137
-77
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
"remixicon": "^3.2.0",
108108
"storybook-dark-mode": "^1.1.2",
109109
"ts-node": "^10.9.1",
110-
"tss-react": "^4.8.6",
110+
"tss-react": "^4.9.0",
111111
"type-route": "^1.0.1",
112112
"typescript": "^4.9.1",
113113
"vitest": "^0.24.3"

‎src/fr/colors.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ export type Colors = {
66
options: ColorOptions<"css var">;
77
decisions: ColorDecisions<"css var">;
88
getHex: (params: { isDark: boolean }) => {
9-
isDark: boolean;
109
options: ColorOptions<"hex">;
1110
decisions: ColorDecisions<"hex">;
1211
};
@@ -22,7 +21,6 @@ export const colors: Colors = {
2221
const decisions = getColorDecisions({ colorOptions });
2322

2423
return {
25-
isDark,
2624
options,
2725
decisions
2826
};

‎stories/ColorHelper/ColorDecisionCard.tsx‎

Lines changed: 111 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react";
22
import type { ColorDecisionAndCorrespondingOption } from "../../scripts/build/cssToTs/colorDecisionAndCorrespondingOptions";
33
import { fr } from "../../dist/fr";
44
import Tooltip from "@mui/material/Tooltip";
5-
import { useStyles } from "./makeStyles";
5+
import { useStyles } from "tss-react";
66
import { CopyToClipboardButton } from "./CopyToClipboardButton";
77
import { Accordion } from "../../dist/Accordion";
88
import { Evt } from "evt";
@@ -39,29 +39,20 @@ export function ColorDecisionCard(
3939
"color": fr.colors.decisions.text.mention.grey.default
4040
}}
4141
>
42-
Color Decision path
43-
{/*
44-
<Tooltip
45-
title={
46-
<a href="https://guides.react-dsfr.fr/css-in-js#colors" target="_blank">
47-
How to access the <code>theme</code> object
48-
</a>
49-
}
50-
placement="top"
51-
arrow
52-
>
53-
<i className={fr.cx("ri-information-line")} />
54-
</Tooltip>{" "}
55-
*/}
56-
:
42+
Color Decision path :
5743
</span>
5844
&nbsp;&nbsp;&nbsp;&nbsp;
5945
<code>
6046
<Tooltip
47+
classes={{
48+
tooltip: css({
49+
"maxWidth": "none"
50+
})
51+
}}
6152
title={
6253
<code
6354
style={{
64-
"fontSize": "1.2em"
55+
"fontSize": "1.7em"
6556
}}
6657
>
6758
var({colorDecisionName})
@@ -78,7 +69,7 @@ export function ColorDecisionCard(
7869
</Tooltip>
7970
</code>
8071
<CopyToClipboardButton
81-
textToCopy={["theme", "decisions", ...themePath].join(".")}
72+
textToCopy={["fr", "colors", "decisions", ...themePath].join(".")}
8273
evtAction={evtCopyToClipboardButtonAction}
8374
/>
8475
</div>
@@ -101,32 +92,66 @@ export function ColorDecisionCard(
10192
<div style={{ "marginTop": fr.spacing("2v") }}>
10293
{typeof colorOption.color === "string" ? (
10394
<>
104-
<span>Colors: </span>: <ColoredSquare hexColorCode={colorOption.color} />
95+
<span
96+
style={{
97+
"color": fr.colors.decisions.text.mention.grey.default
98+
}}
99+
>
100+
Hex color code: &nbsp;
101+
<Tooltip
102+
title={
103+
"This decision resolve the the same hex color code in both dark and light mode"
104+
}
105+
placement="top"
106+
arrow
107+
>
108+
<i className={fr.cx("ri-information-line")} />
109+
</Tooltip>
110+
</span>
111+
&nbsp; &nbsp; &nbsp;
112+
<ColoredSquare
113+
hexColorCode={colorOption.color}
114+
isDark={false}
115+
themePath={themePath}
116+
/>
105117
</>
106118
) : (
107119
<>
108120
<span
109121
style={{
110-
"color": fr.colors.decisions.text.mention.grey.default
122+
"color": fr.colors.decisions.text.mention.grey.default,
123+
"marginRight": 2
111124
}}
112125
>
113-
Dark mode:{" "}
126+
Dark mode:
114127
</span>
115-
<ColoredSquare hexColorCode={colorOption.color.dark} />
116128
&nbsp; &nbsp;
129+
<ColoredSquare
130+
hexColorCode={colorOption.color.dark}
131+
themePath={themePath}
132+
isDark={true}
133+
/>
134+
<br />
117135
<span
118136
style={{
119-
"color": fr.colors.decisions.text.mention.grey.default
137+
"display": "inline-block",
138+
"color": fr.colors.decisions.text.mention.grey.default,
139+
"marginTop": fr.spacing("5v")
120140
}}
121141
>
122-
Light mode:{" "}
142+
Light mode:
123143
</span>
124-
<ColoredSquare hexColorCode={colorOption.color.light} />
144+
&nbsp; &nbsp;
145+
<ColoredSquare
146+
hexColorCode={colorOption.color.light}
147+
themePath={themePath}
148+
isDark={false}
149+
/>
125150
</>
126151
)}
127152
</div>
128153
<Accordion
129-
className={css({ "marginTop": fr.spacing("4v") })}
154+
className={css({ "marginTop": fr.spacing("5v") })}
130155
label="Corresponding color option"
131156
>
132157
<p>
@@ -160,30 +185,69 @@ export function ColorDecisionCard(
160185
);
161186
}
162187

163-
function ColoredSquare(props: { hexColorCode: string }) {
164-
const { hexColorCode } = props;
188+
function ColoredSquare(props: {
189+
hexColorCode: string;
190+
themePath: readonly string[];
191+
isDark: boolean;
192+
}) {
193+
const { hexColorCode, themePath, isDark } = props;
194+
195+
const { css } = useStyles();
196+
197+
const evtCopyToClipboardButtonAction = useConst(() => Evt.create<"trigger click">());
198+
199+
const codeToGetHex = `fr.colors.getHex({ isDark: ${
200+
isDark ? "true" : "false"
201+
} }).decisions${themePath.join(".")}`;
165202

166203
return (
167-
<div
168-
style={{
169-
display: "inline"
204+
<Tooltip
205+
classes={{
206+
tooltip: css({
207+
"maxWidth": "none"
208+
})
170209
}}
210+
title={
211+
<code
212+
style={{
213+
"fontSize": "1.5em"
214+
}}
215+
>
216+
{codeToGetHex}
217+
</code>
218+
}
219+
placement="top"
220+
arrow
171221
>
172-
<code>{hexColorCode}</code>
173-
&nbsp;
174-
<div
175-
style={{
176-
"display": "inline-block",
177-
"borderWidth": 2,
178-
"borderStyle": "solid",
179-
"borderColor": fr.colors.decisions.border.default.grey.default,
180-
"width": 30,
181-
"height": 30,
182-
"backgroundColor": hexColorCode,
183-
"position": "relative",
184-
"top": 8
185-
}}
186-
/>
187-
</div>
222+
<div style={{ "display": "inline-block" }}>
223+
<div
224+
style={{
225+
display: "inline-block"
226+
}}
227+
onClick={() => evtCopyToClipboardButtonAction.post("trigger click")}
228+
>
229+
<div
230+
style={{
231+
"display": "inline-block",
232+
"borderWidth": 2,
233+
"borderStyle": "solid",
234+
"borderColor": fr.colors.decisions.border.default.grey.default,
235+
"width": 30,
236+
"height": 30,
237+
"backgroundColor": hexColorCode,
238+
"position": "relative",
239+
"top": 8
240+
}}
241+
/>
242+
&nbsp; &nbsp;
243+
<code>{hexColorCode}</code>
244+
</div>
245+
246+
<CopyToClipboardButton
247+
textToCopy={codeToGetHex}
248+
evtAction={evtCopyToClipboardButtonAction}
249+
/>
250+
</div>
251+
</Tooltip>
188252
);
189253
}

‎stories/ColorHelper/ColorHelper.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { MuiDsfrThemeProvider } from "../../dist/mui";
99
import { Search } from "./Search";
1010
import { useConst } from "powerhooks/useConst";
1111
import { Evt } from "evt";
12-
import { useStyles } from "./makeStyles";
12+
import { useStyles } from "tss-react";
1313
import type { Props as SearchProps } from "./Search";
1414
import { useEffectOnValueChange } from "powerhooks/useEffectOnValueChange";
1515
import { useWindowVirtualizer } from "@tanstack/react-virtual";
@@ -93,9 +93,8 @@ export function ColorHelper() {
9393
This tool help you find the perfect DSFR color decision for your usecase.
9494
<br />
9595
<br />
96-
If you have the hex code (e.g. <code>#c9191e</code>) of a color that you know
97-
belong to the DSFR palette you can use the filter to find to which decision it
98-
corresponds.
96+
Use se search filters to the DSFR compliant color decision that best fit your
97+
needs.
9998
</CallOut>
10099
<Search
101100
evtAction={evtSearchAction}

‎stories/ColorHelper/CopyToClipboardButton.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useEffect } from "react";
22
import { Button } from "../../dist/Button";
3-
import { useStyles } from "./makeStyles";
3+
import { useStyles } from "tss-react";
44
import { fr } from "../../dist";
55
import { assert } from "tsafe/assert";
66
import { type NonPostableEvt } from "evt";
@@ -15,7 +15,7 @@ type Props = {
1515
export function CopyToClipboardButton(props: Props) {
1616
const { className, textToCopy, evtAction } = props;
1717

18-
const { css, cx, theme } = useStyles();
18+
const { css, cx } = useStyles();
1919

2020
const [isCopiedFeedbackShown, setIsCopiedFeedbackShown] = useState(false);
2121

@@ -65,7 +65,7 @@ export function CopyToClipboardButton(props: Props) {
6565
<i
6666
className={cx(
6767
fr.cx("fr-icon-check-line"),
68-
css({ "color": theme.decisions.text.default.success.default })
68+
css({ "color": fr.colors.decisions.text.default.success.default })
6969
)}
7070
/>
7171
<span
@@ -75,7 +75,7 @@ export function CopyToClipboardButton(props: Props) {
7575
}
7676
})}
7777
>
78-
&nbsp; Copied to clipboard!
78+
&nbsp; Path copied!
7979
</span>
8080
</p>
8181
) : (

‎stories/ColorHelper/Search.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from "react";
2-
import { makeStyles } from "./makeStyles";
2+
import { tss } from "tss-react";
33
import { SearchBar } from "../../dist/SearchBar";
44
import { Button } from "../../dist/Button";
55
import { fr } from "../../dist/fr";
@@ -66,7 +66,7 @@ export function Search(props: Props) {
6666
[evtAction, inputElement, searchBarWrapperElement]
6767
);
6868

69-
const [areFiltersOpen, setAreFiltersOpen] = useState(false);
69+
const [areFiltersOpen, setAreFiltersOpen] = useState(true);
7070

7171
useEffectOnValueChange(() => {
7272
if (areFiltersOpen) {
@@ -168,8 +168,10 @@ export function Search(props: Props) {
168168
);
169169
}
170170

171-
const useStyles = makeStyles<{ filterWrapperMaxHeight: number }>({ "name": { Search } })(
172-
(theme, { filterWrapperMaxHeight }) => ({
171+
const useStyles = tss
172+
.withName({ Search })
173+
.withParams<{ filterWrapperMaxHeight: number }>()
174+
.create(({ filterWrapperMaxHeight }) => ({
173175
"root": {
174176
"display": "flex",
175177
"paddingTop": fr.spacing("6v")
@@ -178,25 +180,26 @@ const useStyles = makeStyles<{ filterWrapperMaxHeight: number }>({ "name": { Sea
178180
"flex": 1
179181
},
180182
"filterButton": {
181-
"backgroundColor": theme.decisions.background.actionLow.blueFrance.default,
183+
"backgroundColor": fr.colors.decisions.background.actionLow.blueFrance.default,
182184
"&&&:hover": {
183-
"backgroundColor": theme.decisions.background.actionLow.blueFrance.hover
185+
"backgroundColor": fr.colors.decisions.background.actionLow.blueFrance.hover
184186
},
185-
"color": theme.decisions.text.actionHigh.blueFrance.default,
187+
"color": fr.colors.decisions.text.actionHigh.blueFrance.default,
186188
"marginLeft": fr.spacing("4v")
187189
},
188190
"filtersWrapper": {
189191
"transition": "max-height 0.2s ease-out",
190192
"maxHeight": filterWrapperMaxHeight,
191193
"overflow": "hidden",
192194
"display": "flex",
193-
"marginTop": fr.spacing("4v"),
194195
"& > *": {
195196
"flex": 1,
196197
...fr.spacing("padding", {
197198
"rightLeft": "4v"
198199
})
199-
}
200+
},
201+
...fr.spacing("margin", {
202+
"topBottom": "9v"
203+
})
200204
}
201-
})
202-
);
205+
}));

‎stories/ColorHelper/makeStyles.ts‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11883,10 +11883,10 @@ tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
1188311883
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
1188411884
integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
1188511885

11886-
tss-react@^4.8.6:
11887-
version "4.8.6"
11888-
resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.8.6.tgz#c1d9ede44474e3119bb21ef6ef7ae4057cbee751"
11889-
integrity sha512-+ucvy+SLFUUxd3zA3QS9Q7bo5FerR8VIUOHieyvYYMoBqtpVinnOA0aTOSXcSdl4lqjFc/9gNA5x0B5iIWk7hA==
11886+
tss-react@^4.9.0:
11887+
version "4.9.0"
11888+
resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.9.0.tgz#1457e14e89f1c4a033b697f866439f5921c923d8"
11889+
integrity sha512-dgqNSR9J0+NxvdwzXoKo2HxGGu2sg0UikLnPumGNLa9CSPVcL6ZNu23CJwxPaMvRnQC8NRyNbUN3pBCS9AWwRA==
1189011890
dependencies:
1189111891
"@emotion/cache" "*"
1189211892
"@emotion/serialize" "*"

0 commit comments

Comments
 (0)