From 7ec94f987b3080804135637f439e3962dfbc096a Mon Sep 17 00:00:00 2001 From: BalbinaK Date: Mon, 7 Nov 2022 12:38:05 +0100 Subject: [PATCH 1/8] fix(css): point at version 1 of fabric-ds/css to handle focus-ring classes Use the latest alias of fabric-ds/css package in the test, documentation and storybook environment --- .storybook/preview-head.html | 2 +- index.html | 2 +- tests/eik-react-jsx/index.html | 2 +- tests/eik-react/index.html | 2 +- tests/ssr-react-16-cjs/src/server.js | 2 +- tests/ssr-react-16/server.js | 2 +- tests/ssr-react-ts-16-cjs/src/server.ts | 2 +- tests/ssr-react-ts-16/src/server.ts | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 315593d8..6799cdff 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,4 +1,4 @@ diff --git a/index.html b/index.html index d77c2a4e..30a106f3 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@ } Fabric React diff --git a/tests/eik-react/index.html b/tests/eik-react/index.html index 9662818b..a4979239 100644 --- a/tests/eik-react/index.html +++ b/tests/eik-react/index.html @@ -5,7 +5,7 @@ Fabric React diff --git a/tests/ssr-react-16-cjs/src/server.js b/tests/ssr-react-16-cjs/src/server.js index 0458a10d..b2e18cf7 100644 --- a/tests/ssr-react-16-cjs/src/server.js +++ b/tests/ssr-react-16-cjs/src/server.js @@ -22,7 +22,7 @@ server.get('/', (request, reply) => { Fabric React - +
${markup}
diff --git a/tests/ssr-react-16/server.js b/tests/ssr-react-16/server.js index e2c3985c..49289e27 100644 --- a/tests/ssr-react-16/server.js +++ b/tests/ssr-react-16/server.js @@ -25,7 +25,7 @@ server.get('/', (request, reply) => { Fabric React - +
${markup}
diff --git a/tests/ssr-react-ts-16-cjs/src/server.ts b/tests/ssr-react-ts-16-cjs/src/server.ts index 7b99d541..dc39216d 100644 --- a/tests/ssr-react-ts-16-cjs/src/server.ts +++ b/tests/ssr-react-ts-16-cjs/src/server.ts @@ -23,7 +23,7 @@ server.get('/', (request, reply) => { Fabric React - +
${markup}
diff --git a/tests/ssr-react-ts-16/src/server.ts b/tests/ssr-react-ts-16/src/server.ts index 66c244f3..ded51608 100644 --- a/tests/ssr-react-ts-16/src/server.ts +++ b/tests/ssr-react-ts-16/src/server.ts @@ -26,7 +26,7 @@ server.get('/', (request, reply) => { Fabric React - +
${markup}
From bfcedef9cde42f08d6063ad74706b94b6e7db06c Mon Sep 17 00:00:00 2001 From: BalbinaK Date: Mon, 7 Nov 2022 14:58:07 +0100 Subject: [PATCH 2/8] fix: handle onClick in Clickable instead of Card if ToggleItem is rendered If Card renders a Clickable radio toggle, and has tabIndex (onClick prop), it breaks arrow-navigation between other Toggle radio Cards. In order to fix it, the onClick is moved to the Clickable component and name prop is provided to Clickable radios of the same group. --- packages/_helpers/clickable.tsx | 5 +- packages/card/docs/Card.mdx | 92 +++++++++++++------------- packages/card/stories/Card.stories.tsx | 92 +++++++++++++------------- 3 files changed, 96 insertions(+), 93 deletions(-) diff --git a/packages/_helpers/clickable.tsx b/packages/_helpers/clickable.tsx index d3390b49..c066766d 100644 --- a/packages/_helpers/clickable.tsx +++ b/packages/_helpers/clickable.tsx @@ -37,7 +37,6 @@ export type ClickableProps = { /** * Click handler - * If passed, clickable renders as a button with a click event */ onClick?: () => void; } & Partial> & @@ -59,9 +58,9 @@ export function Clickable({ className="absolute inset-0 h-full w-full appearance-none cursor-pointer focus-ring" type={type} controlled={false} - onChange={() => undefined} + onChange={props.onClick ? props.onClick : () => undefined} value={value} - name={`${id}:toggle`} + name={`${props.name || id}:toggle`} > {children} diff --git a/packages/card/docs/Card.mdx b/packages/card/docs/Card.mdx index 9fb4d605..3433188a 100644 --- a/packages/card/docs/Card.mdx +++ b/packages/card/docs/Card.mdx @@ -360,35 +360,39 @@ function Example() { return (
- setChecked(!checked)} - className="mt-32 w-max" - > -
- - - Checkbox in a card - -
+ + + setChecked(!checked)} + > + Checkbox in a card +
- setSelected('a')}> -
- - - Radio in a card - A - -
+ + + setSelected('a')} + > + Radio in a card - A + - setSelected('b')}> -
- - - Radio in a card - B - -
+ + + setSelected('b')} + > + Radio in a card - B +
@@ -415,34 +419,32 @@ function Example() {
setSelected('a')} > -
- -
-

- Purchase foo -

-

520 kr/mnd

-
+ +
+

+ setSelected('a')}> + Purchase foo + +

+

520 kr/mnd

setSelected('b')} > -
- -
-

- Purchase bar -

-

124 kr/mnd

-
+ +
+

+ setSelected('b')}> + Purchase bar + +

+

124 kr/mnd

diff --git a/packages/card/stories/Card.stories.tsx b/packages/card/stories/Card.stories.tsx index 987aa346..bab7ef92 100644 --- a/packages/card/stories/Card.stories.tsx +++ b/packages/card/stories/Card.stories.tsx @@ -251,35 +251,39 @@ export const TogglesInCard = () => { return (
- setChecked(!checked)} - className="mt-32 w-max" - > -
- - - Checkbox in a card - -
+ + + setChecked(!checked)} + > + Checkbox in a card +
- setSelected('a')}> -
- - - Radio in a card - A - -
+ + + setSelected('a')} + > + Radio in a card - A + - setSelected('b')}> -
- - - Radio in a card - B - -
+ + + setSelected('b')} + > + Radio in a card - B +
@@ -293,34 +297,32 @@ export const DeadToggleInCard = () => {
setSelected('a')} > -
- -
-

