RAC-225: DSM checkbox #12686

StevenVAIDIE · 2020-09-07T09:07:30Z

Description (for Contributor and Core Developer)
This PR contain :

Fix that image diff are not upload into artefact when visual test doesn't pass
Update storybook version to solve bug for booleans: Addon-controls: Fix uncontrolled to controlled warning for booleans storybookjs/storybook#12322
Doc tab selected by default
New component Checkbox

Definition Of Done (for Core Developer only)

Q	A
Added Specs	Todo
Added legacy Behats	Todo
Added acceptance tests	Todo
Added integration tests	Todo
Changelog updated	Todo
Review and 2 GTM	Todo
Micro Demo to the PO (Story only)	Todo
Migration script	-
Tech Doc	-

Todo: Pending / Work in progress
OK: Done / Validated
-: Not needed

akeneo-design-system/package.json

akeneo-design-system/.storybook/preview.tsx

github-actions · 2020-09-07T09:19:17Z

A new version of the staging env has been deployed 🎉
Check it out here: https://samirboulil.github.io/dsm/12686/

github-actions · 2020-09-07T12:46:39Z

A new version of the staging env has been deployed 🎉
Check it out here: https://samirboulil.github.io/dsm/12686/

github-actions · 2020-09-07T13:29:12Z

Your visual regression tests are not passing.
Here is a pull request to fix them: #12690

github-actions · 2020-09-07T13:40:51Z

A new version of the staging env has been deployed 🎉
Check it out here: https://samirboulil.github.io/dsm/12686/

juliensnz

GTM after fix

Also:

We should add the animation present in the PIM https://github.com/akeneo/pim-community-dev/blob/master/src/Akeneo/Platform/Bundle/UIBundle/Resources/workspaces/shared/src/components/Checkbox.tsx#L5
We could add a small margin between elements in the variation previews

akeneo-design-system/src/components/Checkbox/Checkbox.tsx

github-actions · 2020-09-07T14:18:44Z

A new version of the staging env has been deployed 🎉
Check it out here: https://samirboulil.github.io/dsm/12686/

ValentinMumble · 2020-09-07T15:04:34Z

akeneo-design-system/src/components/Checkbox/Checkbox.tsx

