Height correction - absolutely false. Typography defines spaces above and below letters in a very specific way, this is for accents. If you define it in that way, it makes it unusable for most languages (European, Asian...)
Interesting talk and nice solution using the transform and margin. Does that cause creation of extra composite layers during render , and have you noticed any adverse performance affects from it. E.g more pressure on the GPU?
The components: github.com/seek-oss/braid-design-system This sandbox tool: github.com/seek-oss/playroom The speaker announcing the sandbox tool on Twitter: twitter.com/markdalgleish/status/1056846837397839877
This was bugging me enough to *actually leave a comment*. There's a much better way to address these white space rules. MATCH THE LINE HEIGHT AND MARGIN from whatever the designer hands off. That's actually the correct way to work like a designer.
@@markjohndalgleish There is no problem to be fixed. The space above and under capital letters serve a purpose, there are here for diacritical marks (accents, cedillas, dieresis, tilde,...) in capital letters. This design system does not show correctly the word café in upper case (CAFÉ) for example. It is unusable for other languages than english.
@@amaroukaci2991 but this solution doesn't clip diacritics out - all it's doing is changing the space the browser allocates for the line of text. Thanks to `overflow: visible` diacritics will still be visible even though they lie outside the view bounds. The underlying expectation is that the component rendering `Text` will give it some padding through (eg) a `Stack` . Example: seek-oss.github.io/braid-design-system/playroom/#?code=N4Igxg9gJgpiBcIA8BhAhgJygPgDoDsACQpAZQBc0wBrQgZwAcqYBeXEOgWzQBsf28RYiQAqMAB7lsKAIIAxAJNIA9GMmDhoiVNmKVaqQWIqKVaoJXosgkAF8gA
Amazing talk half way through here 12:12 seen this from pinned tweet on Twitter 👏☺️
I dig those layout components
Height correction - absolutely false. Typography defines spaces above and below letters in a very specific way, this is for accents. If you define it in that way, it makes it unusable for most languages (European, Asian...)
Interesting talk and nice solution using the transform and margin.
Does that cause creation of extra composite layers during render , and have you noticed any adverse performance affects from it. E.g more pressure on the GPU?
Yeah, I would be afraid of this as well :(
Would appreciate the link to the repo.
The components: github.com/seek-oss/braid-design-system
This sandbox tool: github.com/seek-oss/playroom
The speaker announcing the sandbox tool on Twitter: twitter.com/markdalgleish/status/1056846837397839877
This was bugging me enough to *actually leave a comment*. There's a much better way to address these white space rules. MATCH THE LINE HEIGHT AND MARGIN from whatever the designer hands off. That's actually the correct way to work like a designer.
No, that doesn't fix the problem.
@@markjohndalgleish There is no problem to be fixed. The space above and under capital letters serve a purpose, there are here for diacritical marks (accents, cedillas, dieresis, tilde,...) in capital letters. This design system does not show correctly the word café in upper case (CAFÉ) for example. It is unusable for other languages than english.
@@amaroukaci2991 but this solution doesn't clip diacritics out - all it's doing is changing the space the browser allocates for the line of text. Thanks to `overflow: visible` diacritics will still be visible even though they lie outside the view bounds.
The underlying expectation is that the component rendering `Text` will give it some padding through (eg) a `Stack` . Example: seek-oss.github.io/braid-design-system/playroom/#?code=N4Igxg9gJgpiBcIA8BhAhgJygPgDoDsACQpAZQBc0wBrQgZwAcqYBeXEOgWzQBsf28RYiQAqMAB7lsKAIIAxAJNIA9GMmDhoiVNmKVaqQWIqKVaoJXosgkAF8gA
This will not fix the issue. If you have a component with an H1, blockquote, and paragraph, they may all have a different line height.
React developers are the cancer in the JS ecosystem. Period.
Why do you think that, related to this video?
@@robertsacamano Why not? :D