- Purchase foo -

-

520 kr/mnd

-
+ +
+

+ setSelected('a')}> + Purchase foo + +

+

520 kr/mnd

setSelected('b')} > -
- -
-

- Purchase bar -

-

124 kr/mnd

-
+ +
+

+ setSelected('b')}> + Purchase bar + +

+

124 kr/mnd

From 0714dd8730d8a952ed7ca07da30f0f0413088176 Mon Sep 17 00:00:00 2001 From: BalbinaK Date: Mon, 7 Nov 2022 14:58:54 +0100 Subject: [PATCH 3/8] refactor(card): refactor non-flat card style --- packages/card/src/component.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/card/src/component.tsx b/packages/card/src/component.tsx index e2a248f2..ab822067 100644 --- a/packages/card/src/component.tsx +++ b/packages/card/src/component.tsx @@ -47,13 +47,15 @@ export function Card(props: CardProps) { )} -
+ {!props.flat && ( +
+ )} {children} , From a5e561e1be1697ace3a0ded3b50b91e4205b8e45 Mon Sep 17 00:00:00 2001 From: BalbinaK Date: Mon, 7 Nov 2022 15:01:15 +0100 Subject: [PATCH 4/8] fix(clickable): add focus-ring and focus-ring-inset classes to ToggleItem Display visual feedback on ToggleItem focus --- packages/_helpers/clickable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/_helpers/clickable.tsx b/packages/_helpers/clickable.tsx index c066766d..142b0812 100644 --- a/packages/_helpers/clickable.tsx +++ b/packages/_helpers/clickable.tsx @@ -55,7 +55,7 @@ export function Clickable({ return radio || checkbox ? ( undefined} From bcf70365e700deffdc162cbdb286003025a7eb5d Mon Sep 17 00:00:00 2001 From: BalbinaK Date: Tue, 8 Nov 2022 15:49:45 +0100 Subject: [PATCH 5/8] feat(card): log deprecation warning if Card receives onClick prop Click events should be handled by Clickable component, not Card. Before implementing a breaking change in Card, a deprecation warning is logged if Card receives an onClick prop --- packages/card/src/component.tsx | 13 +++++++---- packages/utils/src/index.ts | 1 + .../utils/src/useLogDeprecationWarning.ts | 22 +++++++++++++++++++ 3 files changed, 32 insertions(+), 4 deletions(-) create mode 100644 packages/utils/src/useLogDeprecationWarning.ts diff --git a/packages/card/src/component.tsx b/packages/card/src/component.tsx index ab822067..63d22ea7 100644 --- a/packages/card/src/component.tsx +++ b/packages/card/src/component.tsx @@ -2,9 +2,17 @@ import React from 'react'; import { card as c } from '@fabric-ds/css/component-classes'; import { classNames } from '@chbphone55/classnames'; import { CardProps } from './props'; +import { useLogDeprecationWarning } from '../../utils/src'; export function Card(props: CardProps) { const { as = 'div', children, flat, ...rest } = props; + + useLogDeprecationWarning({ + condition: !!props.onClick, + message: + "'onClick' prop in Card is deprecated. Use Clickable component to handle click events in Cards.", + }); + return React.createElement( as, { @@ -17,6 +25,7 @@ export function Card(props: CardProps) { [props.selected ? c.cardFlatSelected : c.cardFlatUnselected]: props.flat, }), + // @balbinak(08.11.22): onClick support in Card is deprecated. Remove when Fabric React users are ready for this major change tabIndex: props.onClick ? 0 : undefined, onKeyDown: props.onClick ? (e) => { @@ -43,10 +52,6 @@ export function Card(props: CardProps) { )} - {!props.onClick && props.selected && ( - - )} - {!props.flat && (
{ + const loggedOnce = useRef(false); + + useEffect(() => { + if (loggedOnce.current) { + return; + } + + if (condition) { + console.warn(message); + loggedOnce.current = true; + } + }, [condition, message]); +}; From 4e640ca01d13c08fa6d20f5f11be52b7d423688f Mon Sep 17 00:00:00 2001 From: BalbinaK Date: Tue, 8 Nov 2022 16:18:10 +0100 Subject: [PATCH 6/8] docs(card): use Clickable instead of Card to pass onClick handler in docs examples --- packages/card/docs/Card.mdx | 24 +++++++++++++++--------- packages/card/src/props.tsx | 2 +- packages/card/stories/Card.stories.tsx | 8 +++++--- 3 files changed, 21 insertions(+), 13 deletions(-) diff --git a/packages/card/docs/Card.mdx b/packages/card/docs/Card.mdx index 3433188a..69818da0 100644 --- a/packages/card/docs/Card.mdx +++ b/packages/card/docs/Card.mdx @@ -172,7 +172,7 @@ function Example() { return (
- setSelected(!selected)} selected={selected}> +

DNB Eiendom

- Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. Inkl. - bl.a. vv/fyring. + setSelected(!selected)}> + Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. Inkl. + bl.a. vv/fyring. +

Bøgata 25C, 0655 Oslo

@@ -207,7 +209,7 @@ function Example() {

- setSelected(!selected)} selected={selected}> +

DNB Eiendom

- Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. Inkl. - bl.a. vv/fyring. + setSelected(!selected)}> + Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. Inkl. + bl.a. vv/fyring. +

Bøgata 25C, 0655 Oslo

@@ -239,7 +243,7 @@ function Example() {

- setSelected(!selected)} selected={selected}> +

DNB Eiendom

- Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. Inkl. - bl.a. vv/fyring. + setSelected(!selected)}> + Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. Inkl. + bl.a. vv/fyring. +

Bøgata 25C, 0655 Oslo

diff --git a/packages/card/src/props.tsx b/packages/card/src/props.tsx index aff6bba2..8513a1a4 100644 --- a/packages/card/src/props.tsx +++ b/packages/card/src/props.tsx @@ -26,7 +26,7 @@ export interface CardProps { className?: string; /** - * When the card is clicked + * When the card is clicked (deprecated) */ onClick?: () => void; } diff --git a/packages/card/stories/Card.stories.tsx b/packages/card/stories/Card.stories.tsx index bab7ef92..d9527396 100644 --- a/packages/card/stories/Card.stories.tsx +++ b/packages/card/stories/Card.stories.tsx @@ -52,7 +52,7 @@ export const SelectableCard = () => { return (

- setSelected(!selected)}> + {

DNB Eiendom

- Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. Inkl. - bl.a. vv/fyring. + setSelected(!selected)}> + Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. Inkl. + bl.a. vv/fyring. +

Bøgata 25C, 0655 Oslo

From b70a88f64955a958c149b6393dfe0ccf9ed8845e Mon Sep 17 00:00:00 2001 From: BalbinaK Date: Tue, 8 Nov 2022 16:28:07 +0100 Subject: [PATCH 7/8] test: update tests with the onClick prop changes --- tests/ssr-react-16-cjs/src/index.jsx | 32 ++++++++++---------- tests/ssr-react-ts-16-cjs/src/index.tsx | 32 ++++++++++---------- tests/ssr-react-ts-16/src/index.tsx | 39 +++++++++++++++---------- 3 files changed, 55 insertions(+), 48 deletions(-) diff --git a/tests/ssr-react-16-cjs/src/index.jsx b/tests/ssr-react-16-cjs/src/index.jsx index 535d5f02..7e329b81 100644 --- a/tests/ssr-react-16-cjs/src/index.jsx +++ b/tests/ssr-react-16-cjs/src/index.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, TextArea, Card } from '@fabric-ds/react'; +import { Button, TextArea, Card, Clickable } from '@fabric-ds/react'; export default function App() { const [selected, setSelected] = React.useState(false); @@ -20,13 +20,7 @@ export default function App() { className="mb-10" >

- { - setSelected(!selected); - console.log('hello world'); - }} - selected={selected} - > +

DNB Eiendom

- Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. Inkl. - bl.a. vv/fyring. + setSelected(!selected)}> + Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. + Inkl. bl.a. vv/fyring. +

Bøgata 25C, 0655 Oslo

@@ -61,7 +57,7 @@ export default function App() {

- setSelected(!selected)} selected={selected}> +

DNB Eiendom

- Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. Inkl. - bl.a. vv/fyring. + setSelected(!selected)}> + Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. + Inkl. bl.a. vv/fyring. +

Bøgata 25C, 0655 Oslo

@@ -93,7 +91,7 @@ export default function App() {

- setSelected(!selected)} selected={selected}> +

DNB Eiendom

- Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. Inkl. - bl.a. vv/fyring. + setSelected(!selected)}> + Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. + Inkl. bl.a. vv/fyring. +

