wework / ray Goto Github PK
View Code? Open in Web Editor NEWResources for building interfaces with WeWork's design system
Home Page: https://ray.wework.com
License: Apache License 2.0
Resources for building interfaces with WeWork's design system
Home Page: https://ray.wework.com
License: Apache License 2.0
When a select element has focus, the label moves to the top of the field (like other inputs), however if no selection is made (user clicks outside of the dropdown), the label remains there until focus is lost (blur). Unfortunately, the browser does not trigger blur until another user click (or selection) happens. This can be seen below:
If the placeholder attribute is not specified on the <input/>
than the label immediately is pull to the top left by the :not(:placeholder-shown)
rule
Resulting is a weird gap of space even when the field doesn't have focus (my assumption is that the label will always take up the space when not in focus)
Other teams at WeWork are starting to build out their own React wrappers for Ray. Let's create a centralized wrapper in this repo!
@wework/ray-core-react
128px spacing should be 96px
Request from design
Would be nice to add the Phone and Number Selector inputs that are currently used on wework.com to Ray. I know that the Phone one isn't the best implementation and there is room for improvement, but the lack of any support in Ray right now leaves it up to each team to copy/paste whats there vs consolidating it all in one place (so we can easily replace it later)
These are super useful when creating responsive styles
For H4-H6, the margin-bottom should be .5rem (or 8px).
It was previously 1rem (or 16px).
Change light grey #FAFAFA to #F7F7F7
I want to be able to do stuff like
@include ray-breakpoint(desktop) {
...
}
When you type something in search box on 404 page, the results are visible, but the text is not.
Hi,
My name is Lucas Afranio, and I am the president of a junior company in my college. And I really enjoyed how you documented your style guide and I'd like to use this documentation template. so I would like to know how to upload and modify it, what library did you use?
If this project is meant to follow the BEM class naming style, it doesn't appear to do so it some core places where modifiers are treated as standalone blocks or elements. A couple examples that come to mind are the grid and the text styles.
According to BEM naming guidelines, modifiers like ray-grid__cell--span-4
or ray-text--h4
should not be the only classes on an element. Instead the elements should have the classes ray-grid__cell ray-grid__cell--span-4
and ray-text ray-text--h4
respectively.
If adherence to BEM is not a priority then this issue can just be closed. If it is we should figure out how to update the implementation to reflect that.
Chris Palermino reported this problem for posts migrated from Creator to Ideas.
Here's an example: https://www.wework.com/ideas/how-to-hold-effective-meetings
The text The Surprising Science of Meetings
should be italicized.
Related: #96
Currently, in order to style a button we need the classes ray-button
and one of ray-button--primary
, ray-button--secondary
, etc. However ray-button
by itself doesn't have complete default styling, so the modifiers don't feel exactly like modifiers.
Perhaps we can collapse the ray-button ray-button--primary
styles into just default styles for ray-button
?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.