react-card - Phase 1 #19646
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "prerelease", | ||
| "comment": "Phase 1 release", | ||
| "packageName": "@fluentui/react-card", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "patch" | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "prerelease", | ||
| "comment": "Add Card to unstable components", | ||
| "packageName": "@fluentui/react-components", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "patch" | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,3 @@ | ||
| .storybook/ | ||
| .vscode/ | ||
| bundle-size/ | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,14 @@ | ||
| const rootMain = require('../../../.storybook/main'); | ||
|
|
||
| module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript'|'babel'>} */ ({ | ||
| ...rootMain, | ||
| stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'], | ||
| addons: [...rootMain.addons], | ||
| webpackFinal: (config, options) => { | ||
| const localConfig = { ...rootMain.webpackFinal(config, options) }; | ||
|
|
||
| // add your own webpack tweaks if needed | ||
|
|
||
| return localConfig; | ||
| }, | ||
| }); |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| { | ||
| "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", | ||
| "extends": "./api-extractor.json", | ||
| "mainEntryPointFilePath": "<projectFolder>/dist/packages/<unscopedPackageName>/src/index.d.ts" | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './components/CardFooter/index'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './components/CardHeader/index'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './components/CardPreview/index'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import * as React from 'react'; | ||
| import { Body, Caption } from '@fluentui/react-text'; | ||
| import { Button } from '@fluentui/react-button'; | ||
| import { | ||
| Open16Regular, | ||
| ArrowReply16Regular, | ||
| DismissSquare20Regular, | ||
| MoreHorizontal16Regular, | ||
| MoreVertical20Regular, | ||
| } from '@fluentui/react-icons'; | ||
| import { makeStyles } from '@fluentui/react-make-styles'; | ||
| import { Card, CardFooter, CardHeader, CardPreview } from '../index'; | ||
|
|
||
| const useStyles = makeStyles({ | ||
| root: { | ||
| background: 'white', | ||
| padding: '6px', | ||
| width: '20px', | ||
| height: '20px', | ||
|
|
||
| '> img': { | ||
| width: '100%', | ||
| height: '100%', | ||
| }, | ||
| }, | ||
| }); | ||
| const LogoBackground = (props: React.HTMLAttributes<HTMLElement>) => { | ||
|
Contributor
Author
There was a problem hiding this comment. Sample component too look like the design specs |
||
| const styles = useStyles(); | ||
|
|
||
| return <div className={styles.root}>{props.children}</div>; | ||
| }; | ||
|
|
||
| export const ActionCard = () => ( | ||
| <> | ||
| <Card style={{ minWidth: '368px' }} onClick={() => console.log('Test action')}> | ||
| <CardHeader | ||
| image={<img src="./avatar_elvia.svg" alt="Face of a person" />} | ||
| header={ | ||
| <Body> | ||
| <b>Elvia Atkins</b> mentioned you | ||
| </Body> | ||
| } | ||
| description={<Caption>5h ago · About us - Overview</Caption>} | ||
| /> | ||
|
|
||
| <CardPreview | ||
| logo={ | ||
| <LogoBackground> | ||
| <img src="./word_logo.svg" alt="Microsoft Word logo" /> | ||
| </LogoBackground> | ||
| } | ||
| > | ||
| <img src="./doc_template.png" alt="Preview of a Word document " /> | ||
| </CardPreview> | ||
|
|
||
| <CardFooter> | ||
| <Button icon={<ArrowReply16Regular />}>Reply</Button> | ||
| </CardFooter> | ||
| </Card> | ||
|
|
||
| <br /> | ||
|
|
||
| <Card style={{ minWidth: '368px' }}> | ||
| <CardHeader | ||
| image={<img src="./avatar_mauricio.svg" alt="Face of a person" />} | ||
| header={ | ||
| <Body> | ||
| <b>Mauricio August</b> <span style={{ color: 'gray' }}>+ 7 others edited</span> | ||
| </Body> | ||
| } | ||
| description={<Caption>Artificial Intelligence Deck</Caption>} | ||
| action={<DismissSquare20Regular />} | ||
| /> | ||
|
|
||
| <CardPreview | ||
| logo={ | ||
| <LogoBackground> | ||
| <img src="./powerpoint_logo.svg" alt="Microsoft PowerPoint logo" /> | ||
| </LogoBackground> | ||
| } | ||
| > | ||
| <img src="./ai_deck_template.png" alt="Preview of an artificial intelligence slide deck" /> | ||
| </CardPreview> | ||
|
|
||
| <CardFooter action={<Button transparent icon={<MoreVertical20Regular />} />}> | ||
| <Button icon={<Open16Regular />}>View changes</Button> | ||
| </CardFooter> | ||
| </Card> | ||
| </> | ||
| ); | ||
|
|
||
| export const GridviewCard = () => ( | ||
| <Card | ||
| style={{ | ||
| minWidth: '254px', | ||
| maxWidth: '368px', | ||
| }} | ||
| > | ||
| <CardPreview style={{ marginTop: '-12px' }}> | ||
| <img src="./sales_template.png" alt="Preview of a sales slide deck" /> | ||
| </CardPreview> | ||
| <CardHeader | ||
| image={<img src="./powerpoint_logo.svg" alt="Microsoft PowerPoint logo" />} | ||
| header={ | ||
| <Body> | ||
| <b>Sales Analysis</b> | ||
| </Body> | ||
| } | ||
| description={<Caption style={{ color: 'gray' }}>Elvia replied to a comment</Caption>} | ||
| action={<MoreHorizontal16Regular />} | ||
| /> | ||
| </Card> | ||
| ); | ||
|
|
||
| export default { | ||
| title: 'Components/OfficeCard', | ||
| component: Card, | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,6 +4,7 @@ exports[`Card renders a default state 1`] = ` | |
| <div> | ||
| <div | ||
| class="" | ||
| role="group" | ||
| > | ||
| Default Card | ||
| </div> | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
are we sure that we want to release immediately ? are we in a rush to deliver this to partners ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
as you said it's not targeted for the beta release
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Partner's needs are basically ASAP, hence the need for this first phase iteration.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Another note: if partners consume this as a separate package along with react-components there would be compatibility issues since the removal of
mergePropsand other breaking changes to slots. It would be hard for them to figure out why things are breaking because we use prerelease tags that don't communicate breaking changes