Bøgata 25C, 0655 Oslo

diff --git a/tests/ssr-react-ts-16-cjs/src/index.tsx b/tests/ssr-react-ts-16-cjs/src/index.tsx index 535d5f02..7e329b81 100644 --- a/tests/ssr-react-ts-16-cjs/src/index.tsx +++ b/tests/ssr-react-ts-16-cjs/src/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, TextArea, Card } from '@fabric-ds/react'; +import { Button, TextArea, Card, Clickable } from '@fabric-ds/react'; export default function App() { const [selected, setSelected] = React.useState(false); @@ -20,13 +20,7 @@ export default function App() { className="mb-10" >

- { - setSelected(!selected); - console.log('hello world'); - }} - selected={selected} - > +

DNB Eiendom

- Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. Inkl. - bl.a. vv/fyring. + setSelected(!selected)}> + Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. + Inkl. bl.a. vv/fyring. +

Bøgata 25C, 0655 Oslo

@@ -61,7 +57,7 @@ export default function App() {

- setSelected(!selected)} selected={selected}> +

DNB Eiendom

- Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. Inkl. - bl.a. vv/fyring. + setSelected(!selected)}> + Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. + Inkl. bl.a. vv/fyring. +

Bøgata 25C, 0655 Oslo

@@ -93,7 +91,7 @@ export default function App() {

- setSelected(!selected)} selected={selected}> +

