Skip to content

feat(react-card): add new selectable feature#24486

Merged
marcosmoura merged 72 commits into
microsoft:masterfrom
marcosmoura:marcosmoura/feat/selectable-cards
Nov 3, 2022
Merged

feat(react-card): add new selectable feature#24486
marcosmoura merged 72 commits into
microsoft:masterfrom
marcosmoura:marcosmoura/feat/selectable-cards

Conversation

@marcosmoura

@marcosmoura marcosmoura commented Aug 23, 2022

Copy link
Copy Markdown
Contributor

This PR introduces the selectable feature to the react-card main component.

A11y

This PR do not include a11y documentation/validation. This will be introduced by a follow-up PR, to not over complicate the review (of this already huge PR).

New properties were added to the <Card /> component:

selected: Defines the state of the card selection.
defaultSelected: The default value for the selection
onCardSelect: Callback called when the internal selections changes
select: A custom slot to place any element as the select, often used with react-checkbox.

In case any of these properties receive a value, the card will become selectable.

Changes to root slot

To implement selectable card, we need a way to make them interactive. In this case, the root slot changed to not only accept a div tag but also button and a tags. If a card is interactive and selectable, we implemented checks to prevent both actions to concurrently happen.

Changes to stories

All stories were changed to have better documentation.

@marcosmoura marcosmoura self-assigned this Aug 23, 2022
@marcosmoura marcosmoura changed the title feat(react-card): add option to have card as button or link feat(react-card): selectable cards Aug 23, 2022
@codesandbox-ci

codesandbox-ci Bot commented Aug 23, 2022

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 8e2010c:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam

fabricteam commented Aug 23, 2022

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-card
Card - All
67.664 kB
19.635 kB
71.863 kB
20.939 kB
4.199 kB
1.304 kB
react-card
Card
63.346 kB
18.539 kB
67.641 kB
19.897 kB
4.295 kB
1.358 kB
react-card
CardHeader
9.65 kB
3.962 kB
9.782 kB
3.998 kB
132 B
36 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-card
CardFooter
8.607 kB
3.622 kB
react-card
CardPreview
8.708 kB
3.678 kB
react-components
react-components: Button, FluentProvider & webLightTheme
62.94 kB
17.663 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
189.906 kB
52.963 kB
react-components
react-components: FluentProvider & webLightTheme
33.446 kB
11.033 kB
react-portal-compat
PortalCompatProvider
5.857 kB
1.978 kB
🤖 This report was generated against 6ce378e366246cc7504a7adc7a49ad5c06c11f1e

@size-auditor

size-auditor Bot commented Aug 23, 2022

Copy link
Copy Markdown

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 6ce378e366246cc7504a7adc7a49ad5c06c11f1e (build)

@fabricteam

fabricteam commented Aug 23, 2022

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1315 1319 5000
Button mount 943 950 5000
FluentProvider mount 1545 1440 5000
FluentProviderWithTheme mount 641 635 10
FluentProviderWithTheme virtual-rerender 516 583 10
FluentProviderWithTheme virtual-rerender-with-unmount 612 611 10
MakeStyles mount 1827 1851 50000
SpinButton mount 2534 2284 5000

