Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/bl UI 3279 mobile view tabs #805

Closed
wants to merge 14 commits into from
Closed

Feature/bl UI 3279 mobile view tabs #805

wants to merge 14 commits into from

Conversation

andrupu
Copy link
Contributor

@andrupu andrupu commented Sep 21, 2023 •
edited
Loading

Fixes # BLUI-3279

Changes proposed in this Pull Request:

-Update dev docs styling to match the designs for mobile view on smaller screens.

-Main point of address will be updates to the Playground screen on AppBar Example.

-This will NOT include multilayer drawer updates.

To Test:

  • yarn start:reactdev

andrupu and others added 11 commits August 31, 2023 16:21
@andrupu @joebochill @daileytj
Add MUI Tabs
90f2eb7 
Co-Authored-By: Joseph Boyle <boyle.p.joseph@gmail.com>
Co-Authored-By: Thomas Dailey <daileytj89@gmail.com>
@andrupu @daileytj
Conditionally render PlaygroundPanelTabs and CodeBlock
1098347 
Co-Authored-By: Thomas Dailey <daileytj89@gmail.com>
@andrupu
Sync media queries
ad4a509
@andrupu @daileytj @joebochill
populate code snippet
eaee885 
Co-Authored-By: Thomas Dailey <daileytj89@gmail.com>
Co-Authored-By: Joseph Boyle <boyle.p.joseph@gmail.com>
@andrupu @joebochill
refactor state to drawerOpen
22c14da 
Co-Authored-By: Joseph Boyle <boyle.p.joseph@gmail.com>
@andrupu
set ternary operator isMobile on anchor
6dd22da
@andrupu @daileytj
add InfoListItem to Drawer
7e71061 
Co-Authored-By: Thomas Dailey <daileytj89@gmail.com>
@andrupu @daileytj
Get collapsed isMobile BottomDrawer to remain visible
bdf752d 
Co-Authored-By: Thomas Dailey <daileytj89@gmail.com>
@andrupu @daileytj
Set TabsPanel height for both Playground tabs tabs
980f29a 
Co-Authored-By: Thomas Dailey <daileytj89@gmail.com>
@andrupu @daileytj
add mobilePlaygroundContentStyles
85f0e59 
Co-Authored-By: Thomas Dailey <daileytj89@gmail.com>
@andrupu
run prettier and comment MUI styles
0b56d09
@github-actions github-actions bot added the brightlayer-ui Used to identify Brightlayer UI platform issues for easy filtering label Sep 21, 2023
andrupu and others added 2 commits September 21, 2023 14:10
@andrupu @daileytj @huayunh
Expand CodeBlock height and Toggle KeyboardArrow
e8ff31f 
Co-Authored-By: Thomas Dailey <daileytj89@gmail.com>
Co-Authored-By: huayunh <8997218+huayunh@users.noreply.github.com>
@andrupu
Set Drawer to be closed by default
fdcf77f
surajeaton
surajeaton reviewed Sep 22, 2023
View reviewed changes
Copy link
Contributor

@surajeaton surajeaton left a comment

Choose a reason for hiding this comment

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

@andrupu Prettier and lint are failing.
Please run yarn precommit.

@ektaghag-eaton
Copy link
Contributor

@andrupu , can you add figma link ?

@daileytj
Copy link
Contributor

daileytj commented Sep 22, 2023 •
edited
Loading

@andrupu , can you add figma link ?

@ektaghag-eaton

https://www.figma.com/file/kiuLsThIDMqGLXMaL9cv33/Doc-It-Redesign?type=design&node-id=502%3A87569&mode=design&t=OoIRKGOWmm2MjSn0-1

huayunh
huayunh requested changes Sep 27, 2023
View reviewed changes
Copy link
Contributor

@huayunh huayunh left a comment

Choose a reason for hiding this comment

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

  • Please resolve your lint error about "Missing return type on function"
  • Please run prettier
  • Please add the black overlay thing (scrim) we mentioned. Ideally, onclick the black overlay should dismay the expanded bottom sheet
  • Please add the animation to expand / collapse the drawer
  • Please remove all the unused code that you commented out
  • Something is causing an undesired overflow. For example, this should not be scrolling up and down like this:
    https://github.com/etn-ccis/blui-react-component-library/assets/8997218/acf7693e-61b9-443e-a0e1-0610b37a4dae

docs/src/shared/PreviewComponentWithCode.tsx
@@ -21,7 +26,7 @@ const PreviewComponentWithCode: React.FC<PreviewComponentProps> = (props): JSX.E
* We take the height of the appbar/tabs out of the 70vh portion
Copy link
Contributor

Choose a reason for hiding this comment

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

Remember to update the inline comment

docs/src/shared/PlaygroundDrawer.tsx
@@ -253,30 +274,135 @@ const PlaygroundDrawer = (props: DrawerProps): JSX.Element => {
);
};

type PlaygroundTabPanelProps = {
Copy link
Contributor

Choose a reason for hiding this comment

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

we usually take the type declaration out of the component scope.

Copy link
Contributor

Choose a reason for hiding this comment

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

In fact, both PlaygroundTabPanelProps and PlaygroundTabPanel can probably be taken out of PlaygroundDrawer to make PlaygroundDrawer code shorter and easier to read

docs/src/shared/PlaygroundDrawer.tsx
Comment on lines +308 to +309
transform: 'none !important',
visibility: 'visible !important',
Copy link
Contributor

Choose a reason for hiding this comment

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

You should not be turning the drawer on/off via these CSS attributes

@github-actions
Copy link

Visit the preview URL for this PR (updated for commit 8035fa9):

https://blui-react-docs--pr805-feature-blui-3279-mo-poewji02.web.app

(expires Sun, 01 Oct 2023 19:38:43 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: 34d39fa5aab0ea0cf95074e8e76f68829e7a8c65

@joebochill
Copy link
Collaborator

Closing due to inactivity. It's going to be a while before this refactoring work is ready to go into dev...I would suggest setting up a new feature branch to use as the target for the incremental work until it is ready to be merged into dev.

@joebochill joebochill closed this Oct 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@surajeaton surajeaton surajeaton left review comments

@huayunh huayunh huayunh requested changes

@JeffGreiner-eaton JeffGreiner-eaton Awaiting requested review from JeffGreiner-eaton JeffGreiner-eaton is a code owner

@daileytj daileytj Awaiting requested review from daileytj

@joebochill joebochill Awaiting requested review from joebochill

@manojleaton manojleaton Awaiting requested review from manojleaton

@ektaghag-eaton ektaghag-eaton Awaiting requested review from ektaghag-eaton ektaghag-eaton is a code owner

@ArshdeepSingh3-eaton ArshdeepSingh3-eaton Awaiting requested review from ArshdeepSingh3-eaton

Assignees
No one assigned
Labels
brightlayer-ui Used to identify Brightlayer UI platform issues for easy filtering
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@andrupu @ektaghag-eaton @daileytj @joebochill @huayunh @surajeaton