microsoft / yamui Goto Github PK

Fabric expects us to wrap our app in a component. This component adds font styles for the rest of the app, and will eventually handle language-specific fonts for us. We cannot wrap Yammer.com in a component since most of Yammer is not React.

Fabric engineers recognize this issue and recommend we contribute to office-ui-fabric-react by extracting the component's functionality into a utility module. This utility module would allow us to provide an HTML element and would keep its list of CSS classes (and associated glamor styles) up to date as they change.

This does not block development as our Storybook app will wrap its stories in a component, but this does block us from integrating with YamJS.

I'm attaching a video with the problem using a FakeLink component, I'm not sure if this is also happening on regular links.

Basically, the whenever you hover a link it's switching the cursor between: 'regular - text selector - pointer' generating a visual glitch that doesn't feel right.

That's not how the cursor behaves normally against interactive elements or links.

Ready to go to start implementation.

Make sure to ping me or Manuel to make a review before starting to implement anything so we can tackle issues, questions, and doubts in advance.

zpl.io/anokGGJ

We should include the pressed state for both primary and secondary buttons.

http://zpl.io/aMLv6Y3

BackstopJS uses a version of PhantomJS which doesn't support flexbox and some other CSS3 styles. We should keep an eye on this issue and see if we can remove autoprefixer when it's resolved:
garris/BackstopJS#358

In the meantime we're using the same version and config as our client application

see #113

We need to add "Segoe UI Emoji" to our font-stack, or see if Fabric would want to add it directly

We have cases where Text is nested in Block just for color. If Block has color then these would not be necessary. It would also help people get correct line-heights easier since Block will always have the correct line-height. It will also let us remove some override CSS in MediaObject.

For example, if it's a deleted group, you might see a color flash before it displays the no_photo icon. I only mention this example because it's bright and then dull and so it stands out. Someone might think it's a peek at a deleted group image -- they see content that is quickly replaced

Currently we require a manual build to resolve merge conflicts. Could use husky to achieve this.
https://www.npmjs.com/package/husky

We need to add the elements to a real DOM (not shadowDom), but we can do that with a headless webkit just as Backstop is doing to make screen captures.

https://github.com/dequelabs/axe-core

There's also this Chome plugin. Maybe we can limp by with that.

https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US

Need to add a new directionalHint option to Fabric's Callout. Ideas:

1. Add prop directionalHintFixedAxis = 'horizontal' | 'vertical' to restrict placement to only top/bottom or only left/right
2. Add directionalHintAllowedPlacements = DirectionalHint[] to provide a list of allowed positions the Callout can be aligned to

our application manages a global listener already, so let's simplify the YamUI implementation

labeled as bug since this caused a duplicate window bug in our application

Ready to go to start implementation.

Make sure to ping me or Manuel to make a review before starting to implement anything so we can tackle issues, questions, and doubts in advance.

http://zpl.io/VKEe8d7

https://github.com/garris/BackstopJS#filtering-tests-and-references-by-scenario

FYI: the project cannot be installed or updated locally, only in production mode (--production), which does not depends on yo generator and related package missing from NPM;
floatdrop/pinkie-promise#4
Thx!

npm ERR! 404 Not Found: pinkie@https://registry.npmjs.org/pinkie/-/pinkie-1.0.0.tgz

type PickerItemTemplate = 'text' | 'mediaRound' | 'mediaSoft' | 'mediaSquare';

mediaRound: Existing Avatar implementation
mediaSoft: Add border="soft" to Avatar
mediaSquare: Use Image instead of Avatar
text: Plain text aligned left

Textfields border is red when it's an error state. When the textfield gets the focus we change the border color to blue. For some reason we're not keeping the blue border color when hovering the input on the error state.

Could we fix it, please? @unindented @swese44

From #127:
"As a solution, I was thinking of using the updateExample property, extracting all examples to their own separate files, and compiling them with tsc. That'd also solve the issue you cited of not being able to use your IDE to write examples."

This will use aria-hidden to hide the Text component's content from screenreaders while rendering a ScreenreaderText component with the given string. Note that Text's render() method will need to return 2 elements (one visible, one available for screenreaders), so either needs additional markup to expose the screenreaderText, or wait until clients upgrade to React 16.2 and return a Fragment

Button's aria-labelledby attribute has a number value, should be removed entirely? Maybe aria-disabled isn't necessary if disabled is already present?

Yammer message byline uses <Text maxWidth="100%"> to ellipsis extra text, which uses overflow:hidden. User names and "reply to" text use Tooltips, which will be hidden by the wrapping ellipsis.

Should probably change Tooltip to use the default layer behavior

That way we don't have to manually generate docs on every PR.

Ready to go to start implementation.

Make sure to ping me or Manuel to make a review before starting to implement anything so we can tackle issues, questions, and doubts in advance.

http://zpl.io/Vq1Ne3Z

This will be easy to forget to add to all new files:

/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */

i'd prefer we make these narrower like they were pre-styleguidist, otherwise we can't really use github's slider/onion skin tool to carefully review visual changes. example:
https://github.com/Microsoft/YamUI/pull/87/files

longer-term i'd like to have visual diffs at multiple widths, but we need to speed up the diffs first
@unindented

react-styleguidist or react-docgen-typescript seems to be adding "children" to props if it doesn't exist. Our nestable components show the comments on our children prop, but our leaf node components show an empty description.