* master: (99 commits)
  applying package updates
  add coastal to @fluentui/react package and components (microsoft#24599)
  fix(react-18-tests-v9): extend correct tsconfig.json (microsoft#24626)
  feat(react-18-tests-v9): Add cypress setup to enable writing cypress tests (microsoft#24619)
  chore: Removing CompoundButtonAsToggleButton story since it was importing non-exported functions (microsoft#24620)
  Update PeoplePicker focus styles for the close button - Add borderRadius to getFocusStyle (microsoft#24596)
  fix(react-theme): Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted (microsoft#24611)
  Website fabric core (microsoft#24613)
  fix(react-theme) update react theme colors mapping (microsoft#24608)
  Remove downloaded artifact file after using it (microsoft#24606)
  Fix artifact downloading race condition (microsoft#24607)
  chore(deps): bump moment-timezone from 0.5.34 to 0.5.37 (microsoft#24604)
  Remove check for commit existence and make it optional (microsoft#24587)
  Update "screener-build.yml" to include lage's output (microsoft#24586)
  fix(react-theme): Change colorBrandForeground2 mapping in teamsDark theme (microsoft#24579)
  Add scoping for workflow (microsoft#24466)
  fix(react-theme): Swap Background1 and Foreground1 in HC color palette (microsoft#24498)
  applying package updates
  Add support for javascript date localization (microsoft#24577)
  fix: Combobox and Dropdown hover/active borders and padding style fixes (microsoft#24362)
  ...
* master: (63 commits)
  feat: add helper types to assist DOM element handling (microsoft#24722)
  applying package updates
  Textarea/hc bug (microsoft#24701)
  Fix null ref in use slider (microsoft#24728)
  Add Field unit tests, and remove snapshot tests (microsoft#24706)
  Stress Test: add build commands (microsoft#24575)
  Coachmark - useOffsetHeight should cause re-render on each set state to match v7 functionality (microsoft#24702)
  Implement screener tests for Field components (microsoft#24684)
  Update Field types to clean up react-field.api.md (microsoft#24703)
  fix(Popup): remove rotate(360deg) from PopupContent content styles (microsoft#24432)
  fix(FocusZone): should reset tabindex when focus is outside the zone with prop `shouldResetActiveElementWhenTabFromZone` (microsoft#24463)
  Fix greyed out legend key contrast ratio (microsoft#24714)
  fix: Portal compat should apply `focus-visible` ponyfill (microsoft#24712)
  Fix artifact error (microsoft#24717)
  chore(react-dialog): remove localShorthands in favor of griffel shorthands (microsoft#24715)
  Skip screener checks for draft PRs with exception of appropriately la… (microsoft#24694)
  fix: Remove provider classname from focus styles (microsoft#24710)
  feat: autocontrolled `useTable` hook (microsoft#24688)
  feat: add dialog properties to getNativeElementProps (microsoft#24698)
  Using migrate rather than upgrade term (microsoft#24695)
  ...
* master: (28 commits)
  Fix value font-weight inside heatmap chart (microsoft#24726)
  Fix legend overflow-indication-text role (microsoft#24756)
  Support custom locale in date axis  (microsoft#24753)
  Cleanup env variables (microsoft#24739)
  ci(github): add GH Action to add issue labels based on new GH issue template (microsoft#24788)
  Update disallowedChangeTypes for newly created packages, to allow only 'prerelease' change types by default (microsoft#24763)
  feat(react-components): Adding missing AvatarGroup exports (microsoft#24770)
  remove unnecessary nohoist (microsoft#24760)
  feat(react-dialog): supports 1st rule of ARIA (microsoft#24525)
  BREAKING: TableCell layouts are handled by layout components (microsoft#24762)
  feat: Implement table cell layout components (microsoft#24773)
  applying package updates
  fix: remove readonly from DetailsList (microsoft#24615)
  chore: Cleaning up tokens in Button components so they better adhere to the design spec (microsoft#24732)
  fix: react-combobox listbox popup width matches trigger width (microsoft#24733)
  fix: react-combobox Option focus outline only shows with keyboard nav (microsoft#24700)
  feat: Publish react-field package, and export from react-components/unstable (microsoft#24235)
  fix: Replacing bottom border styles with text decoration underline in Link (microsoft#24734)
  docs(react-theme): Update readme (microsoft#24755)
  Add tests for hover states (microsoft#24390)
  ...
* master: (21 commits)
  fix(react-tabster): make acceptCondition optional as Tabster dont require it (microsoft#25416)
  chore: adds disableButtonEnhancement on triggers (microsoft#25211)
  applying package updates
  feat: Add support for the wbtx whiteboard file extension (microsoft#25346)
  chore(react-select): migrate to new package structure (microsoft#25359)
  chore(react-divider): migrate to new package structure (microsoft#25360)
  fix(docsite): codesandbox exports now working properly for newly migrated v9 packages (microsoft#25388)
  Website: fix focus border on UHF footer links (microsoft#25389)
  applying package updates
  feat: re-export react-table logic hooks (microsoft#25386)
  chore(react-aria): migrate to new package structure (microsoft#25199)
  chore(babel-preset-global-context): migrate to new package structure (microsoft#25340)
  applying package updates
  fix: Improve Stack's style recalculation performance by selectively applying children selectors (microsoft#25381)
  applying package updates
  fix(projects-test): explicitly install next version 12 to fix CI (microsoft#25374)
  allow details element to be toggled inside selection and focus zones (microsoft#25324)
  fix(react-persona): Changing persona's versions to pinned versions (microsoft#25367)
  update fast element and foundation package versions stable (microsoft#25364)
  chore(keyboard-keys, priority-overflow, react-context-selector, react-conformance-griffel): migrate to new package structure (microsoft#25362)
  ...
* master: (22 commits)
  fix(react-menu): removes exposing of internal type FluentTriggerComponent (microsoft#25410)
  fix(react-popover): removes exposing of internal type FluentTriggerComponent (microsoft#25411)
  applying package updates
  fix(react-tooltip): removes exposing of internal type FluentTriggerComponent (microsoft#25409)
  chore: Reducing bundle size of Stack by moving selector used in multiple places to local const (microsoft#25429)
  docs(rfcs): Simple component implementation (microsoft#25139)
  Fix migration publishing (microsoft#25422)
  Integrate storywright for story tests - As part of exploring screener alternative (microsoft#25399)
  fix(react-utilities): exposes internal methods used in API surface (microsoft#25406)
  fix(react-dialog): removes exposing of internal type FluentTriggerComponent (microsoft#25408)
  fix(react-context-selector): exposes internal type ContextSelector (microsoft#25404)
  fix(react-aria): exposes internal leaking types (microsoft#25403)
  fix(react-shared-contexts): exposes internal leaks used in the API surface (microsoft#25405)
  fix(react-positioning): exposes new typings to avoid exposing internal methods (microsoft#25407)
  applying package updates
  fix: Allowing DatePicker to be focusable within FocusZones by default (microsoft#25428)
  fix: Pad in slider so the thumb does not render outside the bounds of the root element (microsoft#25378)
  feat: Add enableScopedSelectors prop to Stack that, when true, makes the Stack styles selectors be more scoped to not be as expensive in style recalculation (microsoft#25397)
  fix(react-avatar): Remove gaps between AvatarGroupItem/OveflowButton and its outline (microsoft#25382)
  fix: Combobox text attribute ignored when empty string is passed (microsoft#24665)
  ...
* master: (23 commits)
  fix(docsite-v9): move theme picker under component title so it can be visible on embedded pages (microsoft#25385)
  applying package updates
  feat: Implement child render function for DataGrid rows (microsoft#25476)
  fix(useTable): sort should adapt to enhanced row types (microsoft#25487)
  applying package updates
  feat: positioning should happen out of React lifecycle (microsoft#25456)
  applying package updates
  chore(react-link): migrate to new package structure (microsoft#25471)
  chore(react-input): migrate to new package structure (microsoft#25469)
  fix glob pattern for syncpack (microsoft#25465)
  chore(react-label): migrate to new package structure (microsoft#25470)
  chore: bump Griffel to latest (microsoft#25412)
  chore: add few small toolbar improvements (microsoft#25468)
  docs: fix small typos (microsoft#25464)
  chore: fix dependencies in @fluentui/react-toolbar (microsoft#25466)
  feat: v0 menu style migration from v9 (microsoft#25012)
  applying package updates
  Update List to render children on first render() call (microsoft#25331)
  Scaffold react-skeleton package (microsoft#25435)
  fix(public-docsite): Changing crossplatform urls to use 'cross' instead of 'crossplatform' (microsoft#25437)
  ...

@sopranopillow sopranopillow left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some minor comments :) great work!

Comment thread packages/react-components/react-card/src/components/Card/Card.types.ts Outdated
Comment thread packages/react-components/react-card/src/components/Card/Card.types.ts Outdated
Comment thread packages/react-components/react-card/src/components/Card/Card.types.ts Outdated
Comment thread packages/react-components/react-card/src/components/Card/Card.types.ts Outdated
Comment thread packages/react-components/react-card/src/components/Card/useCard.ts Outdated
Comment thread packages/react-components/react-card/src/components/Card/Card.cy.tsx Outdated
Comment thread packages/react-components/react-card/src/components/Card/Card.cy.tsx Outdated
Comment thread packages/react-components/react-card/src/components/Card/Card.cy.tsx Outdated
Comment thread packages/react-components/react-card/src/components/Card/Card.cy.tsx Outdated
/**
* Select element represents a checkbox.
*/
select?: Slot<'div', 'input'>;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if it represents a checkbox why not call it a checkbox slot ? 😅

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because it is to represent a "selectable" card, so that is why we chose select, selected and onCardSelect. In most cases this can be a checkbox but can also receive a radio.

Comment thread packages/react-components/react-card/src/components/Card/Card.types.ts Outdated
Comment thread packages/react-components/react-card/src/components/Card/Card.types.ts Outdated
Comment thread packages/react-components/react-card/src/components/Card/Card.types.ts Outdated
* master:
  feat(scripts): improve API violation reporting (microsoft#25356)
  applying package updates
  fix: Preventing blanket selectors from Fabric component from being applied via new preventBlanketFontInheritance prop (microsoft#25453)
  feat(react-infobutton): Add initial implementation (microsoft#25247)
  chore(react-avatar, avatar-context): migrate to new package structure (microsoft#25473)
  chore(react-portal, portal-compat, portal-compat-context): migrate to new package structure (microsoft#25481)
  docs(react-infobutton): Adding component's spec (microsoft#25251)
  fix(screener-build workflow): scope package to build for v9 VR tests to speed up perf (microsoft#25494)
  chore(vr-tests-v9): Convert Button VR tests to CSF (microsoft#25108)
@marcosmoura marcosmoura changed the title feat(react-card): selectable cards feat(react-card): add new selectable feature Nov 3, 2022
@marcosmoura marcosmoura merged commit 7c951ef into microsoft:master Nov 3, 2022
NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022
Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023
@marcosmoura marcosmoura deleted the marcosmoura/feat/selectable-cards branch August 28, 2023 14:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants