@primer/css 0.0.0-1f49d76 → 0.0.0-20211010195643

package/CONTRIBUTING.md

@@ -0,0 +1,85 @@
+## Contributing
+
+Hi there! We're thrilled that you'd like to contribute to this project. Your help is essential for keeping it great.
+
+## Using the issue tracker
+
+The issue tracker is the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests) and [submitting pull requests](#pull-requests), but please respect the following restrictions:
+
+* Please **do not** use the issue tracker for personal support requests.
+* Please **do not** derail or troll issues. Keep the discussion on topic and respect the opinions of others.
+
+## Bug reports
+
+A bug is a _demonstrable problem_ that is caused by the code in the repository. Good bug reports are extremely helpful, so thanks!
+
+Guidelines for bug reports:
+
+1. **Validate and lint your code** — [validate your HTML](http://html5.validator.nu) to ensure your problem isn't caused by a simple error in your own code.
+
+2. **Use the GitHub issue search** — check if the issue has already been reported.
+
+3. **Check if the issue has been fixed** — try to reproduce it using the latest `main` branch in the repository.
+
+4. **Isolate the problem** — ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example.
+
+A good bug report shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report. What is your environment? What steps will reproduce the issue? What browser(s) and OS experience the problem? Do other browsers show the bug differently? What would you expect to be the outcome? All these details will help people to fix any potential bugs.
+
+Example:
+
+> Short and descriptive example bug report title
+>
+> A summary of the issue and the browser/OS environment in which it occurs. If
+> suitable, include the steps required to reproduce the bug.
+>
+> 1. This is the first step
+> 2. This is the second step
+> 3. Further steps, etc.
+>
+> `<url>` - a link to the reduced test case
+>
+> Any other information you want to share that is relevant to the issue being reported. This might include the lines of code that you have identified as causing the bug, and potential solutions (and your opinions on their merits).
+
+## Feature requests
+
+Feature requests are welcome, but take a moment to find out whether your idea fits with the scope and aims of the project. It's up to *you* to make a strong case to convince the project's developers of the merits of this feature. Please provide as much detail and context as possible.
+
+## Pull requests
+
+Good pull requests—patches, improvements, new features—are a fantastic help. They should remain focused in scope and avoid containing unrelated commits.
+
+**Please ask first** before embarking on any significant pull request (e.g. implementing features, refactoring code, porting to a different language), otherwise you risk spending a lot of time working on something that the project's developers might not want to merge into the project.
+
+### Updating Primer CSS
+
+Anyone can open a pull request on Primer CSS. You do not need to work at GitHub or be a member of the org to open a pull request.
+
+1. Fork and clone [this repository](https://github.com/primer/css).
+2. Configure and install the dependencies: `npm install`
+3. Create a new branch from main `git checkout -b my-branch-name`
+4. Make your changes and commit them.
+5. Push your branch and open a pull request. Add a comment describing your proposed changes and request a review from `@primer/css-reviewers`.
+6. Wait for CI tests to finish.
+   - If the tests pass, you should see a status check telling you which alpha version of `@primer/css` you can install with npm to test your work in other projects.
+   - If the tests fail, review the logs and address any issues.
+   - If the builds fail for any other reason (as they occasionally do), they may need to be manually restarted.
+7. When CI tests pass, a new npm alpha release will be posted under the CI checks, you can use this npm version for testing in your project or with a GitHub site if you are staff.
+8. Pat yourself on the back and wait for your pull request to be reviewed.
+
+Here are a few things you can do that will increase the likelihood of your pull request being accepted:
+
+- Keep your change as focused as possible. If there are multiple changes you would like to make that are not dependent upon each other, consider submitting them as separate pull requests.
+- Write a [good commit message](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html).
+
+## Releasing a new Primer CSS version
+See [RELEASING.md](RELEASING.md) for our release process.
+
+## Resources
+
+- [Contributing to Open Source on GitHub](https://guides.github.com/activities/contributing-to-open-source/)
+- [Using Pull Requests](https://help.github.com/articles/using-pull-requests/)
+- [GitHub Help](https://help.github.com)
+
+[fork]: https://github.com/primer/css/fork
+[pr]: https://github.com/primer/css/compare
+[style]: https://primer.style/css/principles

package/DEVELOP.md

@@ -22,16 +22,6 @@ Here's what you need to know about how the files are structured in both git and
 * All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`).
 
 
-## Workflow
-The typical Primer workflow looks something like this:
-
-1. `npm install` to install the development dependencies.
-1. [Start Storybook](#storybook)
-1. Navigate to the module you're working on and modify the SCSS and/or markdown files.
-1. Test your changes in Storybook.
-1. Push your work to a new branch.
-1. Request a review from one of the Primer "core" team members.
-
 ## Install
 Run `npm install` to install the npm dependencies.
 
@@ -45,53 +35,28 @@ npm start
 Then visit http://localhost:8000 to view the site.
 
 ### The docs directory
-The [docs directory](./docs/) contains all of the documentation files in our docs site. Files are nested in the `/content` folder.
-
-
-### URL tests
-We have a script that catches inadvertent URL changes caused by renaming or deleting Markdown docs:
-
-```sh
-npm run test-urls
-```
+The [docs directory](../docs/) contains all of the documentation files in our docs site. Files are nested in the `/content` folder.
 
-This script includes some exceptions for URLs that have been intentionally moved or removed in the process of moving away from the [GitHub Style Guide](https://styleguide.github.com/primer/), and which you will need to modify if you rename or remove either Markdown docs or their `path` frontmatter. See [#641](https://github.com/primer/css/pull/641) for more information.
-
-## Storybook
-To borrow a [metaphor from Brad Frost](http://bradfrost.com/blog/post/the-workshop-and-the-storefront/), the [docs site](#docs-site) is Primer CSS's storefront, and [Storybook] is its workshop.
-
-Our Storybook setup allows you to view every HTML code block in Primer CSS's Markdown docs in isolation. To get started, run the Storybook server with:
-
-```sh
-npm run start-storybook
-```
-
-This should open up the site in your browser (if not, navigate to `http://localhost:8001`).
 
 ### Code blocks
 All `html` fenced code blocks in `src/**/*.md` will be rendered as stories and listed under the relevant module's name in the left-hand nav. File changes should trigger a live reload automatically (after a brief delay).
 
-
 ## Scripts
 Our [`package.json`](package.json) houses a collection of [run-scripts] that we use to maintain, test, build, and publish Primer CSS. Run `npm run <script>` with any of the following values for `<script>`:
 
-* `fresh` does a "fresh" npm install (like `npm install -f`)
 * `dist` runs `script/dist`, which creates CSS bundles of all the `index.scss` files in `src/`.
 * `check-links` runs a link checker on your local development server (`localhost:3000`, started with `npm start`).
-* `lint` lints both our SCSS and JavaScript source files.
-* `lint-css` lints our SCSS source files.
-* `lint-js` lints the JavaScript source files.
+* `stylelint` lints the CSS source files.
+* `eslint` lints the JavaScript source files.
 * `now-build` and `now-start` are run on [Now] to build and start the docs site server. `now-test` runs them both in order.
 * `start` runs the documentation site locally (alias: `dev`).
-* `test-urls` compares a (pre-generated) list of paths from the **deprecated** [Primer Style Guide](https://styleguide.github.com/primer/) to files in `pages/css`, and lets us know if we've inadvertently deleted or renamed anything.
-* `test-migrate` tests the [`primer-migrate`](MIGRATING.md#primer-migrate) command line utility.
+* `test` runs our test suite.
 
 The above list may not always be up-to-date. You can list all of the available scripts by calling `npm run` with no other arguments.
 
 
 [@primer/css]: https://www.npmjs.com/package/@primer/css
 [run-scripts]: https://docs.npmjs.com/cli/run-script
-[storybook]: https://storybook.js.org/
 [now]: https://zeit.co/now
 [npm]: https://www.npmjs.com/
 [npx]: https://www.npmjs.com/package/npx

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018 GitHub Inc.
+Copyright (c) 2021 GitHub Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="300px" src="./static/readme.png">
+  <img width="300px" src="./docs/src/readme.png">
 </p>
 
 <h1 align="center">Primer CSS</h1>
@@ -10,28 +10,29 @@
   <a aria-label="npm package" href="https://www.npmjs.com/package/@primer/css">
     <img alt="" src="https://img.shields.io/npm/v/@primer/css.svg">
   </a>
+  <a aria-label="build status" href="https://github.com/primer/css/actions/workflows/ci.yml">
+    <img alt="" src="https://github.com/primer/css/actions/workflows/ci.yml/badge.svg">
+  </a>
   <a aria-label="contributors graph" href="https://github.com/primer/css/graphs/contributors">
     <img src="https://img.shields.io/github/contributors/primer/css.svg">
   </a>
-  <a aria-label="last commit" href="https://github.com/primer/css/commits/master">
+  <a aria-label="last commit" href="https://github.com/primer/css/commits/main">
     <img alt="" src="https://img.shields.io/github/last-commit/primer/css.svg">
   </a>
-  <a aria-label="join us in spectrum" href="https://spectrum.chat/primer">
-    <img alt="" src="https://withspectrum.github.io/badge/badge.svg">
-  </a>
-  <a aria-label="license" href="https://github.com/primer/css/blob/master/LICENSE">
+  <a aria-label="license" href="https://github.com/primer/css/blob/main/LICENSE">
     <img src="https://img.shields.io/github/license/primer/css.svg" alt="">
   </a>
 </p>
 
-## Migrating
-:rotating_light: **If you currently use the `primer` or `primer-`-prefixed npm packages, please read [the migration guide](MIGRATING.md)!**
+## Documentation
+
+Our documentation site lives at [primer.style/css](https://primer.style/css). You'll be able to find detailed documentation on getting started, all of the components, our theme, our principles, and more.
 
 ## Install
 This repository is distributed with [npm]. After [installing npm][install-npm], you can install `@primer/css` with this command:
 
 ```sh
-$ npm install --save @primer/css
+npm install --save @primer/css
 ```
 
 ## Usage
@@ -50,13 +51,10 @@ You can import individual Primer modules directly from the `@primer/css` package
 ```
 
 ## Development
-See [DEVELOP.md](./DEVELOP.md) for development docs.
+See [DEVELOP.md](DEVELOP.md) for development docs.
 
 ## Releasing (for GitHub staff)
-You can find docs about our release process in [RELEASING.md](./RELEASING.md).
-
-## Documentation
-The [Primer CSS docs site](https://primer.style/css) is deployed from this repo with [primer/deploy](https://github.com/primer/deploy). See [the development docs](DEVELOP.md#docs-site) for more info.
+You can find docs about our release process in [RELEASING.md](RELEASING.md).
 
 ## License
 
@@ -65,5 +63,5 @@ The [Primer CSS docs site](https://primer.style/css) is deployed from this repo
 
 [install-npm]: https://docs.npmjs.com/getting-started/installing-node
 [npm]: https://www.npmjs.com/
-[primer]: https://primer.style
+[primer]: https://primer.style/
 [sass]: http://sass-lang.com/

package/RELEASING.md

@@ -2,66 +2,9 @@
 
 ## Prepare the release (in `primer/css`)
 
-1. Decide which [PRs](https://github.com/primer/css/pulls) should be part of the next release and if it will be a major, minor or patch `<version>`. You may also check the [release tracking project
-](https://github.com/primer/css/projects/2#column-4482699) or ask your team members in Slack.
-
-1. Create a new release branch from `master` and name it `release-<version>`.
-
-1. Run [`npm version <version>`](https://docs.npmjs.com/cli/version) to update the `version` field in both `package.json` and `package-lock.json`.
-
-1. Create a new PR for the `release-<version>` branch. Please use the following template for the PR description, linking to the relevant issues and/or pull requests for each change. The changelog gets generated automatically :
-
-    ```md
-    # Primer CSS [Major|Minor|Patch] Release
-
-    Version: 📦 **`0.0.0`**
-    Approximate release date: 📆 **DD/MM/YY**
-    Changes: 🎉 [All merged PRs](https://github.com/primer/css/pulls?q=is%3Apr+is%3Amerged+base%3Arelease-0.0.0)
-    
-    ---
-
-    ### :boom: Breaking Change
-    - [ ] Description #
-
-    ### :rocket: Enhancement
-    - [ ] Description #
-
-    ### :bug: Bug Fix
-    - [ ] Description #
-
-    ### :nail_care: Polish
-    - [ ] Description #
-
-    ### :memo: Documentation
-    - [ ] Description #
-
-    ### :house: Internal
-    - [ ] Description #
-
-    ---
-
-    ### Ship checklist
-
-    - [x] Update the `version` field in `package.json`
-    - [ ] Update `CHANGELOG.md`
-    - [ ] Test the release candidate version with `github/github`
-    - [ ] Merge this PR and [create a new release](https://github.com/primer/css/releases/new)
-    - [ ] Update `github/github`
-    - [ ] Tell the world (Slack, Twitter, Team post)
-
-    For more details, see [RELEASING.md](https://github.com/primer/css/blob/master/RELEASING.md).
-
-    /cc @primer/ds-core
-    ```
-
-1. Start merging existing PRs into the release branch. Note: You have to change the base branch from `master` to the `release-<version>` branch before merging.
-
-1. Update `CHANGELOG.md` and the PR description. **Tip**: You can copy&paste the changelog from `Checks > changelog > all > changelog`. It gets generated based on adding the `Tag` labels to PRs.
-
-1. Wait for your checks to pass, and take note of the version that [primer/publish] lists in your status checks.
-
-    **Tip**: The release candidate version will always be `<version>-rc.<sha>`, where `<version>` comes from the branch name and `<sha>` is the 7-character commit SHA.
+The release process is automated by [changesets]. After you familiarize yourself with how they work. We use an [action workflow integrated in ci](https://github.com/atlassian/changesets#integrating-with-ci).
 
+1. Visit the pull requests page and find the [latest Release tracking pr from primer-css](https://github.com/primer/css/pulls/primer-css). If there isn't one, we'll need to build the next release by merging in PRs with changeset files.
 
 ## Test the release candidate (in `github/github`):
 
@@ -86,13 +29,9 @@
 
 1. If the release PR got approved and you've done necessary testing, merge it.
 
-    After tests run, the docs site will be deployed and `@primer/css` will be published with your changes to the `latest` dist-tag. You can check [npm](https://www.npmjs.com/package/@primer/css?activeTab=versions) to see if [primer/publish] has finished.
-
-1. [Create a new release](https://github.com/primer/primer/releases/new) with tag `v<version>`.
+    After tests run, the docs site will be deployed and `@primer/css` will be published with your changes to the `latest` dist-tag. You can check [npm](https://www.npmjs.com/package/@primer/css?activeTab=versions) to see if actions has finished.
 
-1. Copy the changes from the [CHANGELOG] and paste them into the release notes.
-
-1. Publish 🎉
+2. done 🎉
 
 
 ## Update github.com (in `github/github`):
@@ -109,15 +48,5 @@
 
 1. Deploy! :rocket:
 
-
-### Publish the release
-
-1. [Create a new release](https://github.com/primer/css/releases/new) with tag `v<version>`.
-
-2. Copy the changes from the [CHANGELOG] and paste them into the release notes.
-
-3. Publish 🎉
-
-
 [changelog]: ../CHANGELOG.md
-[primer/publish]: https://github.com/primer/publish
+[changesets]: https://github.com/atlassian/changesets

package/actionlist/action-list-item-divider.scss

@@ -0,0 +1,42 @@
+// emtpy divider
+
+.ActionList-sectionDivider {
+  // has children
+  &:not(:empty) {
+    display: flex;
+    // stylelint-disable-next-line primer/spacing
+    padding: ($spacer-1 * 1.5) $spacer-2;
+    font-size: $font-size-small;
+    font-weight: $font-weight-bold;
+    color: var(--color-fg-muted);
+    flex-direction: column;
+  }
+
+  // no children
+  &:empty {
+    height: 1px;
+    padding: 0;
+    // stylelint-disable-next-line primer/spacing
+    margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
+    list-style: none;
+    background: var(--color-action-list-item-inline-divider);
+    border: 0;
+  }
+}
+
+.ActionList-sectionDivider--filled {
+  margin: $spacer-2 ($spacer-2 * -1);
+  background: var(--color-canvas-subtle);
+  border-top: $border-width $border-style var(--color-action-list-item-inline-divider);
+  border-bottom: $border-width $border-style var(--color-action-list-item-inline-divider);
+
+  // if no children, treat as divider
+  &:empty {
+    height: $spacer-2;
+    box-sizing: border-box;
+  }
+
+  &:first-child {
+    margin-top: 0;
+  }
+}