WIP: Custom scrollbar proto for dropdown

.circleci/config.yml

@@ -10,14 +10,6 @@ jobs:
     environment:
       TZ: "/usr/share/zoneinfo/America/Los_Angeles"
     steps:
-      # https://circleci.com/docs/2.0/api-job-trigger/
-      - run:
-          name: Start Visual Tests job
-          command: |
-            curl --user ${CIRCLE_API_USER_TOKEN} \
-              --data build_parameters[CIRCLE_JOB]=visual \
-              --data revision=$CIRCLE_SHA1 \
-              https://circleci.com/api/v1.1/project/github/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME/tree/$CIRCLE_BRANCH
       - run:
           name: Update yarn
           command: |
@@ -62,17 +54,6 @@ jobs:
           name: E2E Tests
           command: yarn test:e2e
 
-      - restore_cache:
-          key: v1.1-vuln-scans-{{ checksum "yarn.lock" }}
-      - run:
-          name: Vulnerability Tests
-          command: yarn test:vulns
-      # https://discuss.circleci.com/t/add-mechanism-to-update-existing-cache-key/9014/12
-      - save_cache:
-          key: v1.1-vuln-scans-{{ checksum "yarn.lock" }}-{{ epoch }}
-          paths:
-            - .vuln-scans
-
       - run:
           name: Project Tests
           command: yarn test:projects
@@ -112,41 +93,3 @@ jobs:
               echo "//registry.npmjs.org/:_authToken=${npm_TOKEN}" > ~/project/.npmrc
               yarn lerna publish --canary --preid "${CIRCLE_BUILD_NUM}.${CIRCLE_BRANCH}" --yes
             fi
-
-  visual:
-    docker:
-      - image: circleci/node:8
-    environment:
-      TZ: "/usr/share/zoneinfo/America/Los_Angeles"
-    steps:
-      - run:
-          name: Update yarn
-          command: |
-            # remove default yarn
-            sudo rm -rf $(dirname $(which yarn))/yarn*
-            # download latest
-            rm -rf ~/.yarn
-            curl -o- -L https://yarnpkg.com/install.sh | bash
-            echo 'export PATH="${PATH}:${HOME}/.yarn/bin"' >> $BASH_ENV
-      - checkout
-      # because we don't invoke npm (we use yarn) we need to add npm bin to PATH manually
-      - run:
-          name: Add npm bin to PATH
-          command: echo 'export PATH="${PATH}:$(npm bin)"' >> $BASH_ENV
-      - restore_cache:
-          keys:
-            - v1.1-dependencies-{{ checksum "yarn.lock" }}
-            - v1.1-dependencies
-      - run:
-          name: Install Dependencies
-          command: yarn
-      - save_cache:
-          key: v1.1-dependencies-{{ checksum "yarn.lock" }}
-          paths:
-            - ~/.cache/yarn
-            - .yarn-cache
-            - node_modules
-
-      - run:
-          name: Visual Tests
-          command: yarn test:visual

.github/add-a-feature.md

@@ -1,5 +1,4 @@
-Add a feature
-=============
+# Add a feature
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
@@ -43,11 +42,14 @@ Once the component spec is solidified, it's time to write some code. The followi
 You can create a new component `MyComponent` by following the example of an existing component (e.g. Button).
 
 The corresponding component directory trees should be created in correct places:
-  - the component under `/src/components/MyComponent`,
+
+- the component under `/packages/{package}/src/components/MyComponent`,
   - the docs under `/docs/src/examples/components/MyComponent`,
-  - the tests under `/test/specs/components/MyComponent`
+- the tests under `/packages/{package}/test/specs/components/MyComponent`
+
+`{package}` is likely going to stand for `react` if you are contributing a component to the main package.
 
-You can customize the styles of your component by adding necessary variables and styles as part of your theme. 
+You can customize the styles of your component by adding necessary variables and styles as part of your theme.
 E.g. for update on the `teams` theme: `/src/themes/`
 
 ### Good practice
@@ -57,8 +59,7 @@ Generally if you're updating a component, push a small change so that your PR co
 Stateless components should be written as an arrow `function`:
 
 ```tsx
-
-const Button: React.FunctionalComponent = (props) => {
+const Button: React.FunctionalComponent = props => {
   // ...
 }
 ```
@@ -90,45 +91,45 @@ Here's an example:
 
 Every component must have fully described `MyComponentProps` interface and `propTypes`.
 