Last week I ran the visual snapshot tool on master viay run test:visual and most of the tests failed for font-related reasons. Further investigation with @unindented revealed that the Segoe font was not loading properly.

We should save a copy of the Segoe font in YamUI and reference it locally to prevent network flakiness from failing our test suite.

Hello, team!

Some components are missing the border-radius 1px that we tend to use resulting in hard edges that we want to avoid in the final implementation.

Examples of this are hovercards, suggestions, and pretty much all the components that are floating on top of things with a shadow applied.

@mamuso was mentioning that was related to a bug and the overflow but I'm not completely sure what that means.

Could we fix it at some point?

For things like passing the wrong number of initials to Avatar. Do we throw errors and break the UI for customers, just log to the console for devs to see, or maybe provide a logger event emitter and let clients subscribe to error events and report them?

export interface ClickableProps extends NestableBaseComponentProps { block?: boolean; ariaLabel?: string; title?: string; onClick?: (event: any) => void; }

The story is missing title and ariaLabel.

It's a little hard to read the docs as many components have several and/or complicated examples. We should move anything that's only for visual diffs to a new section. Proposal:

Sections:

• Intro. How to consume YamUI in your app
• Components. Simple, clear docs on what a component does, what it should or shouldn't be used for, and simple examples for relevant props. Maybe in the future break them up into categories (layout, forms, interactive components) but not necessary at the moment.
• Demos. Examples of common component compositions - hovercards, button action bars, etc.
• Visual tests. These are really only there for visual tests and shouldn't be clogging up the component docs. Would be nice to keep these near their respective components though, maybe use a naming convention like ComponentName.visual.md?

and continue visual-diffing all examples

@rese had trouble creating a new component. Styleguidist only recognizes class components, not function components. Also copying an existing folder and renaming things is complex and error prone.

Maybe we can provide a yeoman generator?

We could add @annr, @unindented and @swese44 as code owners to all files. this would require one of us to give a LGTM, currently a Designer LGTM for the visual diffs would greenlight the entire PR

Some cases are not implemented yet, feel free to ping a designer if some clarification is needed.

http://zpl.io/aXK3rAj

const ButtonType = 'button' | 'submit' | 'reset';
Should default to "button".

We take a strong stance against metaprogramming for good reason. In CSS this means avoiding dynamic construction of classnames/selectors so we can easily find those classnames and selectors in our codebase.

This makes a lot of sense in our large application repo. It's not as much of a concern in YamUI where we know exactly where a component's CSS lives.

We currently have several CSS files where selectors for enumerated values like padding/gutters/font-sizes are manually copy+pasted. This is error prone and requires us to own more lines of code. It could be nice to take advantage of PreCSS to make this code more DRY. A few examples:
https://github.com/Microsoft/YamUI/blob/master/src/components/Block/Block.css#L10
https://github.com/Microsoft/YamUI/blob/master/src/components/FixedGrid/FixedGrid.css#L9
https://github.com/Microsoft/YamUI/blob/master/src/components/LayoutList/LayoutList.css#L26
https://github.com/Microsoft/YamUI/blob/master/src/components/Text/Text.css#L43

Another option would be to use a CSS-in-JS solution. We could use Fabric's styling package to avoid additional overhead, and this would allow us to remove CSS classes/logic for gutter sizes, padding, etc.

We need to adapt the original proposed design to include the Call with Skype button.

Ready to go to start implementation.

Make sure to ping me or Manuel to make a review before starting to implement anything so we can tackle issues, questions, and doubts in advance.

Note: keep in mind that the numbered lists are slightly different than the default ones, the gap between the number and the label is consistent with the discs on the unordered lists (but that's not the default on CSS, we need custom stuff there). This may help: https://www.w3.org/Style/Examples/007/color-bullets.en.html

Zeplin: http://zpl.io/VkKNMXL

The index.ts file is now copied to public output directory:
https://github.com/Microsoft/YamUI/blob/master/config/icons/generate.js#L30
which seems to be the reason I'm getting this error when running local dev server via npm start:

Failed to compile.
/Users/piotrblazejewicz/git/YamUI/tsconfig.json
[tsl] ERROR
      TS6059: File '/Users/piotrblazejewicz/git/YamUI/dist/components/Icon/icons/index.ts' is not under 'rootDir' '/Users/piotrblazejewicz/git/YamUI/src'. 'rootDir' is expected to contain all source files.

full output: https://gist.github.com/peterblazejewicz/54a0db7fe4f7d540b95ff02c2da11616

I though about changing tsconfig.json excluding dist directory sources (*.ts)

Thanks!

Ready to go to start implementation.

Make sure to ping me or Manuel to make a review before starting to implement anything so we can tackle issues, questions, and doubts in advance.

zpl.io/aXKp7Rj

When providing a window.FabricConfig object with font styles, Fabric has a bug where a shallow-assign happens instead of merging styles. For example, when setting -webkit-font-smoothing: auto we lose font-family and other rules.

I'm temporarily adding the extra 3 @font-face rules in our CSS to compensate, which we can remove once this bug is fixed in Fabric:
microsoft/fluentui#2013

icon, bolded text, text

Components like SuggestionsListItem need larger horizontal padding than vertical, could be nice to split these instead of requiring custom CSS in these cases.