+ * @TODO use grey140 instead of #11324d
+*/
+
+const CheckboxContainer = styled.div < {checked: boolean, readOnly: boolean } > `


Shouldn't we use the HTML <input type="checkbox"> element for semantical and accessibility purposes?

I done this in a previous version this but with "undetermined" state i don't know how to do it

akeneo-design-system/src/components/Checkbox/Checkbox.visual.tsx

akeneo-design-system/src/components/index.ts

akeneo-design-system/src/icons/CheckIcon.tsx

SamirBoulil

If we are to merge this PR, shouldn’t we need to seek approval from Stephan ?

SamirBoulil

Niiiice !
GTM after Steph’ has reviewed it!

akeneo-design-system/src/components/Checkbox/Checkbox.stories.mdx

akeneo-design-system/src/components/Checkbox/Checkbox.tsx

akeneo-design-system/src/components/Checkbox/Checkbox.unit.tsx

github-actions · 2020-09-08T07:49:30Z

Your visual regression tests are not passing.
Here is a pull request to fix them: #12695

github-actions · 2020-09-08T12:46:26Z

Your visual regression tests are not passing.
Here is a pull request to fix them: #12695

Co-authored-by: StevenVAIDIE <StevenVAIDIE@users.noreply.github.com>

…torybookjs/storybook/blob/next/MIGRATION.md#previewprops-renamed

…nent and allow user to change theme

…e visual tests remove diffs when it fail

github-actions · 2020-09-10T14:51:44Z

Your visual regression tests are not passing.
Here is a pull request to fix them: #12711

Co-authored-by: StevenVAIDIE <StevenVAIDIE@users.noreply.github.com>

github-actions · 2020-09-10T15:02:32Z

A new version of the staging env has been deployed 🎉
Check it out here: https://samirboulil.github.io/dsm/12686/

github-actions · 2020-09-11T09:42:06Z

Your visual regression tests are not passing.
Here is a pull request to fix them: #12719

Co-authored-by: StevenVAIDIE <StevenVAIDIE@users.noreply.github.com>

github-actions · 2020-09-11T09:47:18Z

A new version of the staging env has been deployed 🎉
Check it out here: https://samirboulil.github.io/dsm/12686/

github-actions · 2020-09-11T09:56:38Z

A new version of the staging env has been deployed 🎉
Check it out here: https://samirboulil.github.io/dsm/12686/

github-actions · 2020-09-11T10:33:32Z

A new version of the staging env has been deployed 🎉
Check it out here: https://samirboulil.github.io/dsm/12686/

SamirBoulil · 2020-09-11T12:32:13Z

akeneo-design-system/src/components/Checkbox/Checkbox.unit.tsx

+  const checkbox = getByText('Checkbox');
+  fireEvent.click(checkbox);
+
+  expect(onChange).not.toBeCalled();


Shouldn't we check the checkbox is still checked ?

For me, we didn't need to check if the checkbox is checked because it's a controlled component but I don't know @ValentinMumble what is your opinion ?

Yes, as it is a controlled component there shouldn't be any internal logic that could change the checked prop so not really needed for me as well but as you wish

github-actions · 2020-09-11T13:06:12Z

Your visual regression tests are not passing.
Here is a pull request to fix them: #12720

Co-authored-by: StevenVAIDIE <StevenVAIDIE@users.noreply.github.com>

github-actions · 2020-09-11T13:16:33Z

A new version of the staging env has been deployed 🎉
Check it out here: https://samirboulil.github.io/dsm/12686/

StevenVAIDIE changed the base branch from master to dsm September 7, 2020 09:07

StevenVAIDIE changed the title ~~Rac 225~~ RAC-225: DSM checkbox Sep 7, 2020

StevenVAIDIE commented Sep 7, 2020

View reviewed changes

akeneo-design-system/package.json Show resolved Hide resolved

StevenVAIDIE commented Sep 7, 2020

View reviewed changes

akeneo-design-system/.storybook/preview.tsx Outdated Show resolved Hide resolved

StevenVAIDIE force-pushed the RAC-225 branch from 85c84f9 to 708cd2f Compare September 7, 2020 09:15

juliensnz approved these changes Sep 7, 2020

View reviewed changes

akeneo-design-system/src/components/Checkbox/Checkbox.tsx Outdated Show resolved Hide resolved

ValentinMumble reviewed Sep 7, 2020

View reviewed changes

akeneo-design-system/src/components/Checkbox/Checkbox.visual.tsx Show resolved Hide resolved

ValentinMumble reviewed Sep 7, 2020

View reviewed changes

akeneo-design-system/src/components/index.ts Show resolved Hide resolved

ValentinMumble reviewed Sep 7, 2020

View reviewed changes

akeneo-design-system/src/icons/CheckIcon.tsx Outdated Show resolved Hide resolved

ValentinMumble approved these changes Sep 7, 2020

View reviewed changes

SamirBoulil reviewed Sep 7, 2020

View reviewed changes

SamirBoulil approved these changes Sep 7, 2020

View reviewed changes

juliensnz force-pushed the RAC-225 branch from aade138 to a8f9600 Compare September 8, 2020 12:43

StevenVAIDIE and others added 9 commits September 9, 2020 12:28

RAC-225: first version of checkbox

7d090c8

RAC-225: feat improve Checkbox component

731afc0

RAC-225: feat add unit and visual tests

c582167

Update visual tests for branch RAC-225 (#12690)

8605d2a

Co-authored-by: StevenVAIDIE <StevenVAIDIE@users.noreply.github.com>

RAC-225: expose component outside project

a29f377

RAC-225: fix Preview and Props are deprecated => https://github.com/s…

6f1f795

…torybookjs/storybook/blob/next/MIGRATION.md#previewprops-renamed

RAC-225: add theme notion to avoid have color hex directly into compo…

7519c1f

…nent and allow user to change theme

RAC-225: fix review

ca280b6

RAC-225: fix unit tests

07967ac

StevenVAIDIE added 4 commits September 9, 2020 12:28

RAC-225: move upload atifact before update visual tests because updat…

c4e3ecf

…e visual tests remove diffs when it fail

RAC-225: fix indent

8eab1ad

relaunch actions

69cf81b

relaunch actions

9f14582

StevenVAIDIE force-pushed the RAC-225 branch from a6011e0 to 9f14582 Compare September 9, 2020 10:28

remove lint to show visual regression

cfc7d91

Update visual tests for branch RAC-225 (#12711)

213b70d

Co-authored-by: StevenVAIDIE <StevenVAIDIE@users.noreply.github.com>

StevenVAIDIE added 3 commits September 10, 2020 18:55

RAC-225: feat add animation

65da7fe

feat: add missing animations

87aba67

RAC-225: fix missing prettier on tsx files

4d99cdb

StevenVAIDIE force-pushed the RAC-225 branch from a81a746 to 4d99cdb Compare September 11, 2020 08:53

RAC-225: use theme from RAC-223

b9b0677

Update visual tests for branch RAC-225 (#12719)

dbc53f3

Co-authored-by: StevenVAIDIE <StevenVAIDIE@users.noreply.github.com>

RAC-225: add usage on checkbox page from notion

87e8548

StevenVAIDIE force-pushed the RAC-225 branch from 787f8f8 to 87e8548 Compare September 11, 2020 10:30

SamirBoulil reviewed Sep 11, 2020

View reviewed changes

RAC-225: fix uncheck colors on notion are not the right color

728dcc5

StevenVAIDIE force-pushed the RAC-225 branch from b2b2e98 to 728dcc5 Compare September 11, 2020 13:02

Update visual tests for branch RAC-225 (#12720)

f7f2821

Co-authored-by: StevenVAIDIE <StevenVAIDIE@users.noreply.github.com>

StevenVAIDIE merged commit 29ec1b5 into dsm Sep 11, 2020

StevenVAIDIE deleted the RAC-225 branch September 11, 2020 13:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RAC-225: DSM checkbox #12686

RAC-225: DSM checkbox #12686

StevenVAIDIE commented Sep 7, 2020 •

edited

github-actions bot commented Sep 7, 2020

github-actions bot commented Sep 7, 2020

github-actions bot commented Sep 7, 2020

github-actions bot commented Sep 7, 2020

juliensnz left a comment •

edited

github-actions bot commented Sep 7, 2020

ValentinMumble Sep 7, 2020

StevenVAIDIE Sep 7, 2020

SamirBoulil left a comment

SamirBoulil left a comment

github-actions bot commented Sep 8, 2020

github-actions bot commented Sep 8, 2020

github-actions bot commented Sep 10, 2020

github-actions bot commented Sep 10, 2020

github-actions bot commented Sep 11, 2020

github-actions bot commented Sep 11, 2020

github-actions bot commented Sep 11, 2020

github-actions bot commented Sep 11, 2020

SamirBoulil Sep 11, 2020

StevenVAIDIE Sep 11, 2020

ValentinMumble Sep 11, 2020

github-actions bot commented Sep 11, 2020

github-actions bot commented Sep 11, 2020

RAC-225: DSM checkbox #12686

RAC-225: DSM checkbox #12686

Conversation

StevenVAIDIE commented Sep 7, 2020 • edited

github-actions bot commented Sep 7, 2020

github-actions bot commented Sep 7, 2020

github-actions bot commented Sep 7, 2020

github-actions bot commented Sep 7, 2020

juliensnz left a comment • edited

Choose a reason for hiding this comment

github-actions bot commented Sep 7, 2020

ValentinMumble Sep 7, 2020

Choose a reason for hiding this comment

StevenVAIDIE Sep 7, 2020

Choose a reason for hiding this comment

SamirBoulil left a comment

Choose a reason for hiding this comment

SamirBoulil left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 8, 2020

github-actions bot commented Sep 8, 2020

github-actions bot commented Sep 10, 2020

github-actions bot commented Sep 10, 2020

github-actions bot commented Sep 11, 2020

github-actions bot commented Sep 11, 2020

github-actions bot commented Sep 11, 2020

github-actions bot commented Sep 11, 2020

SamirBoulil Sep 11, 2020

Choose a reason for hiding this comment

StevenVAIDIE Sep 11, 2020

Choose a reason for hiding this comment

ValentinMumble Sep 11, 2020

Choose a reason for hiding this comment

github-actions bot commented Sep 11, 2020

github-actions bot commented Sep 11, 2020

StevenVAIDIE commented Sep 7, 2020 •

edited

juliensnz left a comment •

edited