- ```tsx
+```tsx
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import {
-  ChildrenComponentProps,
-  ContentComponentProps,
-  UIComponentProps,
-  commonPropTypes,
+ ChildrenComponentProps,
+ ContentComponentProps,
+ UIComponentProps,
+ commonPropTypes,
 } from '../../lib'
 
 export interface DividerProps
-  extends UIComponentProps,
-    ChildrenComponentProps,
-    ContentComponentProps {
-  /**
-   * Accessibility behavior if overridden by the user.
-   */
-  accessibility?: Accessibility
-
-  /** A divider can be fitted, without any space above or below it.  */
-  fitted?: boolean
-
-  /** Size multiplier (default 0) * */
-  size?: number
-
-  /** A divider can appear more important and draw the user's attention. */
-  important?: boolean
+ extends UIComponentProps,
+   ChildrenComponentProps,
+   ContentComponentProps {
+ /**
+  * Accessibility behavior if overridden by the user.
+  */
+ accessibility?: Accessibility
+
+ /** A divider can be fitted, without any space above or below it.  */
+ fitted?: boolean
+
+ /** Size multiplier (default 0) * */
+ size?: number
+
+ /** A divider can appear more important and draw the user's attention. */
+ important?: boolean
 }
 
 // ...
 
-  static propTypes = {
-     ...commonPropTypes.createCommon({ color: true }),
-     fitted: PropTypes.bool,
-     important: PropTypes.bool,
-     size: PropTypes.number,
-  }
- ```
+ static propTypes = {
+    ...commonPropTypes.createCommon({ color: true }),
+    fitted: PropTypes.bool,
+    important: PropTypes.bool,
+    size: PropTypes.number,
+ }
+```
 
 ### State
 
@@ -137,7 +138,7 @@ Strive to use stateless functional components when possible:
 ```tsx
 export interface MyComponentProps {}
 
-const MyComponent: React.FunctionalComponent<MyComponentProps> = (props) => {
+const MyComponent: React.FunctionalComponent<MyComponentProps> = props => {
   return <div {...props} />
 }
 ```
@@ -148,7 +149,7 @@ If you're component requires event handlers, it is a stateful class component. W
 export interface MyComponentProps {}
 
 class MyComponent extends AutoControlledComponent<MyComponentProps> {
-  handleClick = (e) => {
+  handleClick = e => {
     console.log('Clicked my component!')
   }
 
@@ -165,6 +166,7 @@ Review [common tests](test-a-feature.md#common-tests) below. You should now add
 ### Add doc site example
 
 Create a new documentation example that demonstrates usage of the new feature.
+
 1. Create a new example in `/docs/src/examples/components` under the appropriate component.
 1. Add your example to the `index.ts` in respective directory.
 1. Running `yarn start` should now show your example in the doc site.

.github/workflows/screener.yml

@@ -0,0 +1,22 @@
+name: Screener
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+  push:
+    branches:
+      - master
+
+jobs:
+  test:
+    name: Test visuals on Screener
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 8
+      - run: yarn install
+      - run: yarn test:visual
+        env:
+          CI: true
+          SCREENER_API_KEY: ${{secrets.SCREENER_API_KEY}}

.nowignore

@@ -17,7 +17,6 @@ perf/dist
 .editorconfig
 .gitignore
 .prettierignore
-.snyk
 codecov.yml
 dangerfile.ts
 jest.config.js

CHANGELOG.md

@@ -17,18 +17,69 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Fixes
+- Update `call-missed-line` icon in Teams theme @codepretty ([#2059](https://github.com/stardust-ui/react/pull/2059))
+- Show debug panel correctly for components with no owner @miroslavstastny ([#2055](https://github.com/stardust-ui/react/pull/2055))
+- Correctly handle empty key actions in RTL @miroslavstastny ([#2060](https://github.com/stardust-ui/react/pull/2060))
+- Accessibility improvements for `tree` and `splitButton` @kolaps33 ([#2032](https://github.com/stardust-ui/react/pull/2032))
+- Fixing a core keydown disconnect issue @dzearing ([#2056](https://github.com/stardust-ui/react/pull/2056))
+
+### Features
+- Add `menu` prop on `ToolbarMenuItem` component @mnajdova ([#1984](https://github.com/stardust-ui/react/pull/1984))
+
+### Documentation
+- Editor Toolbar prototype: Fix overflow menu overflowing in Portal window @miroslavstastny ([#2053](https://github.com/stardust-ui/react/pull/2053))
+
+<!--------------------------------[ v0.40.1 ]------------------------------- -->
+## [v0.40.1](https://github.com/stardust-ui/react/tree/v0.40.1) (2019-10-18)
+[Compare changes](https://github.com/stardust-ui/react/compare/v0.40.0...v0.40.1)
+
+### Features
+- Export `robot`, `tabs` and `plugs` icon to Teams theme @codepretty ([#2026](https://github.com/stardust-ui/react/pull/2026))
+- Add CSSinJS debug panel @levithomason @miroslavstastny @mnajdova ([#1974](https://github.com/stardust-ui/react/pull/1974))
+- Add ability to set custom footer for `Dialog` @kolaps33 ([#2005](https://github.com/stardust-ui/react/pull/2005))
+
+### Fixes
+- Correctly handle RTL in `Alert` component @miroslavstastny ([#2018](https://github.com/stardust-ui/react/pull/2018))
+- Popper should use the correct window instance @jurokapsiar ([#2028](https://github.com/stardust-ui/react/pull/2028))
+- Checking if the slot attributes are defined @mshoho ([#2040](https://github.com/stardust-ui/react/pull/2040))
+
+### Performance
+- Remove redundant usages of `Box` component in `Attachment`, `Popup` and `Tooltip` @layershifter ([#2023](https://github.com/stardust-ui/react/pull/2023))
+- Refactor `ListItem` to avoid usages of `Flex` component @layershifter ([#2025](https://github.com/stardust-ui/react/pull/2025))
+- Cache resolved component variables @jurokapsiar @miroslavstastny ([#2041](https://github.com/stardust-ui/react/pull/2041))
+
+### Documentation
+- Fix 'RTL' and 'Theme it' in examples @miroslavstastny ([#2020](https://github.com/stardust-ui/react/pull/2020))
+- Prototype for custom scrollbar for menu, dialog, popup and list @jurokapsiar ([#1962](https://github.com/stardust-ui/react/pull/1962))
+
+<!--------------------------------[ v0.40.0 ]------------------------------- -->
+## [v0.40.0](https://github.com/stardust-ui/react/tree/v0.40.0) (2019-10-09)
+[Compare changes](https://github.com/stardust-ui/react/compare/v0.39.0...v0.40.0)
+
+### BREAKING CHANGES
+- Remove `onReduceItems` prop from Toolbar @miroslavstastny ([#2010](https://github.com/stardust-ui/react/pull/2010))
+
 ### Fixes
 - Fix `bodyBackground` color for Teams dark theme to be the correct grey value @codepretty ([#1961](https://github.com/stardust-ui/react/pull/1961))
 - Updating `Button` styles for Teams dark & high contrast themes to match design @notandrew ([#1933](https://github.com/stardust-ui/react/pull/1933))
 - Update Office brand icons in Teams theme with latest version @notandrew ([#1954](https://github.com/stardust-ui/react/pull/1954))
 - Fix various component documentation issues @davezuko ([#1992](https://github.com/stardust-ui/react/pull/1992))
+- Fix accessibility issue by adding border to reactions in Teams high contrast theme @codepretty ([#2001](https://github.com/stardust-ui/react/pull/2001))
 
 ### Features
 - Add experimental runtime accessibility attributes validation (the initial step validates the Button component only) @mshoho ([#1911](https://github.com/stardust-ui/react/pull/1911))
 - Add `sync` icon to Teams theme @codepretty ([#1973](https://github.com/stardust-ui/react/pull/1973))
 - Updating category colors palette and schemes in Teams theme @codepretty ([#1994](https://github.com/stardust-ui/react/pull/1994))
 - Add `bell` icon to Teams theme @codepretty ([#1993](https://github.com/stardust-ui/react/pull/1993))
+- Simplify rendering when tooltip is not visible @jurokapsiar ([#1981](https://github.com/stardust-ui/react/pull/1981))
 - Add `thumbtack`, `thumbtack-slash` and `question-circle` icons to Teams theme @codepretty ([#2000](https://github.com/stardust-ui/react/pull/2000))
+- Add `overflow` prop to `Toolbar` @levithomason @miroslavstastny @layershifter ([#2010](https://github.com/stardust-ui/react/pull/2010))
+
+### Documentation
+- Copy to clipboard prototype - attached confirmation @jurokapsiar ([#1900](https://github.com/stardust-ui/react/pull/1900))
+- Add `EditorToolbar` prototype @layershifter ([#2010](https://github.com/stardust-ui/react/pull/2010))
+
 
 <!--------------------------------[ v0.39.0 ]------------------------------- -->
 ## [v0.39.0](https://github.com/stardust-ui/react/tree/v0.39.0) (2019-09-23)

README.md

@@ -1,13 +1,13 @@
 <!-- Logo -->
 <p align="center">
-  <a href="https://stardust-ui.github.io/react">
-    <img height="128" width="128" src="https://github.com/stardust-ui/react/raw/master/docs/src/logo.png">
+  <a href="https://microsoft.github.io/fluent-ui-react">
+    <img height="128" width="128" src="https://github.com/microsoft/fluent-ui-react/raw/master/docs/src/logo.png">
   </a>
 </p>
 
 <!-- Name -->
 <h1 align="center">
-  <a href="https://stardust-ui.github.io/react">Stardust UI</a>
+  <a href="https://microsoft.github.io/fluent-ui-react">Fluent UI</a>
 </h1>
 
 <!-- Badges -->
@@ -38,7 +38,7 @@
 
 ***
 
-Stardust is a set of specifications and tools for building UI libraries. It is based on a fork of [Semantic UI React (SUIR)][200].
+Fluent UI React represents a set of specifications and tools for building UI libraries.
 
 ## How Can I Help?
 
@@ -95,17 +95,17 @@ You can find Stardust usage examples by accessing the [doc site][5]
 See the [MANIFESTO.md][1] for details. SUIR v2 will be built on the specifications and tools from Stardust.
 
 <!-- REPO -->
-[1]: https://github.com/stardust-ui/react/blob/master/MANIFESTO.md
-[2]: https://github.com/stardust-ui/react/issues/new/choose
-[3]: https://github.com/stardust-ui/react/blob/master/.github/CONTRIBUTING.md
-[4]: https://github.com/stardust-ui/react/blob/master/CHANGELOG.md
-[5]: https://stardust-ui.github.io/react/quick-start
+[1]: https://github.com/microsoft/fluent-ui-react/blob/master/MANIFESTO.md
+[2]: https://github.com/microsoft/fluent-ui-react/issues/new/choose
+[3]: https://github.com/microsoft/fluent-ui-react/blob/master/.github/CONTRIBUTING.md
+[4]: https://github.com/microsoft/fluent-ui-react/blob/master/CHANGELOG.md
+[5]: https://microsoft.github.io/fluent-ui-react
 
 <!-- ISSUE LABELS -->
-[100]: https://github.com/stardust-ui/react/labels/help%20wanted
-[101]: https://github.com/stardust-ui/react/issues?q=is%3Aopen+RFC+label%3ARFC
-[102]: https://github.com/stardust-ui/react/issues?q=is%3Aissue+is%3Aopen+label%3A%22new+component%22
-[103]: https://github.com/stardust-ui/react/labels/good%20first%20issue
+[100]: https://github.com/microsoft/fluent-ui-react/labels/help%20wanted
+[101]: https://github.com/microsoft/fluent-ui-react/issues?q=is%3Aopen+RFC+label%3ARFC
+[102]: https://github.com/microsoft/fluent-ui-react/issues?q=is%3Aissue+is%3Aopen+label%3A%22new+component%22
+[103]: https://github.com/microsoft/fluent-ui-react/labels/good%20first%20issue
 
 <!-- SUIR -->
 [200]: https://github.com/Semantic-Org/Semantic-UI-React

build/dangerjs/checkChangelog.ts

@@ -21,7 +21,7 @@ const hasAddedLinesAfterVersionInChangelog = async (danger): Promise<boolean> =>
 
 const getMalformedChangelogEntries = async (danger): Promise<string[]> => {
   // +- description @githubname ([#DDDD](https://github.com/stardust-ui/react/pull/DDDD))
-  const validEntry = /^\+- .*@\S+ \(\[#\d+]\(https:\/\/github\.com\/stardust-ui\/react\/pull\/\d+\)\)$/
+  const validEntry = /^\+- .*@\S+ \(\[#(\d+)]\(https:\/\/github\.com\/(?:stardust-ui\/react|microsoft\/fluent-ui-react)\/pull\/\1\)\)$/
 
   const addedLines = await getAddedLinesFromChangelog(danger)
 

build/dangerjs/detectNonApprovedDependencies/approvedPackages.ts

@@ -7,6 +7,7 @@ export default [
   'css-in-js-utils@3.0.0',
   'downshift@3.2.6',
   'downshift@3.2.10',
+  'downshift@3.2.14',
   'fast-loops@1.0.1',
   'fast-memoize@2.5.1',
   'fbjs@0.8.17',
@@ -75,6 +76,7 @@ export default [
   'react-fela@10.5.0',
   'react-fela@10.6.1',
   'react-is@16.8.2',
+  'react-is@16.9.0',
   'react-resize-detector@4.2.0',
   'react@16.8.3',
   'resize-observer-polyfill@1.5.1',