web component accordion #26547
Merged
web component accordion #26547
Conversation
This file contains 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
📊 Bundle size report🤖 This report was generated against b79b33d10cbd6015531fa943e0e6dbe7f84b9b42 |
|
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 11b3852:
|
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: b79b33d10cbd6015531fa943e0e6dbe7f84b9b42 (build) |
| /** | ||
| * An Accordion Item can be medium, large, and larger in height | ||
| */ | ||
| export type AccordionItemSize = 'medium' | 'large' | 'larger'; |
There was a problem hiding this comment.
In FUIR9, there are 4 sizes (applicable to AccordionHeader): 'small' | 'medium' | 'large' | 'extra-large'
| /** | ||
| * An Accordion Item can be medium, large, and larger in height | ||
| */ | ||
| export type AccordionItemSize = 'medium' | 'large' | 'larger'; |
There was a problem hiding this comment.
For all the options, export const object + type, see text component as an example:
fluentui/packages/web-components/src/text/text.options.ts
Lines 31 to 41 in 5e3ba35
packages/web-components/src/accordion/accordion-item/accordion-item.definition.ts
Outdated
Show resolved
Hide resolved
packages/web-components/src/accordion/accordion-item/accordion-item.ts
Outdated
Show resolved
Hide resolved
| import { styles } from './accordion.styles.js'; | ||
| import { template } from './accordion.template.js'; | ||
|
|
||
| export const definition = Accordion.compose({ |
packages/web-components/src/accordion/accordion/accordion.stories.ts
Outdated
Show resolved
Hide resolved
| presentationIcon: { | ||
| description: 'Slot for presentation icons', | ||
| control: { | ||
| type: 'boolean', |
There was a problem hiding this comment.
I do not know how we want to document slots.
With this approach I see presentationIcon: boolean But there is neither presentationIcon attribute nor a slot.
I would rather add a separate story to document the presentation icon.
The same applies to the customExpandIcon.
There was a problem hiding this comment.
@miroslavstastny I've just added a separate story for customExpandIcon as well as presentationIcon
packages/web-components/src/accordion/accordion/accordion.stories.ts
Outdated
Show resolved
Hide resolved
| </svg>`; | ||
|
|
||
| const storyTemplate = html<AccordionStoryArgs>` | ||
| <fluent-accordion expand-mode=${x => x.expandMode}> |
There was a problem hiding this comment.
With expand-mode="single" I am still able to expand multiple items:
There was a problem hiding this comment.
change/@fluentui-web-components-ee0dceff-c555-429c-b688-92aa40dc7f5e.json
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
The component API differs from FUIR9.
As part of every component implementation we should have an md which documents the API and highlights + justifies the differences.
Check https://github.com/microsoft/fluentui/blob/619b625d628ba1b30398052d7dc6b8110aff2c80/packages/react-components/react-button/docs/MIGRATION.md for inspiration.
@chrisdholt, @levithomason - I would like to here your opinion as I think this is important.
chrisdholt
approved these changes
Feb 16, 2023
There was a problem hiding this comment.
LGTM - Thanks for making the updates @brianchristopherbrady
| * @public | ||
| * @default 'start' | ||
| * @remarks | ||
| * HTML Attribute: expandIconPosition |
There was a problem hiding this comment.
Suggested change
| * HTML Attribute: expandIconPosition | |
| * HTML Attribute: expand-icon-position |
miroslavstastny
approved these changes
Feb 16, 2023
eljefe223
reviewed
Feb 16, 2023
| align-items: center; | ||
| padding-right: ${spacingHorizontalS}; | ||
| grid-column: 2 / span 1; | ||
| grid-row: 1 / span 1; |
There was a problem hiding this comment.
Is start and end in the same grid column?
eljefe223
reviewed
Feb 16, 2023
|
|
||
| export const styles = css` | ||
| :host { | ||
| display: flex; |
There was a problem hiding this comment.
Use display helper function
There was a problem hiding this comment.
${display("flex")} :host {}
eljefe223
approved these changes
Feb 17, 2023
chrisdholt
pushed a commit
that referenced
this pull request
Apr 29, 2024
* accordion and accordion item init * yarn change * updates docs * updates accordion item styles * code formatting * updates imports * adds v9 appearance sizes * updates attribute name to align with fluent v9 * adds alternative stories for accordion with custom icons * adds docs * updates storybook * updates changelog * removes dead code * removes dynamic icons from sb * removes dead code * adds accordion README * moves accordion readme to accordion directory * updates docs * updates accordion docs * updates docs * updates docs * fixes docs * fixes exports * adds display helper to styles * optimizes styles * updates html helper to use html.partial * optimizes styles * exports directly on class * removes html helper * removes arg tables from stories * sorts exports alphabetically * api report * flattens accordion componnent folders * removes comment * updates styles * optimizes styles * updates attributes * removes renaming of definition import * removes attribute syntax * adds attr * reverts api-report * removes dead code * updates styles * consolidates stories into one * updates docs * adds display helper to accordion styles
radium-v
pushed a commit
to radium-v/fluentui
that referenced
this pull request
Apr 29, 2024
* accordion and accordion item init * yarn change * updates docs * updates accordion item styles * code formatting * updates imports * adds v9 appearance sizes * updates attribute name to align with fluent v9 * adds alternative stories for accordion with custom icons * adds docs * updates storybook * updates changelog * removes dead code * removes dynamic icons from sb * removes dead code * adds accordion README * moves accordion readme to accordion directory * updates docs * updates accordion docs * updates docs * updates docs * fixes docs * fixes exports * adds display helper to styles * optimizes styles * updates html helper to use html.partial * optimizes styles * exports directly on class * removes html helper * removes arg tables from stories * sorts exports alphabetically * api report * flattens accordion componnent folders * removes comment * updates styles * optimizes styles * updates attributes * removes renaming of definition import * removes attribute syntax * adds attr * reverts api-report * removes dead code * updates styles * consolidates stories into one * updates docs * adds display helper to accordion styles
radium-v
pushed a commit
to radium-v/fluentui
that referenced
this pull request
Apr 29, 2024
* accordion and accordion item init * yarn change * updates docs * updates accordion item styles * code formatting * updates imports * adds v9 appearance sizes * updates attribute name to align with fluent v9 * adds alternative stories for accordion with custom icons * adds docs * updates storybook * updates changelog * removes dead code * removes dynamic icons from sb * removes dead code * adds accordion README * moves accordion readme to accordion directory * updates docs * updates accordion docs * updates docs * updates docs * fixes docs * fixes exports * adds display helper to styles * optimizes styles * updates html helper to use html.partial * optimizes styles * exports directly on class * removes html helper * removes arg tables from stories * sorts exports alphabetically * api report * flattens accordion componnent folders * removes comment * updates styles * optimizes styles * updates attributes * removes renaming of definition import * removes attribute syntax * adds attr * reverts api-report * removes dead code * updates styles * consolidates stories into one * updates docs * adds display helper to accordion styles
radium-v
pushed a commit
to radium-v/fluentui
that referenced
this pull request
Apr 30, 2024
* accordion and accordion item init * yarn change * updates docs * updates accordion item styles * code formatting * updates imports * adds v9 appearance sizes * updates attribute name to align with fluent v9 * adds alternative stories for accordion with custom icons * adds docs * updates storybook * updates changelog * removes dead code * removes dynamic icons from sb * removes dead code * adds accordion README * moves accordion readme to accordion directory * updates docs * updates accordion docs * updates docs * updates docs * fixes docs * fixes exports * adds display helper to styles * optimizes styles * updates html helper to use html.partial * optimizes styles * exports directly on class * removes html helper * removes arg tables from stories * sorts exports alphabetically * api report * flattens accordion componnent folders * removes comment * updates styles * optimizes styles * updates attributes * removes renaming of definition import * removes attribute syntax * adds attr * reverts api-report * removes dead code * updates styles * consolidates stories into one * updates docs * adds display helper to accordion styles
radium-v
pushed a commit
that referenced
this pull request
Apr 30, 2024
* accordion and accordion item init * yarn change * updates docs * updates accordion item styles * code formatting * updates imports * adds v9 appearance sizes * updates attribute name to align with fluent v9 * adds alternative stories for accordion with custom icons * adds docs * updates storybook * updates changelog * removes dead code * removes dynamic icons from sb * removes dead code * adds accordion README * moves accordion readme to accordion directory * updates docs * updates accordion docs * updates docs * updates docs * fixes docs * fixes exports * adds display helper to styles * optimizes styles * updates html helper to use html.partial * optimizes styles * exports directly on class * removes html helper * removes arg tables from stories * sorts exports alphabetically * api report * flattens accordion componnent folders * removes comment * updates styles * optimizes styles * updates attributes * removes renaming of definition import * removes attribute syntax * adds attr * reverts api-report * removes dead code * updates styles * consolidates stories into one * updates docs * adds display helper to accordion styles
radium-v
pushed a commit
that referenced
this pull request
May 2, 2024
* accordion and accordion item init * yarn change * updates docs * updates accordion item styles * code formatting * updates imports * adds v9 appearance sizes * updates attribute name to align with fluent v9 * adds alternative stories for accordion with custom icons * adds docs * updates storybook * updates changelog * removes dead code * removes dynamic icons from sb * removes dead code * adds accordion README * moves accordion readme to accordion directory * updates docs * updates accordion docs * updates docs * updates docs * fixes docs * fixes exports * adds display helper to styles * optimizes styles * updates html helper to use html.partial * optimizes styles * exports directly on class * removes html helper * removes arg tables from stories * sorts exports alphabetically * api report * flattens accordion componnent folders * removes comment * updates styles * optimizes styles * updates attributes * removes renaming of definition import * removes attribute syntax * adds attr * reverts api-report * removes dead code * updates styles * consolidates stories into one * updates docs * adds display helper to accordion styles
radium-v
pushed a commit
that referenced
this pull request
May 2, 2024
* accordion and accordion item init * yarn change * updates docs * updates accordion item styles * code formatting * updates imports * adds v9 appearance sizes * updates attribute name to align with fluent v9 * adds alternative stories for accordion with custom icons * adds docs * updates storybook * updates changelog * removes dead code * removes dynamic icons from sb * removes dead code * adds accordion README * moves accordion readme to accordion directory * updates docs * updates accordion docs * updates docs * updates docs * fixes docs * fixes exports * adds display helper to styles * optimizes styles * updates html helper to use html.partial * optimizes styles * exports directly on class * removes html helper * removes arg tables from stories * sorts exports alphabetically * api report * flattens accordion componnent folders * removes comment * updates styles * optimizes styles * updates attributes * removes renaming of definition import * removes attribute syntax * adds attr * reverts api-report * removes dead code * updates styles * consolidates stories into one * updates docs * adds display helper to accordion styles
radium-v
pushed a commit
that referenced
this pull request
May 2, 2024
* accordion and accordion item init * yarn change * updates docs * updates accordion item styles * code formatting * updates imports * adds v9 appearance sizes * updates attribute name to align with fluent v9 * adds alternative stories for accordion with custom icons * adds docs * updates storybook * updates changelog * removes dead code * removes dynamic icons from sb * removes dead code * adds accordion README * moves accordion readme to accordion directory * updates docs * updates accordion docs * updates docs * updates docs * fixes docs * fixes exports * adds display helper to styles * optimizes styles * updates html helper to use html.partial * optimizes styles * exports directly on class * removes html helper * removes arg tables from stories * sorts exports alphabetically * api report * flattens accordion componnent folders * removes comment * updates styles * optimizes styles * updates attributes * removes renaming of definition import * removes attribute syntax * adds attr * reverts api-report * removes dead code * updates styles * consolidates stories into one * updates docs * adds display helper to accordion styles
radium-v
pushed a commit
that referenced
this pull request
May 3, 2024
* accordion and accordion item init * yarn change * updates docs * updates accordion item styles * code formatting * updates imports * adds v9 appearance sizes * updates attribute name to align with fluent v9 * adds alternative stories for accordion with custom icons * adds docs * updates storybook * updates changelog * removes dead code * removes dynamic icons from sb * removes dead code * adds accordion README * moves accordion readme to accordion directory * updates docs * updates accordion docs * updates docs * updates docs * fixes docs * fixes exports * adds display helper to styles * optimizes styles * updates html helper to use html.partial * optimizes styles * exports directly on class * removes html helper * removes arg tables from stories * sorts exports alphabetically * api report * flattens accordion componnent folders * removes comment * updates styles * optimizes styles * updates attributes * removes renaming of definition import * removes attribute syntax * adds attr * reverts api-report * removes dead code * updates styles * consolidates stories into one * updates docs * adds display helper to accordion styles
radium-v
pushed a commit
that referenced
this pull request
May 6, 2024
* accordion and accordion item init * yarn change * updates docs * updates accordion item styles * code formatting * updates imports * adds v9 appearance sizes * updates attribute name to align with fluent v9 * adds alternative stories for accordion with custom icons * adds docs * updates storybook * updates changelog * removes dead code * removes dynamic icons from sb * removes dead code * adds accordion README * moves accordion readme to accordion directory * updates docs * updates accordion docs * updates docs * updates docs * fixes docs * fixes exports * adds display helper to styles * optimizes styles * updates html helper to use html.partial * optimizes styles * exports directly on class * removes html helper * removes arg tables from stories * sorts exports alphabetically * api report * flattens accordion componnent folders * removes comment * updates styles * optimizes styles * updates attributes * removes renaming of definition import * removes attribute syntax * adds attr * reverts api-report * removes dead code * updates styles * consolidates stories into one * updates docs * adds display helper to accordion styles
radium-v
pushed a commit
that referenced
this pull request
May 6, 2024
* accordion and accordion item init * yarn change * updates docs * updates accordion item styles * code formatting * updates imports * adds v9 appearance sizes * updates attribute name to align with fluent v9 * adds alternative stories for accordion with custom icons * adds docs * updates storybook * updates changelog * removes dead code * removes dynamic icons from sb * removes dead code * adds accordion README * moves accordion readme to accordion directory * updates docs * updates accordion docs * updates docs * updates docs * fixes docs * fixes exports * adds display helper to styles * optimizes styles * updates html helper to use html.partial * optimizes styles * exports directly on class * removes html helper * removes arg tables from stories * sorts exports alphabetically * api report * flattens accordion componnent folders * removes comment * updates styles * optimizes styles * updates attributes * removes renaming of definition import * removes attribute syntax * adds attr * reverts api-report * removes dead code * updates styles * consolidates stories into one * updates docs * adds display helper to accordion styles
radium-v
pushed a commit
that referenced
this pull request
May 8, 2024
* accordion and accordion item init * yarn change * updates docs * updates accordion item styles * code formatting * updates imports * adds v9 appearance sizes * updates attribute name to align with fluent v9 * adds alternative stories for accordion with custom icons * adds docs * updates storybook * updates changelog * removes dead code * removes dynamic icons from sb * removes dead code * adds accordion README * moves accordion readme to accordion directory * updates docs * updates accordion docs * updates docs * updates docs * fixes docs * fixes exports * adds display helper to styles * optimizes styles * updates html helper to use html.partial * optimizes styles * exports directly on class * removes html helper * removes arg tables from stories * sorts exports alphabetically * api report * flattens accordion componnent folders * removes comment * updates styles * optimizes styles * updates attributes * removes renaming of definition import * removes attribute syntax * adds attr * reverts api-report * removes dead code * updates styles * consolidates stories into one * updates docs * adds display helper to accordion styles
radium-v
pushed a commit
that referenced
this pull request
May 10, 2024
* accordion and accordion item init * yarn change * updates docs * updates accordion item styles * code formatting * updates imports * adds v9 appearance sizes * updates attribute name to align with fluent v9 * adds alternative stories for accordion with custom icons * adds docs * updates storybook * updates changelog * removes dead code * removes dynamic icons from sb * removes dead code * adds accordion README * moves accordion readme to accordion directory * updates docs * updates accordion docs * updates docs * updates docs * fixes docs * fixes exports * adds display helper to styles * optimizes styles * updates html helper to use html.partial * optimizes styles * exports directly on class * removes html helper * removes arg tables from stories * sorts exports alphabetically * api report * flattens accordion componnent folders * removes comment * updates styles * optimizes styles * updates attributes * removes renaming of definition import * removes attribute syntax * adds attr * reverts api-report * removes dead code * updates styles * consolidates stories into one * updates docs * adds display helper to accordion styles
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
📖 Description
Adds the Accordion web component.
👩💻 Reviewer Notes
✅ Checklist
General
Component-specific