Adding web component Tabs, Tab and TabPanel #27167
Merged
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
…ntui into bearcat/tabListComponent
eljefe223
reviewed
Mar 30, 2023
eljefe223
reviewed
Mar 30, 2023
eljefe223
reviewed
Mar 30, 2023
eljefe223
reviewed
Mar 30, 2023
Removing horizontal selector in css since it's default Removing the TabTokenNames and hard coding tokens into css Combining selectors in css and refactoring css overall Setting fill for subtle appearance selectors
eljefe223
reviewed
Apr 1, 2023
eljefe223
approved these changes
Apr 1, 2023
chrisdholt
approved these changes
Apr 5, 2023
chrisdholt
added a commit
that referenced
this pull request
Apr 29, 2024
* adding tab list spec * adding files for tab list, tab, and tab-panel * adding files for tab list, tab, and tab-panel * adding tab * working tab list web components. no styling. no re-referencing of attributes * adding styling for tabList * commenting out unused styling * adding tab-list styles * basic api working. styling not correct in all cases. * Adding svgs. they are not rendering for some reason * svgs working * updating styling * removing fill on svg * adding logic to track tab selection and css variables. broken * commit before refactor * addint html data attr * updating how tab data is handled * Animations not working * animations not working * broken animation * location of tab is not correct * refactoring dataActiveTabChanged * removing class field for current active tab * adding method to add and remove classes * tab animates to offset location * animating almost correctly * horizontal animations working * adding vertical positioning logic * tabs animations working vertical and horizontal * Adding tab-list options. adding comments * adjusting styling * removing unused vars * removing comments * Adding change file * updating readme. fixing naming conflict in exports of tab-panel index * fixing default value for tablist size * removing check for activeid in setTabData * removing patch for removing activeIndicator * moving pointer events none to disabled fluent tab * removing boolean converters, adding type consts, renaming TabList to Tabs. * documenting difference between tabs and tab list * updating tabs index.js * fixing circular dependency import * removing references to TabList, renaming to Tabs. Removing Tabs orientation type const and importing it from FAST * Refactoring tab into tabs * updating token names object * updating css for tab token names * updating tab token names in tabs.ts * removing unused vars * adding pseudo element to account for spacing difference of bold and unbolded text on active states * adding placeholder element to render active indicator * updating :focus-visible style * removing unused vars * adding tab-content span and 2px margin for tab-content span * updating color foreground for unselected and selected tabs * removing unused var * removing host-context * removing tab content part * putting back tab content part * removing unecessary dom element * removing unecessary z index * adding tab-content class. removing tab-content part * adding display helper function to tab-panel * shorthanding tab padding in tab styles * removing duplicate selector * fixing display helper implementation * removing divs in storybook.ts * removing divs from stories.ts * adding second display helper * adding display helper in tab.styles * removing stray div in stories.ts * adding display helper in tabs.styles * removing active indicator css * removing important * removing unused vars * renaming getSelectedTab to getTab, since tab is passed into method * updating TabData * updating check for previous tab for first render * replacing document add style with fast controller add style * grabbing scale and offset token names from const * updating stories, removing redundant code and renaming tabids * using const objects to provide default values * Removing animation clear method. apparently not needed * updating comments * removing duplicate display * setting display to inline-flex * removing unnecessary disabled font-weight in tab * removing unnecessary outline * replacing margin-right with margin-inline-end * Reducing number of duplicarte border radius Removing horizontal selector in css since it's default Removing the TabTokenNames and hard coding tokens into css Combining selectors in css and refactoring css overall Setting fill for subtle appearance selectors * adding margin-inline-end * Adding max width on tab content * Revert "Adding max width on tab content" This reverts commit b8dffde. * fixing focus visible border * combining padding * Removing margin auto on right margin --------- Co-authored-by: Chris Holt <chhol@microsoft.com>
radium-v
pushed a commit
to radium-v/fluentui
that referenced
this pull request
Apr 29, 2024
* adding tab list spec * adding files for tab list, tab, and tab-panel * adding files for tab list, tab, and tab-panel * adding tab * working tab list web components. no styling. no re-referencing of attributes * adding styling for tabList * commenting out unused styling * adding tab-list styles * basic api working. styling not correct in all cases. * Adding svgs. they are not rendering for some reason * svgs working * updating styling * removing fill on svg * adding logic to track tab selection and css variables. broken * commit before refactor * addint html data attr * updating how tab data is handled * Animations not working * animations not working * broken animation * location of tab is not correct * refactoring dataActiveTabChanged * removing class field for current active tab * adding method to add and remove classes * tab animates to offset location * animating almost correctly * horizontal animations working * adding vertical positioning logic * tabs animations working vertical and horizontal * Adding tab-list options. adding comments * adjusting styling * removing unused vars * removing comments * Adding change file * updating readme. fixing naming conflict in exports of tab-panel index * fixing default value for tablist size * removing check for activeid in setTabData * removing patch for removing activeIndicator * moving pointer events none to disabled fluent tab * removing boolean converters, adding type consts, renaming TabList to Tabs. * documenting difference between tabs and tab list * updating tabs index.js * fixing circular dependency import * removing references to TabList, renaming to Tabs. Removing Tabs orientation type const and importing it from FAST * Refactoring tab into tabs * updating token names object * updating css for tab token names * updating tab token names in tabs.ts * removing unused vars * adding pseudo element to account for spacing difference of bold and unbolded text on active states * adding placeholder element to render active indicator * updating :focus-visible style * removing unused vars * adding tab-content span and 2px margin for tab-content span * updating color foreground for unselected and selected tabs * removing unused var * removing host-context * removing tab content part * putting back tab content part * removing unecessary dom element * removing unecessary z index * adding tab-content class. removing tab-content part * adding display helper function to tab-panel * shorthanding tab padding in tab styles * removing duplicate selector * fixing display helper implementation * removing divs in storybook.ts * removing divs from stories.ts * adding second display helper * adding display helper in tab.styles * removing stray div in stories.ts * adding display helper in tabs.styles * removing active indicator css * removing important * removing unused vars * renaming getSelectedTab to getTab, since tab is passed into method * updating TabData * updating check for previous tab for first render * replacing document add style with fast controller add style * grabbing scale and offset token names from const * updating stories, removing redundant code and renaming tabids * using const objects to provide default values * Removing animation clear method. apparently not needed * updating comments * removing duplicate display * setting display to inline-flex * removing unnecessary disabled font-weight in tab * removing unnecessary outline * replacing margin-right with margin-inline-end * Reducing number of duplicarte border radius Removing horizontal selector in css since it's default Removing the TabTokenNames and hard coding tokens into css Combining selectors in css and refactoring css overall Setting fill for subtle appearance selectors * adding margin-inline-end * Adding max width on tab content * Revert "Adding max width on tab content" This reverts commit b8dffde. * fixing focus visible border * combining padding * Removing margin auto on right margin --------- Co-authored-by: Chris Holt <chhol@microsoft.com>
radium-v
pushed a commit
to radium-v/fluentui
that referenced
this pull request
Apr 29, 2024
* adding tab list spec * adding files for tab list, tab, and tab-panel * adding files for tab list, tab, and tab-panel * adding tab * working tab list web components. no styling. no re-referencing of attributes * adding styling for tabList * commenting out unused styling * adding tab-list styles * basic api working. styling not correct in all cases. * Adding svgs. they are not rendering for some reason * svgs working * updating styling * removing fill on svg * adding logic to track tab selection and css variables. broken * commit before refactor * addint html data attr * updating how tab data is handled * Animations not working * animations not working * broken animation * location of tab is not correct * refactoring dataActiveTabChanged * removing class field for current active tab * adding method to add and remove classes * tab animates to offset location * animating almost correctly * horizontal animations working * adding vertical positioning logic * tabs animations working vertical and horizontal * Adding tab-list options. adding comments * adjusting styling * removing unused vars * removing comments * Adding change file * updating readme. fixing naming conflict in exports of tab-panel index * fixing default value for tablist size * removing check for activeid in setTabData * removing patch for removing activeIndicator * moving pointer events none to disabled fluent tab * removing boolean converters, adding type consts, renaming TabList to Tabs. * documenting difference between tabs and tab list * updating tabs index.js * fixing circular dependency import * removing references to TabList, renaming to Tabs. Removing Tabs orientation type const and importing it from FAST * Refactoring tab into tabs * updating token names object * updating css for tab token names * updating tab token names in tabs.ts * removing unused vars * adding pseudo element to account for spacing difference of bold and unbolded text on active states * adding placeholder element to render active indicator * updating :focus-visible style * removing unused vars * adding tab-content span and 2px margin for tab-content span * updating color foreground for unselected and selected tabs * removing unused var * removing host-context * removing tab content part * putting back tab content part * removing unecessary dom element * removing unecessary z index * adding tab-content class. removing tab-content part * adding display helper function to tab-panel * shorthanding tab padding in tab styles * removing duplicate selector * fixing display helper implementation * removing divs in storybook.ts * removing divs from stories.ts * adding second display helper * adding display helper in tab.styles * removing stray div in stories.ts * adding display helper in tabs.styles * removing active indicator css * removing important * removing unused vars * renaming getSelectedTab to getTab, since tab is passed into method * updating TabData * updating check for previous tab for first render * replacing document add style with fast controller add style * grabbing scale and offset token names from const * updating stories, removing redundant code and renaming tabids * using const objects to provide default values * Removing animation clear method. apparently not needed * updating comments * removing duplicate display * setting display to inline-flex * removing unnecessary disabled font-weight in tab * removing unnecessary outline * replacing margin-right with margin-inline-end * Reducing number of duplicarte border radius Removing horizontal selector in css since it's default Removing the TabTokenNames and hard coding tokens into css Combining selectors in css and refactoring css overall Setting fill for subtle appearance selectors * adding margin-inline-end * Adding max width on tab content * Revert "Adding max width on tab content" This reverts commit b8dffde. * fixing focus visible border * combining padding * Removing margin auto on right margin --------- Co-authored-by: Chris Holt <chhol@microsoft.com>
radium-v
pushed a commit
to radium-v/fluentui
that referenced
this pull request
Apr 30, 2024
* adding tab list spec * adding files for tab list, tab, and tab-panel * adding files for tab list, tab, and tab-panel * adding tab * working tab list web components. no styling. no re-referencing of attributes * adding styling for tabList * commenting out unused styling * adding tab-list styles * basic api working. styling not correct in all cases. * Adding svgs. they are not rendering for some reason * svgs working * updating styling * removing fill on svg * adding logic to track tab selection and css variables. broken * commit before refactor * addint html data attr * updating how tab data is handled * Animations not working * animations not working * broken animation * location of tab is not correct * refactoring dataActiveTabChanged * removing class field for current active tab * adding method to add and remove classes * tab animates to offset location * animating almost correctly * horizontal animations working * adding vertical positioning logic * tabs animations working vertical and horizontal * Adding tab-list options. adding comments * adjusting styling * removing unused vars * removing comments * Adding change file * updating readme. fixing naming conflict in exports of tab-panel index * fixing default value for tablist size * removing check for activeid in setTabData * removing patch for removing activeIndicator * moving pointer events none to disabled fluent tab * removing boolean converters, adding type consts, renaming TabList to Tabs. * documenting difference between tabs and tab list * updating tabs index.js * fixing circular dependency import * removing references to TabList, renaming to Tabs. Removing Tabs orientation type const and importing it from FAST * Refactoring tab into tabs * updating token names object * updating css for tab token names * updating tab token names in tabs.ts * removing unused vars * adding pseudo element to account for spacing difference of bold and unbolded text on active states * adding placeholder element to render active indicator * updating :focus-visible style * removing unused vars * adding tab-content span and 2px margin for tab-content span * updating color foreground for unselected and selected tabs * removing unused var * removing host-context * removing tab content part * putting back tab content part * removing unecessary dom element * removing unecessary z index * adding tab-content class. removing tab-content part * adding display helper function to tab-panel * shorthanding tab padding in tab styles * removing duplicate selector * fixing display helper implementation * removing divs in storybook.ts * removing divs from stories.ts * adding second display helper * adding display helper in tab.styles * removing stray div in stories.ts * adding display helper in tabs.styles * removing active indicator css * removing important * removing unused vars * renaming getSelectedTab to getTab, since tab is passed into method * updating TabData * updating check for previous tab for first render * replacing document add style with fast controller add style * grabbing scale and offset token names from const * updating stories, removing redundant code and renaming tabids * using const objects to provide default values * Removing animation clear method. apparently not needed * updating comments * removing duplicate display * setting display to inline-flex * removing unnecessary disabled font-weight in tab * removing unnecessary outline * replacing margin-right with margin-inline-end * Reducing number of duplicarte border radius Removing horizontal selector in css since it's default Removing the TabTokenNames and hard coding tokens into css Combining selectors in css and refactoring css overall Setting fill for subtle appearance selectors * adding margin-inline-end * Adding max width on tab content * Revert "Adding max width on tab content" This reverts commit b8dffde. * fixing focus visible border * combining padding * Removing margin auto on right margin --------- Co-authored-by: Chris Holt <chhol@microsoft.com>
radium-v
pushed a commit
that referenced
this pull request
Apr 30, 2024
* adding tab list spec * adding files for tab list, tab, and tab-panel * adding files for tab list, tab, and tab-panel * adding tab * working tab list web components. no styling. no re-referencing of attributes * adding styling for tabList * commenting out unused styling * adding tab-list styles * basic api working. styling not correct in all cases. * Adding svgs. they are not rendering for some reason * svgs working * updating styling * removing fill on svg * adding logic to track tab selection and css variables. broken * commit before refactor * addint html data attr * updating how tab data is handled * Animations not working * animations not working * broken animation * location of tab is not correct * refactoring dataActiveTabChanged * removing class field for current active tab * adding method to add and remove classes * tab animates to offset location * animating almost correctly * horizontal animations working * adding vertical positioning logic * tabs animations working vertical and horizontal * Adding tab-list options. adding comments * adjusting styling * removing unused vars * removing comments * Adding change file * updating readme. fixing naming conflict in exports of tab-panel index * fixing default value for tablist size * removing check for activeid in setTabData * removing patch for removing activeIndicator * moving pointer events none to disabled fluent tab * removing boolean converters, adding type consts, renaming TabList to Tabs. * documenting difference between tabs and tab list * updating tabs index.js * fixing circular dependency import * removing references to TabList, renaming to Tabs. Removing Tabs orientation type const and importing it from FAST * Refactoring tab into tabs * updating token names object * updating css for tab token names * updating tab token names in tabs.ts * removing unused vars * adding pseudo element to account for spacing difference of bold and unbolded text on active states * adding placeholder element to render active indicator * updating :focus-visible style * removing unused vars * adding tab-content span and 2px margin for tab-content span * updating color foreground for unselected and selected tabs * removing unused var * removing host-context * removing tab content part * putting back tab content part * removing unecessary dom element * removing unecessary z index * adding tab-content class. removing tab-content part * adding display helper function to tab-panel * shorthanding tab padding in tab styles * removing duplicate selector * fixing display helper implementation * removing divs in storybook.ts * removing divs from stories.ts * adding second display helper * adding display helper in tab.styles * removing stray div in stories.ts * adding display helper in tabs.styles * removing active indicator css * removing important * removing unused vars * renaming getSelectedTab to getTab, since tab is passed into method * updating TabData * updating check for previous tab for first render * replacing document add style with fast controller add style * grabbing scale and offset token names from const * updating stories, removing redundant code and renaming tabids * using const objects to provide default values * Removing animation clear method. apparently not needed * updating comments * removing duplicate display * setting display to inline-flex * removing unnecessary disabled font-weight in tab * removing unnecessary outline * replacing margin-right with margin-inline-end * Reducing number of duplicarte border radius Removing horizontal selector in css since it's default Removing the TabTokenNames and hard coding tokens into css Combining selectors in css and refactoring css overall Setting fill for subtle appearance selectors * adding margin-inline-end * Adding max width on tab content * Revert "Adding max width on tab content" This reverts commit b8dffde. * fixing focus visible border * combining padding * Removing margin auto on right margin --------- Co-authored-by: Chris Holt <chhol@microsoft.com>
radium-v
pushed a commit
that referenced
this pull request
May 2, 2024
* adding tab list spec * adding files for tab list, tab, and tab-panel * adding files for tab list, tab, and tab-panel * adding tab * working tab list web components. no styling. no re-referencing of attributes * adding styling for tabList * commenting out unused styling * adding tab-list styles * basic api working. styling not correct in all cases. * Adding svgs. they are not rendering for some reason * svgs working * updating styling * removing fill on svg * adding logic to track tab selection and css variables. broken * commit before refactor * addint html data attr * updating how tab data is handled * Animations not working * animations not working * broken animation * location of tab is not correct * refactoring dataActiveTabChanged * removing class field for current active tab * adding method to add and remove classes * tab animates to offset location * animating almost correctly * horizontal animations working * adding vertical positioning logic * tabs animations working vertical and horizontal * Adding tab-list options. adding comments * adjusting styling * removing unused vars * removing comments * Adding change file * updating readme. fixing naming conflict in exports of tab-panel index * fixing default value for tablist size * removing check for activeid in setTabData * removing patch for removing activeIndicator * moving pointer events none to disabled fluent tab * removing boolean converters, adding type consts, renaming TabList to Tabs. * documenting difference between tabs and tab list * updating tabs index.js * fixing circular dependency import * removing references to TabList, renaming to Tabs. Removing Tabs orientation type const and importing it from FAST * Refactoring tab into tabs * updating token names object * updating css for tab token names * updating tab token names in tabs.ts * removing unused vars * adding pseudo element to account for spacing difference of bold and unbolded text on active states * adding placeholder element to render active indicator * updating :focus-visible style * removing unused vars * adding tab-content span and 2px margin for tab-content span * updating color foreground for unselected and selected tabs * removing unused var * removing host-context * removing tab content part * putting back tab content part * removing unecessary dom element * removing unecessary z index * adding tab-content class. removing tab-content part * adding display helper function to tab-panel * shorthanding tab padding in tab styles * removing duplicate selector * fixing display helper implementation * removing divs in storybook.ts * removing divs from stories.ts * adding second display helper * adding display helper in tab.styles * removing stray div in stories.ts * adding display helper in tabs.styles * removing active indicator css * removing important * removing unused vars * renaming getSelectedTab to getTab, since tab is passed into method * updating TabData * updating check for previous tab for first render * replacing document add style with fast controller add style * grabbing scale and offset token names from const * updating stories, removing redundant code and renaming tabids * using const objects to provide default values * Removing animation clear method. apparently not needed * updating comments * removing duplicate display * setting display to inline-flex * removing unnecessary disabled font-weight in tab * removing unnecessary outline * replacing margin-right with margin-inline-end * Reducing number of duplicarte border radius Removing horizontal selector in css since it's default Removing the TabTokenNames and hard coding tokens into css Combining selectors in css and refactoring css overall Setting fill for subtle appearance selectors * adding margin-inline-end * Adding max width on tab content * Revert "Adding max width on tab content" This reverts commit b8dffde. * fixing focus visible border * combining padding * Removing margin auto on right margin --------- Co-authored-by: Chris Holt <chhol@microsoft.com>
radium-v
pushed a commit
that referenced
this pull request
May 2, 2024
* adding tab list spec * adding files for tab list, tab, and tab-panel * adding files for tab list, tab, and tab-panel * adding tab * working tab list web components. no styling. no re-referencing of attributes * adding styling for tabList * commenting out unused styling * adding tab-list styles * basic api working. styling not correct in all cases. * Adding svgs. they are not rendering for some reason * svgs working * updating styling * removing fill on svg * adding logic to track tab selection and css variables. broken * commit before refactor * addint html data attr * updating how tab data is handled * Animations not working * animations not working * broken animation * location of tab is not correct * refactoring dataActiveTabChanged * removing class field for current active tab * adding method to add and remove classes * tab animates to offset location * animating almost correctly * horizontal animations working * adding vertical positioning logic * tabs animations working vertical and horizontal * Adding tab-list options. adding comments * adjusting styling * removing unused vars * removing comments * Adding change file * updating readme. fixing naming conflict in exports of tab-panel index * fixing default value for tablist size * removing check for activeid in setTabData * removing patch for removing activeIndicator * moving pointer events none to disabled fluent tab * removing boolean converters, adding type consts, renaming TabList to Tabs. * documenting difference between tabs and tab list * updating tabs index.js * fixing circular dependency import * removing references to TabList, renaming to Tabs. Removing Tabs orientation type const and importing it from FAST * Refactoring tab into tabs * updating token names object * updating css for tab token names * updating tab token names in tabs.ts * removing unused vars * adding pseudo element to account for spacing difference of bold and unbolded text on active states * adding placeholder element to render active indicator * updating :focus-visible style * removing unused vars * adding tab-content span and 2px margin for tab-content span * updating color foreground for unselected and selected tabs * removing unused var * removing host-context * removing tab content part * putting back tab content part * removing unecessary dom element * removing unecessary z index * adding tab-content class. removing tab-content part * adding display helper function to tab-panel * shorthanding tab padding in tab styles * removing duplicate selector * fixing display helper implementation * removing divs in storybook.ts * removing divs from stories.ts * adding second display helper * adding display helper in tab.styles * removing stray div in stories.ts * adding display helper in tabs.styles * removing active indicator css * removing important * removing unused vars * renaming getSelectedTab to getTab, since tab is passed into method * updating TabData * updating check for previous tab for first render * replacing document add style with fast controller add style * grabbing scale and offset token names from const * updating stories, removing redundant code and renaming tabids * using const objects to provide default values * Removing animation clear method. apparently not needed * updating comments * removing duplicate display * setting display to inline-flex * removing unnecessary disabled font-weight in tab * removing unnecessary outline * replacing margin-right with margin-inline-end * Reducing number of duplicarte border radius Removing horizontal selector in css since it's default Removing the TabTokenNames and hard coding tokens into css Combining selectors in css and refactoring css overall Setting fill for subtle appearance selectors * adding margin-inline-end * Adding max width on tab content * Revert "Adding max width on tab content" This reverts commit b8dffde. * fixing focus visible border * combining padding * Removing margin auto on right margin --------- Co-authored-by: Chris Holt <chhol@microsoft.com>
radium-v
pushed a commit
that referenced
this pull request
May 2, 2024
* adding tab list spec * adding files for tab list, tab, and tab-panel * adding files for tab list, tab, and tab-panel * adding tab * working tab list web components. no styling. no re-referencing of attributes * adding styling for tabList * commenting out unused styling * adding tab-list styles * basic api working. styling not correct in all cases. * Adding svgs. they are not rendering for some reason * svgs working * updating styling * removing fill on svg * adding logic to track tab selection and css variables. broken * commit before refactor * addint html data attr * updating how tab data is handled * Animations not working * animations not working * broken animation * location of tab is not correct * refactoring dataActiveTabChanged * removing class field for current active tab * adding method to add and remove classes * tab animates to offset location * animating almost correctly * horizontal animations working * adding vertical positioning logic * tabs animations working vertical and horizontal * Adding tab-list options. adding comments * adjusting styling * removing unused vars * removing comments * Adding change file * updating readme. fixing naming conflict in exports of tab-panel index * fixing default value for tablist size * removing check for activeid in setTabData * removing patch for removing activeIndicator * moving pointer events none to disabled fluent tab * removing boolean converters, adding type consts, renaming TabList to Tabs. * documenting difference between tabs and tab list * updating tabs index.js * fixing circular dependency import * removing references to TabList, renaming to Tabs. Removing Tabs orientation type const and importing it from FAST * Refactoring tab into tabs * updating token names object * updating css for tab token names * updating tab token names in tabs.ts * removing unused vars * adding pseudo element to account for spacing difference of bold and unbolded text on active states * adding placeholder element to render active indicator * updating :focus-visible style * removing unused vars * adding tab-content span and 2px margin for tab-content span * updating color foreground for unselected and selected tabs * removing unused var * removing host-context * removing tab content part * putting back tab content part * removing unecessary dom element * removing unecessary z index * adding tab-content class. removing tab-content part * adding display helper function to tab-panel * shorthanding tab padding in tab styles * removing duplicate selector * fixing display helper implementation * removing divs in storybook.ts * removing divs from stories.ts * adding second display helper * adding display helper in tab.styles * removing stray div in stories.ts * adding display helper in tabs.styles * removing active indicator css * removing important * removing unused vars * renaming getSelectedTab to getTab, since tab is passed into method * updating TabData * updating check for previous tab for first render * replacing document add style with fast controller add style * grabbing scale and offset token names from const * updating stories, removing redundant code and renaming tabids * using const objects to provide default values * Removing animation clear method. apparently not needed * updating comments * removing duplicate display * setting display to inline-flex * removing unnecessary disabled font-weight in tab * removing unnecessary outline * replacing margin-right with margin-inline-end * Reducing number of duplicarte border radius Removing horizontal selector in css since it's default Removing the TabTokenNames and hard coding tokens into css Combining selectors in css and refactoring css overall Setting fill for subtle appearance selectors * adding margin-inline-end * Adding max width on tab content * Revert "Adding max width on tab content" This reverts commit b8dffde. * fixing focus visible border * combining padding * Removing margin auto on right margin --------- Co-authored-by: Chris Holt <chhol@microsoft.com>
radium-v
pushed a commit
that referenced
this pull request
May 3, 2024
* adding tab list spec * adding files for tab list, tab, and tab-panel * adding files for tab list, tab, and tab-panel * adding tab * working tab list web components. no styling. no re-referencing of attributes * adding styling for tabList * commenting out unused styling * adding tab-list styles * basic api working. styling not correct in all cases. * Adding svgs. they are not rendering for some reason * svgs working * updating styling * removing fill on svg * adding logic to track tab selection and css variables. broken * commit before refactor * addint html data attr * updating how tab data is handled * Animations not working * animations not working * broken animation * location of tab is not correct * refactoring dataActiveTabChanged * removing class field for current active tab * adding method to add and remove classes * tab animates to offset location * animating almost correctly * horizontal animations working * adding vertical positioning logic * tabs animations working vertical and horizontal * Adding tab-list options. adding comments * adjusting styling * removing unused vars * removing comments * Adding change file * updating readme. fixing naming conflict in exports of tab-panel index * fixing default value for tablist size * removing check for activeid in setTabData * removing patch for removing activeIndicator * moving pointer events none to disabled fluent tab * removing boolean converters, adding type consts, renaming TabList to Tabs. * documenting difference between tabs and tab list * updating tabs index.js * fixing circular dependency import * removing references to TabList, renaming to Tabs. Removing Tabs orientation type const and importing it from FAST * Refactoring tab into tabs * updating token names object * updating css for tab token names * updating tab token names in tabs.ts * removing unused vars * adding pseudo element to account for spacing difference of bold and unbolded text on active states * adding placeholder element to render active indicator * updating :focus-visible style * removing unused vars * adding tab-content span and 2px margin for tab-content span * updating color foreground for unselected and selected tabs * removing unused var * removing host-context * removing tab content part * putting back tab content part * removing unecessary dom element * removing unecessary z index * adding tab-content class. removing tab-content part * adding display helper function to tab-panel * shorthanding tab padding in tab styles * removing duplicate selector * fixing display helper implementation * removing divs in storybook.ts * removing divs from stories.ts * adding second display helper * adding display helper in tab.styles * removing stray div in stories.ts * adding display helper in tabs.styles * removing active indicator css * removing important * removing unused vars * renaming getSelectedTab to getTab, since tab is passed into method * updating TabData * updating check for previous tab for first render * replacing document add style with fast controller add style * grabbing scale and offset token names from const * updating stories, removing redundant code and renaming tabids * using const objects to provide default values * Removing animation clear method. apparently not needed * updating comments * removing duplicate display * setting display to inline-flex * removing unnecessary disabled font-weight in tab * removing unnecessary outline * replacing margin-right with margin-inline-end * Reducing number of duplicarte border radius Removing horizontal selector in css since it's default Removing the TabTokenNames and hard coding tokens into css Combining selectors in css and refactoring css overall Setting fill for subtle appearance selectors * adding margin-inline-end * Adding max width on tab content * Revert "Adding max width on tab content" This reverts commit b8dffde. * fixing focus visible border * combining padding * Removing margin auto on right margin --------- Co-authored-by: Chris Holt <chhol@microsoft.com>
radium-v
pushed a commit
that referenced
this pull request
May 6, 2024
* adding tab list spec * adding files for tab list, tab, and tab-panel * adding files for tab list, tab, and tab-panel * adding tab * working tab list web components. no styling. no re-referencing of attributes * adding styling for tabList * commenting out unused styling * adding tab-list styles * basic api working. styling not correct in all cases. * Adding svgs. they are not rendering for some reason * svgs working * updating styling * removing fill on svg * adding logic to track tab selection and css variables. broken * commit before refactor * addint html data attr * updating how tab data is handled * Animations not working * animations not working * broken animation * location of tab is not correct * refactoring dataActiveTabChanged * removing class field for current active tab * adding method to add and remove classes * tab animates to offset location * animating almost correctly * horizontal animations working * adding vertical positioning logic * tabs animations working vertical and horizontal * Adding tab-list options. adding comments * adjusting styling * removing unused vars * removing comments * Adding change file * updating readme. fixing naming conflict in exports of tab-panel index * fixing default value for tablist size * removing check for activeid in setTabData * removing patch for removing activeIndicator * moving pointer events none to disabled fluent tab * removing boolean converters, adding type consts, renaming TabList to Tabs. * documenting difference between tabs and tab list * updating tabs index.js * fixing circular dependency import * removing references to TabList, renaming to Tabs. Removing Tabs orientation type const and importing it from FAST * Refactoring tab into tabs * updating token names object * updating css for tab token names * updating tab token names in tabs.ts * removing unused vars * adding pseudo element to account for spacing difference of bold and unbolded text on active states * adding placeholder element to render active indicator * updating :focus-visible style * removing unused vars * adding tab-content span and 2px margin for tab-content span * updating color foreground for unselected and selected tabs * removing unused var * removing host-context * removing tab content part * putting back tab content part * removing unecessary dom element * removing unecessary z index * adding tab-content class. removing tab-content part * adding display helper function to tab-panel * shorthanding tab padding in tab styles * removing duplicate selector * fixing display helper implementation * removing divs in storybook.ts * removing divs from stories.ts * adding second display helper * adding display helper in tab.styles * removing stray div in stories.ts * adding display helper in tabs.styles * removing active indicator css * removing important * removing unused vars * renaming getSelectedTab to getTab, since tab is passed into method * updating TabData * updating check for previous tab for first render * replacing document add style with fast controller add style * grabbing scale and offset token names from const * updating stories, removing redundant code and renaming tabids * using const objects to provide default values * Removing animation clear method. apparently not needed * updating comments * removing duplicate display * setting display to inline-flex * removing unnecessary disabled font-weight in tab * removing unnecessary outline * replacing margin-right with margin-inline-end * Reducing number of duplicarte border radius Removing horizontal selector in css since it's default Removing the TabTokenNames and hard coding tokens into css Combining selectors in css and refactoring css overall Setting fill for subtle appearance selectors * adding margin-inline-end * Adding max width on tab content * Revert "Adding max width on tab content" This reverts commit b8dffde. * fixing focus visible border * combining padding * Removing margin auto on right margin --------- Co-authored-by: Chris Holt <chhol@microsoft.com>
radium-v
pushed a commit
that referenced
this pull request
May 6, 2024
* adding tab list spec * adding files for tab list, tab, and tab-panel * adding files for tab list, tab, and tab-panel * adding tab * working tab list web components. no styling. no re-referencing of attributes * adding styling for tabList * commenting out unused styling * adding tab-list styles * basic api working. styling not correct in all cases. * Adding svgs. they are not rendering for some reason * svgs working * updating styling * removing fill on svg * adding logic to track tab selection and css variables. broken * commit before refactor * addint html data attr * updating how tab data is handled * Animations not working * animations not working * broken animation * location of tab is not correct * refactoring dataActiveTabChanged * removing class field for current active tab * adding method to add and remove classes * tab animates to offset location * animating almost correctly * horizontal animations working * adding vertical positioning logic * tabs animations working vertical and horizontal * Adding tab-list options. adding comments * adjusting styling * removing unused vars * removing comments * Adding change file * updating readme. fixing naming conflict in exports of tab-panel index * fixing default value for tablist size * removing check for activeid in setTabData * removing patch for removing activeIndicator * moving pointer events none to disabled fluent tab * removing boolean converters, adding type consts, renaming TabList to Tabs. * documenting difference between tabs and tab list * updating tabs index.js * fixing circular dependency import * removing references to TabList, renaming to Tabs. Removing Tabs orientation type const and importing it from FAST * Refactoring tab into tabs * updating token names object * updating css for tab token names * updating tab token names in tabs.ts * removing unused vars * adding pseudo element to account for spacing difference of bold and unbolded text on active states * adding placeholder element to render active indicator * updating :focus-visible style * removing unused vars * adding tab-content span and 2px margin for tab-content span * updating color foreground for unselected and selected tabs * removing unused var * removing host-context * removing tab content part * putting back tab content part * removing unecessary dom element * removing unecessary z index * adding tab-content class. removing tab-content part * adding display helper function to tab-panel * shorthanding tab padding in tab styles * removing duplicate selector * fixing display helper implementation * removing divs in storybook.ts * removing divs from stories.ts * adding second display helper * adding display helper in tab.styles * removing stray div in stories.ts * adding display helper in tabs.styles * removing active indicator css * removing important * removing unused vars * renaming getSelectedTab to getTab, since tab is passed into method * updating TabData * updating check for previous tab for first render * replacing document add style with fast controller add style * grabbing scale and offset token names from const * updating stories, removing redundant code and renaming tabids * using const objects to provide default values * Removing animation clear method. apparently not needed * updating comments * removing duplicate display * setting display to inline-flex * removing unnecessary disabled font-weight in tab * removing unnecessary outline * replacing margin-right with margin-inline-end * Reducing number of duplicarte border radius Removing horizontal selector in css since it's default Removing the TabTokenNames and hard coding tokens into css Combining selectors in css and refactoring css overall Setting fill for subtle appearance selectors * adding margin-inline-end * Adding max width on tab content * Revert "Adding max width on tab content" This reverts commit b8dffde. * fixing focus visible border * combining padding * Removing margin auto on right margin --------- Co-authored-by: Chris Holt <chhol@microsoft.com>
radium-v
pushed a commit
that referenced
this pull request
May 8, 2024
* adding tab list spec * adding files for tab list, tab, and tab-panel * adding files for tab list, tab, and tab-panel * adding tab * working tab list web components. no styling. no re-referencing of attributes * adding styling for tabList * commenting out unused styling * adding tab-list styles * basic api working. styling not correct in all cases. * Adding svgs. they are not rendering for some reason * svgs working * updating styling * removing fill on svg * adding logic to track tab selection and css variables. broken * commit before refactor * addint html data attr * updating how tab data is handled * Animations not working * animations not working * broken animation * location of tab is not correct * refactoring dataActiveTabChanged * removing class field for current active tab * adding method to add and remove classes * tab animates to offset location * animating almost correctly * horizontal animations working * adding vertical positioning logic * tabs animations working vertical and horizontal * Adding tab-list options. adding comments * adjusting styling * removing unused vars * removing comments * Adding change file * updating readme. fixing naming conflict in exports of tab-panel index * fixing default value for tablist size * removing check for activeid in setTabData * removing patch for removing activeIndicator * moving pointer events none to disabled fluent tab * removing boolean converters, adding type consts, renaming TabList to Tabs. * documenting difference between tabs and tab list * updating tabs index.js * fixing circular dependency import * removing references to TabList, renaming to Tabs. Removing Tabs orientation type const and importing it from FAST * Refactoring tab into tabs * updating token names object * updating css for tab token names * updating tab token names in tabs.ts * removing unused vars * adding pseudo element to account for spacing difference of bold and unbolded text on active states * adding placeholder element to render active indicator * updating :focus-visible style * removing unused vars * adding tab-content span and 2px margin for tab-content span * updating color foreground for unselected and selected tabs * removing unused var * removing host-context * removing tab content part * putting back tab content part * removing unecessary dom element * removing unecessary z index * adding tab-content class. removing tab-content part * adding display helper function to tab-panel * shorthanding tab padding in tab styles * removing duplicate selector * fixing display helper implementation * removing divs in storybook.ts * removing divs from stories.ts * adding second display helper * adding display helper in tab.styles * removing stray div in stories.ts * adding display helper in tabs.styles * removing active indicator css * removing important * removing unused vars * renaming getSelectedTab to getTab, since tab is passed into method * updating TabData * updating check for previous tab for first render * replacing document add style with fast controller add style * grabbing scale and offset token names from const * updating stories, removing redundant code and renaming tabids * using const objects to provide default values * Removing animation clear method. apparently not needed * updating comments * removing duplicate display * setting display to inline-flex * removing unnecessary disabled font-weight in tab * removing unnecessary outline * replacing margin-right with margin-inline-end * Reducing number of duplicarte border radius Removing horizontal selector in css since it's default Removing the TabTokenNames and hard coding tokens into css Combining selectors in css and refactoring css overall Setting fill for subtle appearance selectors * adding margin-inline-end * Adding max width on tab content * Revert "Adding max width on tab content" This reverts commit b8dffde. * fixing focus visible border * combining padding * Removing margin auto on right margin --------- Co-authored-by: Chris Holt <chhol@microsoft.com>
radium-v
pushed a commit
that referenced
this pull request
May 10, 2024
* adding tab list spec * adding files for tab list, tab, and tab-panel * adding files for tab list, tab, and tab-panel * adding tab * working tab list web components. no styling. no re-referencing of attributes * adding styling for tabList * commenting out unused styling * adding tab-list styles * basic api working. styling not correct in all cases. * Adding svgs. they are not rendering for some reason * svgs working * updating styling * removing fill on svg * adding logic to track tab selection and css variables. broken * commit before refactor * addint html data attr * updating how tab data is handled * Animations not working * animations not working * broken animation * location of tab is not correct * refactoring dataActiveTabChanged * removing class field for current active tab * adding method to add and remove classes * tab animates to offset location * animating almost correctly * horizontal animations working * adding vertical positioning logic * tabs animations working vertical and horizontal * Adding tab-list options. adding comments * adjusting styling * removing unused vars * removing comments * Adding change file * updating readme. fixing naming conflict in exports of tab-panel index * fixing default value for tablist size * removing check for activeid in setTabData * removing patch for removing activeIndicator * moving pointer events none to disabled fluent tab * removing boolean converters, adding type consts, renaming TabList to Tabs. * documenting difference between tabs and tab list * updating tabs index.js * fixing circular dependency import * removing references to TabList, renaming to Tabs. Removing Tabs orientation type const and importing it from FAST * Refactoring tab into tabs * updating token names object * updating css for tab token names * updating tab token names in tabs.ts * removing unused vars * adding pseudo element to account for spacing difference of bold and unbolded text on active states * adding placeholder element to render active indicator * updating :focus-visible style * removing unused vars * adding tab-content span and 2px margin for tab-content span * updating color foreground for unselected and selected tabs * removing unused var * removing host-context * removing tab content part * putting back tab content part * removing unecessary dom element * removing unecessary z index * adding tab-content class. removing tab-content part * adding display helper function to tab-panel * shorthanding tab padding in tab styles * removing duplicate selector * fixing display helper implementation * removing divs in storybook.ts * removing divs from stories.ts * adding second display helper * adding display helper in tab.styles * removing stray div in stories.ts * adding display helper in tabs.styles * removing active indicator css * removing important * removing unused vars * renaming getSelectedTab to getTab, since tab is passed into method * updating TabData * updating check for previous tab for first render * replacing document add style with fast controller add style * grabbing scale and offset token names from const * updating stories, removing redundant code and renaming tabids * using const objects to provide default values * Removing animation clear method. apparently not needed * updating comments * removing duplicate display * setting display to inline-flex * removing unnecessary disabled font-weight in tab * removing unnecessary outline * replacing margin-right with margin-inline-end * Reducing number of duplicarte border radius Removing horizontal selector in css since it's default Removing the TabTokenNames and hard coding tokens into css Combining selectors in css and refactoring css overall Setting fill for subtle appearance selectors * adding margin-inline-end * Adding max width on tab content * Revert "Adding max width on tab content" This reverts commit b8dffde. * fixing focus visible border * combining padding * Removing margin auto on right margin --------- Co-authored-by: Chris Holt <chhol@microsoft.com>
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.
Previous Behavior
FASTTabs and FASTTab render the activeIndicator as siblings to the tabs. The tab indicator rendering, dom structure, and animations do not match the behavior of the Fluent React Tabs.
New Behavior
Extends FASTTab and FASTTabs. Adds new behavior for active indicator. Active indicator animations, DOM rendering, and logic follows the patterns set in the Fluent React TabList control.
Notes about tab template and tab resize on hover and bold text
One problem encountered during the development of this PR was the rendering of tab content bold text on selection. When rendering a list of variable sized horizontal elements any size change of the text content will cause the list of elements to move slightly. Css properties like flex box, fit-content, or css grid will try to recalculate the element width when the inner content size changes (unless fixed element size is specified). The only way around this is to somehow set the width of the content container to a fixed size. Here are a few discoveries about rendering lists of horizontal elements:
here is a breakdown of different methods for breaking horizontal layouts that I tried - https://stackblitz.com/edit/js-qxteyt?file=index.js,index.html,style.css&file=index.html,index.js
The fluent guidelines for the TabList allow for both variable sized tabs and bold text (ie size change) on hover. This PR adds a hidden pseudo element that renders invisible bold text. This element is always present in the UI, so when the user hovers the bold text that is applied does not add extra space and does not cause a layout shift.