wework / ray Goto Github PK

128px spacing should be 96px

Request from design

Change light grey #FAFAFA to #F7F7F7

Would be good to add some left padding so the active state blurry outline thing doesn't get cut off:

Before:

After:

I want to be able to do stuff like

@include ray-breakpoint(desktop) {
  ...
}

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)

codepen

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.

The letter g is slightly cutoff on the bottom for Textfield
It is causing visual defect on home page language dropdown.

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

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)

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:

the line-height: 1 attribute has to be removed

These are super useful when creating responsive styles

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?

When you type something in search box on 404 page, the results are visible, but the text is not.

mybrowser.fyi

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

For H4-H6, the margin-bottom should be .5rem (or 8px).

It was previously 1rem (or 16px).

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?