DNB Eiendom

- Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. Inkl. - bl.a. vv/fyring. + setSelected(!selected)}> + Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. + Inkl. bl.a. vv/fyring. +

Bøgata 25C, 0655 Oslo

diff --git a/tests/ssr-react-ts-16/src/index.tsx b/tests/ssr-react-ts-16/src/index.tsx index 3502e601..528bc29d 100644 --- a/tests/ssr-react-ts-16/src/index.tsx +++ b/tests/ssr-react-ts-16/src/index.tsx @@ -1,5 +1,12 @@ import React from 'react'; -import { Button, TextArea, Card, Toggle, Combobox } from '@fabric-ds/react'; +import { + Button, + TextArea, + Card, + Toggle, + Combobox, + Clickable, +} from '@fabric-ds/react'; function useSWMatch(term) { const [characters, setCharacters] = React.useState([]); @@ -57,13 +64,7 @@ export default function App() { className="mb-10" >

- { - setSelected(!selected); - console.log('hello world'); - }} - selected={selected} - > +

DNB Eiendom

- Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. Inkl. - bl.a. vv/fyring. + setSelected(!selected)}> + Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. + Inkl. bl.a. vv/fyring. +

Bøgata 25C, 0655 Oslo

@@ -98,7 +101,7 @@ export default function App() {

- setSelected(!selected)} selected={selected}> +

DNB Eiendom

- Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. Inkl. - bl.a. vv/fyring. + setSelected(!selected)}> + Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. + Inkl. bl.a. vv/fyring. +

Bøgata 25C, 0655 Oslo

@@ -130,7 +135,7 @@ export default function App() {

- setSelected(!selected)} selected={selected}> +

DNB Eiendom

- Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. Inkl. - bl.a. vv/fyring. + setSelected(!selected)}> + Stilfull og gjennomgående 3-roms m/balkong. Oppusset i 2019. + Inkl. bl.a. vv/fyring. +

Bøgata 25C, 0655 Oslo

From bb9ff0b4278b95f651ee6a860f710fd4a661e4eb Mon Sep 17 00:00:00 2001 From: BalbinaK Date: Tue, 8 Nov 2022 17:12:47 +0100 Subject: [PATCH 8/8] refactor(dead-toggle): rename 'name' prop in DeadToggle to avoid confusion --- packages/_helpers/dead-toggle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/_helpers/dead-toggle.tsx b/packages/_helpers/dead-toggle.tsx index 3f22f311..b1a38ee5 100644 --- a/packages/_helpers/dead-toggle.tsx +++ b/packages/_helpers/dead-toggle.tsx @@ -48,7 +48,7 @@ export function DeadToggle(props: DeadToggleProps) { type={type} className="hidden" labelClassName={props.labelClassName} - name="test" + name="dead-toggle" controlled={true} onChange={() => undefined} value={props.value}