Re: [PR] feat(sqllab): primary/secondary action extensions [superset]

Thu, 08 Jan 2026 07:49:46 -0800 


kasiazjc commented on PR #36644:
URL: https://github.com/apache/superset/pull/36644#issuecomment-3724486263

   > Thank you for the latest changes @justinpark. I have some design 
suggestions that could be addressed in follow-up PRs but I think it would be 
easier to do them in this PR so that @kasiazjc can review the final form of the 
screen.
   > 
   > <img alt="Screenshot 2026-01-05 at 11 10 42" width="1908" height="860" 
src="https://private-user-images.githubusercontent.com/70410625/531978592-64143794-4ca3-4e25-a56c-3cf83cf315fa.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Njc4ODU2MDMsIm5iZiI6MTc2Nzg4NTMwMywicGF0aCI6Ii83MDQxMDYyNS81MzE5Nzg1OTItNjQxNDM3OTQtNGNhMy00ZTI1LWE1NmMtM2NmODNjZjMxNWZhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjAxMDglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwMTA4VDE1MTUwM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTEzZDEzNDFiYjM1N2Y2N2ZmNTAwOWI0OTgyZmEwNGYwOGMxOTZlYTgwZmZjYjI5MDMxZTRiZGVkYTZlNTE3ZWQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.qAq-h7KTq4osQsUeZExrODtfwkvf0jFDLr7V8bhPAbc";>
   > 1. I think the tabs and buttons are a little too big and taking more 
vertical space than needed. My suggestion would be to use a smaller size to all.
   > 2. The vertical blank space in the editor, reserved for the line numbers, 
is a little confusing given that we're using the white/grey contrast to 
separate part of the screen. My suggestion would use the same background as the 
rest of the editor and add a separator.
   > 3. The editor's handle to drag has a darker background when comparing with 
the editor's background, creating the illusion of a border. I would use the 
same background color.
   > 4. Given that the editor is grey, I would use a white background for the 
panels to give more contrast.
   > 
   > Something like this:
   > 
   > <img alt="Screenshot 2026-01-05 at 11 51 10" width="1908" height="863" 
src="https://private-user-images.githubusercontent.com/70410625/531990154-2f61c909-1a93-4caf-8b57-ef735e85068f.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Njc4ODU2MDMsIm5iZiI6MTc2Nzg4NTMwMywicGF0aCI6Ii83MDQxMDYyNS81MzE5OTAxNTQtMmY2MWM5MDktMWE5My00Y2FmLThiNTctZWY3MzVlODUwNjhmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjAxMDglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwMTA4VDE1MTUwM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk5NmYzZDVhNzlmYTJhNGEyYzgwZDk0ODgzMjExYzZmMTNhOGYxOTNjZmUzZGI2OGJiNTMxN2I0YTNmZTYwNjgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.CTKxYCHtbNgrEKKdLAs5Vw78VcE-h_TAc0l3xQPZu8E";>
   > @kasiazjc These are just suggestions and I bet you can get to something 
even better.
   
   @justinpark @michael-s-molina thank you for all the work and changes you 
did! 
   
   I think moving the buttons to the left (and adding the text to the primary) 
make sense. Had to do a little bit of digging to confirm that this is also a 
pattern that is used, so if that's the case - I am on board :) 
   
   Some quicks notes on the things I noticed in the screenshots below! 
   
   ### Buttons for secondary actions 
   
   I think looking at it now, the number of different highlighted 
buttons/components seem a bit overwhelming - especially the number of secondary 
actions. Icons also have different colors, which adds to the inconsistency. 
   
   <img width="401" height="62" alt="image" 
src="https://github.com/user-attachments/assets/d41e7628-4735-4c30-8483-5d2be1285803";
 />
   
   What do you think about changing the secondary action buttons to just 
icons/dropdown triggers (possibly with dividers)? I think in ant design they 
are called ghost buttons. Found this example in JetBrains and I really like the 
clean look. I would still keep run as primary action though. 
   
   <img width="879" height="203" alt="image" 
src="https://github.com/user-attachments/assets/ad420c09-4142-45f8-91ce-8f42be9ffb62";
 />
   
   ### SQL Area 
   
   So in here I will be honest - I am not a fan of the gray background for the 
main/central areas, as not only it can cause accessibility problems, but also 
it seems outdated.  I know I myself put it in here myself, but in the 
screenshots it seems darker than designs which I think is a problem - so 
updated proposal below. I would suggest going with a clean, minimalist look, 
which would be a white background. Was trying to see what some other tools are 
doing and it's like half and half (white or gray). 
   
   So basically:
   
   - white background 
   - separator at the top and a little bit more breathing space between buttons 
and sql area (seems squished right now) 
   - separator at the bottom
   
   This would also help with seeing which row is actually being highlighted as 
currently it blends with the gray background.
   
   <img width="766" height="462" alt="image" 
src="https://github.com/user-attachments/assets/b5562fbd-42f8-4ba6-9ac5-7e8d1e90488c";
 />
   
   
   ### Top tabs 
   
   Making them smaller - makes sense to me 
   
   ### Tabs for results etc 
   With the gray that is being used for the background (which I didn't consider 
before, sorry about that) it seems like the tabs are "under" the content, or 
indented in a way. I would again do white background and a little bit more 
padding at the top. I know that in general we want to have as much items etc as 
possible, but with this number of actions it starts to get crowded. 
   
   <img width="766" height="462" alt="image" 
src="https://github.com/user-attachments/assets/27450620-9184-463d-b1f9-333d5abc05e9";
 />
   
   
   I think that is all for now, let me know what you think! I am open for 
discussion 😌 


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to