[Tabs] M3-4119: Refactor Tabs - Lish #6467
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
Jskobos
reviewed
May 26, 2020
There was a problem hiding this comment.
I agree Lish is a special case. One idea would be to add event listeners for cmd+alt+[], so switching from Lish to Glish is like switching browser tabs (which you can't do in the Lish window). Or maybe find a way to have Tab be the way to switch tabs in this one case.
WilkinsKa1
suggested changes
May 26, 2020
| ))} | ||
| <TabLinkList lish tabs={this.tabs} /> | ||
| <TabPanels> | ||
| <TabPanel data-qa-tab="Weblish" {...tabA11yProps('Weblish')}> |
There was a problem hiding this comment.
We can remove the tabA11yProps here and on line 216- these are now being applied automatically by Reach instead!
| indicatorColor="primary" | ||
| textColor="primary" | ||
| scrollButtons="off" | ||
| defaultIndex={this.tabs.findIndex(tab => this.matches(tab.routeName))} |
There was a problem hiding this comment.
In re to the issue of keypresses being read by Glish when navigating between the consoles, Reach actually has this prop https://reacttraining.com/reach-ui/tabs/#tabs-keyboardactivation where you can control the way the tabPanel is activated. I think this could potentially prevent the inputted text from entering the Glish console during navigation as the panel won't ever be activated unless the user presses enter/space.
There was a problem hiding this comment.
I added the prop but it doesn't seem to do anything 🤔
WilkinsKa1
approved these changes
Jun 3, 2020
johnwcallahan
suggested changes
Jun 3, 2020
| @@ -60,6 +85,7 @@ export interface Tab { | |||
| interface Props { | |||
| tabs: Tab[]; | |||
| [index: string]: any; | |||
| lish?: boolean; | |||
There was a problem hiding this comment.
Instead of having TabLinkList handle the CSS for Lish, it'd be more scalable if it could accept a CSS classname so it's controllable by the parent. An example can be found here: https://github.com/linode/manager/blob/develop/packages/manager/src/components/PromotionalOfferCard/PromotionalOfferCard.tsx#L91
| // TODO: Change type 'any' to a more appropriate type | ||
| const ref = React.useRef<any>(null); | ||
|
|
||
| React.useEffect(() => { |
There was a problem hiding this comment.
Similarly, if this Ref is only here for Lish (for now), it should be controlled by the parent and passed down as a prop.
acourdavault
added
the
Accessibility
johnwcallahan
approved these changes
Jun 17, 2020
WilkinsKa1
approved these changes
Jun 22, 2020
WilkinsKa1
pushed a commit
that referenced
this pull request
Aug 5, 2020
* Refactor to Reach UI * Add keyboardActivation prop * Working on focusing on tabs * Add ref to tabs * removing redundant a11y attributes * Switch to SafeTabPanel * Move styles to Lish and get rid of ref * Remove TabPanel import Co-authored-by: Kayla Wilkins <kwilkins@linode.com>
WilkinsKa1
pushed a commit
that referenced
this pull request
Aug 7, 2020
* Refactor Tabbed Panel Component & Linode Details Navigation (#6331) * adding in arrows + functionality, beginnings of how to dynamically hide them * converting to a FC, adding in some state mgt for mobile buttons * remove mui mobile buttons * beginning to convert a tab nav with bare bones reach * using as for tabpanels so path routing works * using as for tabpanel prop and applying path * adding defaultIndex, removing old aria cruff from settings * fixing settings issue * fixing linting issues * loading css in app instead of each individual reach component * adding documentation for these tab patterns, referencing in contributing doc * Convert test to RTL and resolve key warnings * Tweak tab keys * Addressing PR feedback part 1 * fixing focus outline cutoff issue Co-authored-by: Jared Kobos <jaredkobos@gmail.com> * Tab Refactor: Account Landing, OBJ Landing, FW Details (#6375) * updating account landing, FW detail and OBJ landing to new linked tab pattern * fixing index for key issue * Tab Refactor: LKE Details, Support Tickets Landing, Linode Clone Landing (#6378) * updating to use reach tab pattern for LKE detail, tickets landing, and clone landing * remove handleTabChange * Refactor Tabbed Panel Component & Linode Details Navigation (#6331) * adding in arrows + functionality, beginnings of how to dynamically hide them * converting to a FC, adding in some state mgt for mobile buttons * remove mui mobile buttons * beginning to convert a tab nav with bare bones reach * using as for tabpanels so path routing works * using as for tabpanel prop and applying path * adding defaultIndex, removing old aria cruff from settings * fixing settings issue * fixing linting issues * loading css in app instead of each individual reach component * adding documentation for these tab patterns, referencing in contributing doc * Convert test to RTL and resolve key warnings * Tweak tab keys * Addressing PR feedback part 1 * fixing focus outline cutoff issue Co-authored-by: Jared Kobos <jaredkobos@gmail.com> * M3-4128 Refactor User details, NodeBalancer details, Profile, Longview landing and details (#6423) * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing dupe props issue * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing stray again after branch cleanup debacle * adding new SafeTabPanel abstraction to load content only on active tab selection instead of all * longview POC with safe tab panel * adding longview tabs with SafeTabPanel to fix graphs loading issue * checking for possible indexes based on existence of apps for a LV client * Add comment to SafeTabPanel Co-authored-by: John Callahan <johnwcallahan@gmail.com> * Managed Tabs Refactor (#6462) * refactoring managed tabs to use reach * fixing alignment of managed tabs * update to using SafeTabPanel * Tab Panel Refinements (#6477) * removing old a11y attributes from tabPanels that have been refactored so far, fixing alignment on misaligned panels * removing focus if header is rendered as an h2 * Refactor Tabbed Panel Component & Linode Details Navigation (#6331) * adding in arrows + functionality, beginnings of how to dynamically hide them * converting to a FC, adding in some state mgt for mobile buttons * remove mui mobile buttons * beginning to convert a tab nav with bare bones reach * using as for tabpanels so path routing works * using as for tabpanel prop and applying path * adding defaultIndex, removing old aria cruff from settings * fixing settings issue * fixing linting issues * loading css in app instead of each individual reach component * adding documentation for these tab patterns, referencing in contributing doc * Convert test to RTL and resolve key warnings * Tweak tab keys * Addressing PR feedback part 1 * fixing focus outline cutoff issue Co-authored-by: Jared Kobos <jaredkobos@gmail.com> * Tab Refactor: Account Landing, OBJ Landing, FW Details (#6375) * updating account landing, FW detail and OBJ landing to new linked tab pattern * fixing index for key issue * Tab Refactor: LKE Details, Support Tickets Landing, Linode Clone Landing (#6378) * updating to use reach tab pattern for LKE detail, tickets landing, and clone landing * remove handleTabChange * M3-4128 Refactor User details, NodeBalancer details, Profile, Longview landing and details (#6423) * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing dupe props issue * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing stray again after branch cleanup debacle * adding new SafeTabPanel abstraction to load content only on active tab selection instead of all * longview POC with safe tab panel * adding longview tabs with SafeTabPanel to fix graphs loading issue * checking for possible indexes based on existence of apps for a LV client * Add comment to SafeTabPanel Co-authored-by: John Callahan <johnwcallahan@gmail.com> * [Tabs] M3-4119: Refactor Tabs - Lish (#6467) * Refactor to Reach UI * Add keyboardActivation prop * Working on focusing on tabs * Add ref to tabs * removing redundant a11y attributes * Switch to SafeTabPanel * Move styles to Lish and get rid of ref * Remove TabPanel import Co-authored-by: Kayla Wilkins <kwilkins@linode.com> * Refactor Tabbed Panel Component & Linode Details Navigation (#6331) * adding in arrows + functionality, beginnings of how to dynamically hide them * converting to a FC, adding in some state mgt for mobile buttons * remove mui mobile buttons * beginning to convert a tab nav with bare bones reach * using as for tabpanels so path routing works * using as for tabpanel prop and applying path * adding defaultIndex, removing old aria cruff from settings * fixing settings issue * fixing linting issues * loading css in app instead of each individual reach component * adding documentation for these tab patterns, referencing in contributing doc * Convert test to RTL and resolve key warnings * Tweak tab keys * Addressing PR feedback part 1 * fixing focus outline cutoff issue Co-authored-by: Jared Kobos <jaredkobos@gmail.com> * Tab Refactor: Account Landing, OBJ Landing, FW Details (#6375) * updating account landing, FW detail and OBJ landing to new linked tab pattern * fixing index for key issue * Tab Refactor: LKE Details, Support Tickets Landing, Linode Clone Landing (#6378) * updating to use reach tab pattern for LKE detail, tickets landing, and clone landing * remove handleTabChange * M3-4128 Refactor User details, NodeBalancer details, Profile, Longview landing and details (#6423) * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing dupe props issue * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing stray again after branch cleanup debacle * adding new SafeTabPanel abstraction to load content only on active tab selection instead of all * longview POC with safe tab panel * adding longview tabs with SafeTabPanel to fix graphs loading issue * checking for possible indexes based on existence of apps for a LV client * Add comment to SafeTabPanel Co-authored-by: John Callahan <johnwcallahan@gmail.com> * M3-4128 Refactor User details, NodeBalancer details, Profile, Longview landing and details (#6423) * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing dupe props issue * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing stray again after branch cleanup debacle * adding new SafeTabPanel abstraction to load content only on active tab selection instead of all * longview POC with safe tab panel * adding longview tabs with SafeTabPanel to fix graphs loading issue * checking for possible indexes based on existence of apps for a LV client * Add comment to SafeTabPanel Co-authored-by: John Callahan <johnwcallahan@gmail.com> * Managed Tabs Refactor (#6462) * refactoring managed tabs to use reach * fixing alignment of managed tabs * update to using SafeTabPanel * Tab Panel Refinements (#6477) * removing old a11y attributes from tabPanels that have been refactored so far, fixing alignment on misaligned panels * removing focus if header is rendered as an h2 * fixing tabs * Refactor Tabbed Panel Component & Linode Details Navigation (#6331) * adding in arrows + functionality, beginnings of how to dynamically hide them * converting to a FC, adding in some state mgt for mobile buttons * remove mui mobile buttons * beginning to convert a tab nav with bare bones reach * using as for tabpanels so path routing works * using as for tabpanel prop and applying path * adding defaultIndex, removing old aria cruff from settings * fixing settings issue * fixing linting issues * loading css in app instead of each individual reach component * adding documentation for these tab patterns, referencing in contributing doc * Convert test to RTL and resolve key warnings * Tweak tab keys * Addressing PR feedback part 1 * fixing focus outline cutoff issue Co-authored-by: Jared Kobos <jaredkobos@gmail.com> * Tab Refactor: Account Landing, OBJ Landing, FW Details (#6375) * updating account landing, FW detail and OBJ landing to new linked tab pattern * fixing index for key issue * Tab Refactor: LKE Details, Support Tickets Landing, Linode Clone Landing (#6378) * updating to use reach tab pattern for LKE detail, tickets landing, and clone landing * remove handleTabChange * M3-4128 Refactor User details, NodeBalancer details, Profile, Longview landing and details (#6423) * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing dupe props issue * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing stray again after branch cleanup debacle * adding new SafeTabPanel abstraction to load content only on active tab selection instead of all * longview POC with safe tab panel * adding longview tabs with SafeTabPanel to fix graphs loading issue * checking for possible indexes based on existence of apps for a LV client * Add comment to SafeTabPanel Co-authored-by: John Callahan <johnwcallahan@gmail.com> * M3-4128 Refactor User details, NodeBalancer details, Profile, Longview landing and details (#6423) * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing dupe props issue * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing stray again after branch cleanup debacle * adding new SafeTabPanel abstraction to load content only on active tab selection instead of all * longview POC with safe tab panel * adding longview tabs with SafeTabPanel to fix graphs loading issue * checking for possible indexes based on existence of apps for a LV client * Add comment to SafeTabPanel Co-authored-by: John Callahan <johnwcallahan@gmail.com> * Managed Tabs Refactor (#6462) * refactoring managed tabs to use reach * fixing alignment of managed tabs * update to using SafeTabPanel * Tab Panel Refinements (#6477) * removing old a11y attributes from tabPanels that have been refactored so far, fixing alignment on misaligned panels * removing focus if header is rendered as an h2 * Refactor Tabbed Panel Component & Linode Details Navigation (#6331) * adding in arrows + functionality, beginnings of how to dynamically hide them * converting to a FC, adding in some state mgt for mobile buttons * remove mui mobile buttons * beginning to convert a tab nav with bare bones reach * using as for tabpanels so path routing works * using as for tabpanel prop and applying path * adding defaultIndex, removing old aria cruff from settings * fixing settings issue * fixing linting issues * loading css in app instead of each individual reach component * adding documentation for these tab patterns, referencing in contributing doc * Convert test to RTL and resolve key warnings * Tweak tab keys * Addressing PR feedback part 1 * fixing focus outline cutoff issue Co-authored-by: Jared Kobos <jaredkobos@gmail.com> * Refactor Tabbed Panel Component & Linode Details Navigation (#6331) * adding in arrows + functionality, beginnings of how to dynamically hide them * converting to a FC, adding in some state mgt for mobile buttons * remove mui mobile buttons * beginning to convert a tab nav with bare bones reach * using as for tabpanels so path routing works * using as for tabpanel prop and applying path * adding defaultIndex, removing old aria cruff from settings * fixing settings issue * fixing linting issues * loading css in app instead of each individual reach component * adding documentation for these tab patterns, referencing in contributing doc * Convert test to RTL and resolve key warnings * Tweak tab keys * Addressing PR feedback part 1 * fixing focus outline cutoff issue Co-authored-by: Jared Kobos <jaredkobos@gmail.com> * [Tabs] M3-4119: Refactor Tabs - Lish (#6467) * Refactor to Reach UI * Add keyboardActivation prop * Working on focusing on tabs * Add ref to tabs * removing redundant a11y attributes * Switch to SafeTabPanel * Move styles to Lish and get rid of ref * Remove TabPanel import Co-authored-by: Kayla Wilkins <kwilkins@linode.com> * fixing tabs * Linode Create Tab Refactor (#6661) * In progress * Extract add-on panel * Extract label/tags and password * Clean up code * Moving checkout bar over in-progress * Moving on to Marketplace * temp * temp * commenting out repeating code, putting one checkoout bar + functions in linode create * Stackscripts tab contains account and community * Cleanup * Working on ImageSelect * Fix ImageSelect issue * Remove console * Cleanup * More cleanup * Convert FromAppsContent to FC * Start adding types back * Fix merge conflict * adjustments to type interfaces for create refactor to fix prop errors * fixing tab routing issue and updating marketplace to one click for marketing match * adjustments to linking and conditional wrapping of components for clone and backup * adjustment to be able to create from clone * Clean up fromApps and fromStackscript * Clean up props and in-progress converting classes to FC * Fix routing issue * Minor fixes * adjustemnt to type definiton, props cleanup for LinodeCreate * adding it all back * fixing props issue * Addressing PR feeddback part 1 * adding missing error notice * Adding disabled notice top level in linode create * fixing broken tests, removing obsolete ones * reverting test back to RTL * Adding general error to create, adjusting individual error handling for FromContent Co-authored-by: Tiffany Wong <wong.tyan@gmail.com> * removing obsolete subtabs file * fixing build bc of sentry version * updating CMR tab components Co-authored-by: Jared Kobos <jaredkobos@gmail.com> Co-authored-by: John Callahan <johnwcallahan@gmail.com> Co-authored-by: Tiffany Wong <7692354+tiffwong@users.noreply.github.com> Co-authored-by: Tiffany Wong <wong.tyan@gmail.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.
Description
Refactor Lish tabs to use Reach UI instead.
Type of Change
Note to Reviewers
The tabs can now be navigated with arrow keys but input only shows up in Glish. Tabbing into Weblish and Glish kinda work in terminal so there might be some kind of conflict being the Reach tabs and the usage of a terminal and websocket. I'll open a new ticket for this 💁♀️The tabs and terminals are now keyboard accessible, there is an extra tab required to get into the LISH console so I'll look into that but otherwise it should be good