palantir / blueprint

A React-based UI toolkit for the web
https://blueprintjs.com/
Apache License 2.0
20.64k stars 2.17k forks source link

[Sketch] provide Symbols for components #2817

Closed romanr closed 4 years ago

romanr commented 6 years ago

Continuing from #2668.
Sketch file does not represent UI as symbols. Symbols in Sketch are like components in React.

Imagine if controls in Blueprint were developed as functions in one monolithic javascript file. Then in order to use a component the developer had to open a large javascript file, copy relevant code and paste into their application.

kudigaracoder commented 4 years ago

I've been testing the file on the latest Sketch beta. It looks like the inner shadow that was getting bent has been fixed and the overall responsiveness has also improved ..a lot! Screen Shot 2020-03-09 at 10 00 56

terpimost commented 4 years ago

@kudigaracoder sorry to disappoint you but the issue was on the outer shadow in the dark theme and it is not fixed by the Sketch team yet image

estevesd commented 4 years ago

I added new icons (diagnosis and lab-test) to @terpimost kit. https://github.com/estevesd/blueprint/blob/develop/resources/sketch/blueprint-core-kit.sketch

romanr commented 4 years ago

(OP here) This is an amazing work @terpimost ! 1.5 years later it was worth it! I think it's ready for release or be published on Blueprintjs site. Of course you can improve it endlessly but it's very much usable as it is just fine.

With one issue I must add: Sketch file uses SF family of fonts. This is not right:

terpimost commented 4 years ago

@romanr hey, it was closer to 1 year. I said I could finish in March and I did 😂 About the font problem. I've never changed anything in the original file unless it was utility. Keep in mind that my project was to symbolize everything to improve design productivity. SF font was part of the Sketch file before I started, so I didn't dare to change it in any way.

On the official page Blueprint suggests using SF font: image So I don't think it is up to me to make that change. I guess somebody from Palantir is supposed to make that note there. SF font is not only or iOS but for Mac OS too. I think it is logical that Sketch (Mac app) would use SF font. Blueprintjs site itself uses this css line: Font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif; -apple-system is SF font

@romanr @aycai @pkwi please let me know if I should change anything before you can accept the pull request https://github.com/palantir/blueprint/pull/4007

romanr commented 4 years ago

On the official page Blueprint suggests using SF font:

And why is that recommendation there? Because too many people don't have it due to apple-specific nature of SF font. They open the Sketch file and have font warnings.
That's exactly my point. Use normal public fonts like Roboto in Sketch file so you don't have direct all users to download the font from Apple's walled garden.
I think SF font there looks more like a bug rather than a feature.

terpimost commented 4 years ago

@romanr I agree that there should be a single most common font, but if Blueprint is relying on a system font, I don't see what choice do we have except list all system fonts for all OS versions on the official page. I think OSX has SF as a system font longer than Sketch has flexible layout feature (a major feature in my PR).

I guess the majority of users already have SF font which comes with El Capitan version of OSX. image According to https://gs.statcounter.com/macos-version-market-share/desktop/worldwide OSX versions without SF font (OSX 10.10 and others) have less than 7% marketshare.

Downloading and Installing SF font from Apple's website it is easier than downloading and installing Roboto Font from Google Fonts now. Here https://developer.apple.com/fonts/ we have a direct link to .dmg installation: https://developer.apple.com/design/downloads/SF-Font-Pro.dmg (no registration is required): image

@romanr unless we have ability to define fonts like in CSS for Sketch I believe its expectable to use SF "". If we have Blueprint for Figma I believe we should go with Roboto (Figma uses this as default on Mac).

As a designer I would prefer to use SF font on Mac. Unless you at Blueprint team decide to use Roboto as a default cross platform choice for designers.

adidahiya commented 4 years ago

I agree with @terpimost here, since Sketch is a Mac app and SF font is the platform default there, we are going to stick with that for the Sketch kit. It's pretty easy to install from the link in the documentation.

That doesn't mean that we endorse the SF font for Blueprint as a web toolkit... and the CSS is proof of that (it supports multiple platforms' default fonts). But if you are on a Mac, you will see the SF font used in Blueprint components by default, so the Sketch kit should reflect that.

terpimost commented 4 years ago

Quick update from Sketch. I remind you that the bug with weirdly rounded corner happens because of Sketch. In the old blueprint sketch file and in new https://github.com/palantir/blueprint/pull/4007 Rectangles are the same but new version of Sketch thinks that they are paths. It is not fixed in Sketch v64 but Sketch devs knows about the issue and we might get the fix in the next Sketch version.

The solution for now is to redraw every Rectangle where we see the issue. But there are 2000 of these in all symbols I've made. If we have to do this I should create a Sketch plugin for that.

terpimost commented 4 years ago

Hey guys (@adidahiya @romanr @aycai @pkwi), Is there anything I should do to make the pull request be review and accepted? image

aycai commented 4 years ago

@terpimost I'm looking through the sketch kit now, I'm happy to approve these updates to unblock usage while keeping tabs on small tweaks in the symbols:

These are what I've found from my first skim. Otherwise thank you for creating such a massive update to the kit!

romanr commented 4 years ago

I vote to release it. This is a great work and long overdue to release.
There will always be resizing inconsistencies, and can be fixed in updates.

aycai commented 4 years ago

@romanr already approved #4007 :)

adidahiya commented 4 years ago

Closing this as fixed by #4007, thanks for all the input. Feel free to open new issues for iterative improvements.

romanr commented 4 years ago

Website links to the 2018 version of Sketch files. When is it going on website?

terpimost commented 4 years ago

@adidahiya @aycai thank you for approving the PR. I will create another issue for future updates (bugs that you've found) and post my thoughts about what could be improved. I hope soon to use Blueprint js components and be deeper in my understanding of a library.

@estevesd thank you so much for the icon work. I wonder how did you make it? Please email me terpimost@gmail.com

@romanr my understanding is that PR is merged into develop branch before releasing to the website I suggest checking with people you know that they can open Sketch file and its fine to work with.

The biggest annoying thing now is a bug in Sketch which treats current rectangles in Blueprint (everywhere in symbols) as paths. So every shadow is rendered with a weird top right corner. I'm thinking about creating a Sketch plugin to help with that issue because manually replacing current rectangles which are paths with true rectangles is a bit scary.

adidahiya commented 4 years ago

@romanr the website gets updated manually with each release of @blueprintjs/docs-app... until then, please use the link to the file in the Github UI