Outline Fall/Winter Update!! #426

himerus · 2023-10-16T13:23:08Z

Summary by CodeRabbit

New Features
- Enhanced core link and alert components with updated functionalities and styles.
- Introduced new documentation and Storybook examples for core components.
- Updated core button component with new styles and configurations.
Documentation
- Comprehensive updates across guides and component documentation to reflect new component updates and best practices.
Refactor
- Streamlined Storybook configuration and documentation structure.
- Revised PostCSS and ESLint configurations for improved development experience.
Chores
- Updated Yarn, Changeset, and Git configurations for better version control and package management.
Style
- Implemented new CSS variables and styles for core components, enhancing UI consistency and customization.

…utline-core-button

…tylesheets-controller.

changeset-bot · 2023-10-16T13:23:11Z

🦋 Changeset detected

Latest commit: 3ce056d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages

Name	Type
@phase2/outline-form	Patch
@phase2/outline-storybook	Patch
@phase2/outline-core-link	Patch
@phase2/outline-config	Patch
@phase2/outline-templates	Patch
@phase2/outline-adopted-stylesheets-controller	Patch
@phase2/outline-core-button	Patch
@phase2/outline-examples	Patch
@phase2/outline-core-alert	Patch
@phase2/outline-docs	Patch
@phase2/outline-core	Patch
@phase2/outline-cli	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify · 2023-10-16T13:23:13Z

✅ Deploy Preview for outlinejs ready!

Name	Link
🔨 Latest commit	`3ce056d`
🔍 Latest deploy log	https://app.netlify.com/sites/outlinejs/deploys/65ce37a6a400bf00073a7fb4
😎 Deploy Preview	https://deploy-preview-426--outlinejs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

coderabbitai · 2023-10-16T13:23:17Z

Walkthrough

This series of changes updates various components within a project, focusing on enhancing core components like links, alerts, and buttons. It involves updates to component properties, method signatures, styling, and documentation to reflect these enhancements. Additionally, configuration files for Storybook, ESLint, PostCSS, and Yarn are updated to support these changes. The effort aims to streamline component usage, improve documentation for developers, and ensure consistency across the project's UI components.

Changes

File(s)	Change Summary
`.../outline-core-link/...`, `.../outline-core-alert/...`, `.../outline-core-button/...`	Updated core components (Link, Alert, Button) with new properties, methods, and styles.
`.../outline-core-alert/docs/...`, `.../outline-storybook/...`, `.../documentation/outline-docs/...`	Updated documentation, Storybook stories, and guides reflecting changes to core components.
`.../outline-core-contained-element.ts`, `.../outline-form/...`	Minor updates to contained elements and deprecated form component.
`.../storybook/...`, `docs/...`, `.../outline-templates/...`, `.../tools/outline-config/...`	Configuration updates for Storybook, documentation, PostCSS, and project scripts.
`.changeset/...`, `.husky/pre-commit`, `.prettierignore`, `.gitignore`	Changeset, Git, and code formatting configuration updates.
`.../controllers/adopted-stylesheets/...`	Updates to adopted stylesheets for `outline-core-button`.
`.yarnrc.yml`	New Yarn configuration file added.

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit-tests for this file.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit tests for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository from git and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit tests.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
The JSON schema for the configuration file is available here.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

coderabbitai

Review Status

Actionable comments generated: 3

Commits

Files that changed from the base of the PR and between 3005e66 and 3943a09.

Files ignored due to filter (4)

package.json
packages/components/outline-core-link/package.json
packages/components/outline-core-link/yarn.lock
yarn.lock

Files selected for processing (12)

packages/components/@deprecated/outline-form/src/outline-form.global.scoped.css (1 hunks)
packages/components/outline-core-contained-element.ts (1 hunks)
packages/components/outline-core-link/index.ts (1 hunks)
packages/components/outline-core-link/src/outline-core-link.ts (4 hunks)
packages/components/outline-core-link/src/style/outline-core-link.css (1 hunks)
packages/components/outline-core-link/src/style/outline-core-link.lightDom.css (1 hunks)
packages/components/outline-core-link/src/style/outline-core-link.vars.css (1 hunks)
packages/documentation/outline-storybook/config/storybook.main.css (3 hunks)
packages/documentation/outline-storybook/stories/components/outline-core-link.stories.mdx (1 hunks)
packages/outline-templates/default/postcss.config.js (1 hunks)
packages/tools/outline-config/postcss.config.js (1 hunks)
postcss.config.js (1 hunks)

Files skipped from review due to trivial changes (6)

packages/components/@deprecated/outline-form/src/outline-form.global.scoped.css
packages/components/outline-core-link/index.ts
packages/components/outline-core-link/src/style/outline-core-link.css
packages/components/outline-core-link/src/style/outline-core-link.vars.css
packages/documentation/outline-storybook/stories/components/outline-core-link.stories.mdx
postcss.config.js

Additional comments (Suppressed): 9

packages/components/outline-core-link/src/style/outline-core-link.lightDom.css (1)

1-28: The CSS variables used in this hunk are not defined within this file. Ensure that they are defined in the imported outline-core-link.vars.css file or elsewhere in the project. Also, verify that the @nested-import directive is correctly processed by your PostCSS configuration, as it's not a standard CSS feature.

packages/outline-templates/default/postcss.config.js (1)

1-8: The PostCSS configuration has been updated. The postcss-import, postcss-nested, postcss-custom-properties, and autoprefixer plugins have been removed. They are replaced with postcss-nested-import and postcss-preset-env. Ensure that these changes do not affect the stylesheets' compatibility with different browsers and that the nested imports work as expected. Also, verify that the removal of postcss-custom-properties does not affect the usage of CSS custom properties in your stylesheets.
packages/tools/outline-config/postcss.config.js (1)
1-8: The changes in the PostCSS configuration seem to be in line with the summary provided. The postcss-import plugin has been replaced with postcss-nested-import, and the postcss-preset-env plugin has been added. The postcss-nested, postcss-custom-properties, and autoprefixer plugins have been removed.

Ensure that these changes do not break the existing stylesheets and that they are compatible with the rest of the codebase. The postcss-preset-env plugin includes autoprefixer and postcss-custom-properties by default, so removing them explicitly should not cause any issues. However, the postcss-nested-import plugin behaves differently than postcss-import, so verify that the import statements in your stylesheets are compatible with this change.
- require('postcss-import'),
- require('postcss-nested'),
- require('postcss-custom-properties'),
- require('autoprefixer'),
+ require('postcss-nested-import'),
+ require('postcss-preset-env')({ stage: 1 }),
packages/documentation/outline-storybook/config/storybook.main.css (2)

1-133: The new hunk is importing styles from a new location and introduces a new set of styles for various HTML elements. The changes seem to be consistent with the old hunk, with the exception of the removal of a large block of CSS variables. Ensure that the removal of these variables does not affect the styling of other components that might be using them. Also, verify that the new import path is correct and accessible.

141-177: > Note: This review was outside of the patch, so it was mapped to the patch with the greatest overlap. Original lines [141-194]

The new hunk introduces styles for form elements, media elements, and the [hidden] attribute. The changes are consistent with the old hunk. However, ensure that these new styles do not conflict with existing styles in other parts of the application.

packages/components/outline-core-link/src/outline-core-link.ts (3)

1-15: The import statements have been updated to include new stylesheets and the AdoptedStyleSheets class. Ensure that these new files and classes exist and are accessible from this location.

33-38: The OutlineCoreLink class now includes the componentVars stylesheet in its styles and has a new adoptedStylesheets property. Ensure that the componentVars stylesheet is correctly defined and that the adoptedStylesheets property is used correctly throughout the class.

196-204: The fullMarkupInSlot method has been updated to remove the call to isValidTopLevelSlottedLink. This might affect the behavior of the method, as it no longer checks if the component has a single <a> tag as a child of the default slot. Ensure that this change is intentional and does not introduce bugs.

packages/components/outline-core-contained-element.ts (1)

1-88: The new class OutlineCoreContainedElement extends OutlineElement and introduces properties for padding and margin. It also includes a method updated to handle changes in these properties and a helper method isValidCSSValue to validate the CSS values. The class is then declared globally. This seems to be a good approach to encapsulate the logic for handling padding and margin in a separate class. However, the updated method could be optimized to avoid unnecessary checks and operations.

packages/components/outline-core-link/src/outline-core-link.ts

packages/components/outline-core-contained-element.ts

coderabbitai

Review Status

Actionable comments generated: 0

Commits

Files that changed from the base of the PR and between 3943a09 and ee19425.

Files selected for processing (1)

.changeset/purple-crews-attack.md (1 hunks)

Additional comments (Suppressed): 1

.changeset/purple-crews-attack.md (1)

1-9: The changeset indicates that several packages have been patched, presumably related to the updates for core link best practices. Ensure that these patches have been applied correctly and that they don't introduce any breaking changes.

socket-security · 2023-10-16T13:45:54Z

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@phase2/[email protected]	None	`0`	12.1 kB	himerus
npm/@phase2/[email protected]	None	`+1`	453 kB	himerus
npm/@storybook/[email protected]	Transitive: environment	`+9`	3.68 MB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+277`	457 MB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+288`	458 MB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment	`+6`	920 kB	hypnosphi, igor-dv, jreinhold, ...5 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+262`	495 MB	alexandrebodin, amalik2, dandean, ...23 more
npm/@storybook/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+152`	431 MB	shilman
npm/[email protected]	filesystem Transitive: environment	`+7`	581 kB	royston
npm/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	`+449`	477 MB	ndelangen, shilman, usulpro

View full report↗︎

coderabbitai

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between b3ad22e and 0176860.

Files ignored due to filter (6)

package.json
packages/documentation/outline-docs/src/screenshots/outline-accordion--storybook.png
packages/documentation/outline-docs/src/screenshots/outline-accordion--yarn-add.png
packages/documentation/outline-docs/src/screenshots/outline-admin-links--storybook.png
packages/documentation/outline-docs/src/screenshots/outline-admin-links--yarn-add.png
yarn.lock

Files selected for processing (21)

.storybook/main.js (2 hunks)
.storybook/preview.js (1 hunks)
packages/documentation/outline-docs/src/guides/development/component-development/00-main.mdx (1 hunks)
packages/documentation/outline-docs/src/guides/development/component-development/01-component-structure.mdx (3 hunks)
packages/documentation/outline-docs/src/guides/development/component-development/03-styles.mdx (2 hunks)
packages/documentation/outline-docs/src/guides/development/component-development/04-controllers.mdx (2 hunks)
packages/documentation/outline-docs/src/guides/development/component-development/05-render.mdx (2 hunks)
packages/documentation/outline-docs/src/guides/development/component-development/06-properties.mdx (2 hunks)
packages/documentation/outline-docs/src/guides/development/component-development/07-slots.mdx (2 hunks)
packages/documentation/outline-docs/src/guides/development/component-development/08-lifecycle-methods.mdx (2 hunks)
packages/documentation/outline-docs/src/guides/development/component-development/09-events.mdx (2 hunks)
packages/documentation/outline-docs/src/guides/development/component-development/10-utility-functions.mdx (2 hunks)
packages/documentation/outline-docs/src/guides/development/component-development/11-extending.mdx (2 hunks)
packages/documentation/outline-docs/src/guides/development/tooling/01-tooling.mdx (1 hunks)
packages/documentation/outline-docs/src/guides/development/tooling/02-helpful-commands.mdx (2 hunks)
packages/documentation/outline-docs/src/guides/development/tooling/03-conventional-commits.mdx (2 hunks)
packages/documentation/outline-docs/src/guides/development/tooling/04-production-builds.mdx (2 hunks)
packages/documentation/outline-docs/src/guides/development/tooling/06-changesets.mdx (2 hunks)
packages/documentation/outline-docs/src/guides/welcome/00-welcome.mdx (1 hunks)
packages/documentation/outline-docs/src/guides/welcome/more-information/99-additional-resources.mdx (3 hunks)
packages/documentation/outline-docs/src/guides/welcome/more-information/99-contributing.mdx (2 hunks)

Files not summarized due to errors (21)

packages/documentation/outline-docs/src/guides/welcome/00-welcome.mdx: Error: Server error. Please try again later.
packages/documentation/outline-docs/src/guides/development/tooling/03-conventional-commits.mdx: Error: Server error. Please try again later.
packages/documentation/outline-docs/src/guides/development/component-development/07-slots.mdx: Error: Server error. Please try again later.
packages/documentation/outline-docs/src/guides/development/component-development/00-main.mdx: Error: Server error. Please try again later.
packages/documentation/outline-docs/src/guides/development/tooling/06-changesets.mdx: Error: Server error. Please try again later.
packages/documentation/outline-docs/src/guides/development/component-development/06-properties.mdx: Error: Server error. Please try again later.
packages/documentation/outline-docs/src/guides/development/component-development/01-component-structure.mdx: Error: Server error. Please try again later.
packages/documentation/outline-docs/src/guides/development/component-development/04-controllers.mdx: Error: Server error. Please try again later.
packages/documentation/outline-docs/src/guides/development/component-development/11-extending.mdx: Error: Server error. Please try again later.
packages/documentation/outline-docs/src/guides/welcome/more-information/99-additional-resources.mdx: Error: Server error. Please try again later.
packages/documentation/outline-docs/src/guides/welcome/more-information/99-contributing.mdx: Error: Server error. Please try again later.
packages/documentation/outline-docs/src/guides/development/component-development/09-events.mdx: Error: Server error. Please try again later.
packages/documentation/outline-docs/src/guides/development/component-development/10-utility-functions.mdx: Error: Server error. Please try again later.
.storybook/preview.js: Error: Server error. Please try again later.
.storybook/main.js: Error: Server error. Please try again later.
packages/documentation/outline-docs/src/guides/development/component-development/08-lifecycle-methods.mdx: Error: Server error. Please try again later.
packages/documentation/outline-docs/src/guides/development/component-development/03-styles.mdx: Error: Server error. Please try again later.
packages/documentation/outline-docs/src/guides/development/component-development/05-render.mdx: Error: Server error. Please try again later.
packages/documentation/outline-docs/src/guides/development/tooling/02-helpful-commands.mdx: Error: Server error. Please try again later.
packages/documentation/outline-docs/src/guides/development/tooling/01-tooling.mdx: Error: Server error. Please try again later.
packages/documentation/outline-docs/src/guides/development/tooling/04-production-builds.mdx: Error: Server error. Please try again later.

Files not reviewed due to errors (21)

packages/documentation/outline-docs/src/guides/development/tooling/04-production-builds.mdx (Error: Server error. Please try again later.)
packages/documentation/outline-docs/src/guides/development/component-development/07-slots.mdx (Error: Server error. Please try again later.)
packages/documentation/outline-docs/src/guides/development/component-development/04-controllers.mdx (Error: Server error. Please try again later.)
packages/documentation/outline-docs/src/guides/development/component-development/08-lifecycle-methods.mdx (Error: Server error. Please try again later.)
packages/documentation/outline-docs/src/guides/development/component-development/09-events.mdx (Error: Server error. Please try again later.)
packages/documentation/outline-docs/src/guides/welcome/more-information/99-contributing.mdx (Error: Server error. Please try again later.)
.storybook/preview.js (Error: Server error. Please try again later.)
.storybook/main.js (Error: Server error. Please try again later.)
packages/documentation/outline-docs/src/guides/development/component-development/11-extending.mdx (Error: Server error. Please try again later.)
packages/documentation/outline-docs/src/guides/development/component-development/00-main.mdx (Error: Server error. Please try again later.)
packages/documentation/outline-docs/src/guides/development/component-development/01-component-structure.mdx (Error: Server error. Please try again later.)
packages/documentation/outline-docs/src/guides/development/component-development/10-utility-functions.mdx (Error: Server error. Please try again later.)
packages/documentation/outline-docs/src/guides/development/component-development/03-styles.mdx (Error: Server error. Please try again later.)
packages/documentation/outline-docs/src/guides/welcome/more-information/99-additional-resources.mdx (Error: Server error. Please try again later.)
packages/documentation/outline-docs/src/guides/welcome/00-welcome.mdx (Error: Server error. Please try again later.)
packages/documentation/outline-docs/src/guides/development/tooling/01-tooling.mdx (Error: Server error. Please try again later.)
packages/documentation/outline-docs/src/guides/development/component-development/05-render.mdx (Error: Server error. Please try again later.)
packages/documentation/outline-docs/src/guides/development/tooling/02-helpful-commands.mdx (Error: Server error. Please try again later.)
packages/documentation/outline-docs/src/guides/development/component-development/06-properties.mdx (Error: Server error. Please try again later.)
packages/documentation/outline-docs/src/guides/development/tooling/06-changesets.mdx (Error: Server error. Please try again later.)
packages/documentation/outline-docs/src/guides/development/tooling/03-conventional-commits.mdx (Error: Server error. Please try again later.)

coderabbitai

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 0176860 and e6af1a3.

Files selected for processing (1)

packages/documentation/outline-storybook/stories/components/outline-dropdown.stories.ts (2 hunks)

Files not summarized due to errors (1)

packages/documentation/outline-storybook/stories/components/outline-dropdown.stories.ts: Error: Server error. Please try again later.

Files not reviewed due to errors (1)

packages/documentation/outline-storybook/stories/components/outline-dropdown.stories.ts (Error: Server error. Please try again later.)

coderabbitai

Review Status

Actionable comments generated: 4

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between e6af1a3 and e5fa0e5.

Files ignored due to filter (2)

package.json
yarn.lock

Files selected for processing (3)

.nvmrc (1 hunks)
packages/documentation/outline-docs/index.ts (1 hunks)
packages/documentation/outline-docs/src/guides/welcome/00-welcome.mdx (1 hunks)

Additional comments: 1

packages/documentation/outline-docs/index.ts (1)

16-23: The export OutlineDocsStorybookDefaultParams is commented out. If this is intentional to provide a template or example for future use, it's fine. Otherwise, if it's meant to be used, the code should be uncommented.

packages/documentation/outline-docs/src/guides/welcome/00-welcome.mdx

.nvmrc

packages/documentation/outline-docs/index.ts

coderabbitai

Review Status

Actionable comments generated: 3

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between e5fa0e5 and f13e5b9.

Files ignored due to path filters (6)

package.json is excluded by: !**/*.json
packages/components/outline-core-button/package.json is excluded by: !**/*.json
packages/components/outline-core-button/tsconfig.build.json is excluded by: !**/*.json
packages/controllers/adopted-stylesheets/package.json is excluded by: !**/*.json
packages/documentation/outline-storybook/package.json is excluded by: !**/*.json
yarn.lock is excluded by: !**/*.lock

Files selected for processing (17)

.storybook/storybook.css (1 hunks)
packages/components/outline-core-button/CHANGELOG.md (1 hunks)
packages/components/outline-core-button/docs/outline-core-button.mdx (1 hunks)
packages/components/outline-core-button/index.ts (1 hunks)
packages/components/outline-core-button/src/css-variables/vars-default.css (1 hunks)
packages/components/outline-core-button/src/css-variables/vars-link.css (1 hunks)
packages/components/outline-core-button/src/css-variables/vars-primary.css (1 hunks)
packages/components/outline-core-button/src/css-variables/vars-secondary.css (1 hunks)
packages/components/outline-core-button/src/css-variables/vars-tertiary.css (1 hunks)
packages/components/outline-core-button/src/outline-core-button.css (1 hunks)
packages/components/outline-core-button/src/outline-core-button.lightdom.css (1 hunks)
packages/components/outline-core-button/src/outline-core-button.ts (1 hunks)
packages/components/outline-core-link/src/outline-core-link.ts (6 hunks)
packages/controllers/adopted-stylesheets/CHANGELOG.md (1 hunks)
packages/controllers/adopted-stylesheets/README.md (1 hunks)
packages/documentation/outline-storybook/CHANGELOG.md (1 hunks)
packages/documentation/outline-storybook/stories/components/outline-core-button.stories.mdx (1 hunks)

Files skipped from review due to trivial changes (3)

.storybook/storybook.css
packages/controllers/adopted-stylesheets/CHANGELOG.md
packages/documentation/outline-storybook/CHANGELOG.md

Additional comments: 41

packages/components/outline-core-button/index.ts (1)

1-2: The export statements for OutlineCoreButton and its associated types are clear and concise.

packages/components/outline-core-button/CHANGELOG.md (1)

3-7: The changelog correctly documents the patch changes for version 0.0.2.

packages/components/outline-core-button/src/css-variables/vars-default.css (1)

18-22: The CSS custom properties are correctly using the var() function to provide a fallback value.

packages/controllers/adopted-stylesheets/README.md (1)

37-37: The import statement in the example code correctly reflects the updated class name AdoptedStyleSheets.

packages/components/outline-core-button/src/css-variables/vars-secondary.css (1)

39-73: The CSS custom properties for the secondary variant of the outline-core-button are well-defined and follow the established pattern of using computed variables with fallbacks.

packages/components/outline-core-button/src/css-variables/vars-tertiary.css (1)

38-72: The CSS custom properties for the tertiary variant of the outline-core-button are correctly set up with computed values and appropriate fallbacks.

packages/components/outline-core-button/src/css-variables/vars-link.css (1)

44-83: The CSS custom properties for the link variant of the outline-core-button are correctly using computed values and fallbacks.

packages/components/outline-core-button/src/css-variables/vars-primary.css (1)

39-73: The CSS custom properties for the primary variant of the outline-core-button are correctly using computed values and fallbacks.

packages/components/outline-core-button/src/outline-core-button.ts (6)

36-37: The static styles property is correctly assigned the component styles.

50-56: The connectedCallback method is correctly setting up the adopted stylesheets.

82-89: The buttonVariant property converter function ensures that only valid variants are set, defaulting to 'primary' if an invalid variant is provided.

97-106: The buttonSize property converter function ensures that only valid sizes are set, defaulting to the first size type if an invalid size is provided.

123-147: The render method correctly applies classes to slotted button elements based on the component's properties.

150-156: The updated lifecycle method is correctly managing the aria-disabled attribute based on the is-disabled property.

packages/components/outline-core-link/src/outline-core-link.ts (5)

1-1: The import statement correctly includes css from 'lit', which is necessary for the adopted stylesheets.

8-9: The import paths for component styles and global styles have been updated to reflect the new directory structure.

74-80: The connectedCallback method is correctly setting up the adopted stylesheets.

151-156: The hasSlottedLink method correctly checks for an a tag within the slotted content.

200-202: The fullMarkupInSlot method correctly adjusts slotted content and provides debugging if necessary.

packages/components/outline-core-button/src/outline-core-button.lightdom.css (11)

1-9: The CSS for the button element is correctly resetting all properties to their initial values.

11-26: The .is-disabled class is correctly styled to prevent user interaction and is using computed variables for colors.

28-45: The button styles are correctly setting display, alignment, cursor, and transition properties.

47-51: The .is-disabled class is correctly styled to prevent user interaction.

53-79: The .primary class is correctly styled with computed variables for various states.

81-100: The .primary.is-disabled class is correctly styled for the disabled state with computed variables.

103-129: The .secondary class is correctly styled with computed variables for various states.

131-150: The .secondary.is-disabled class is correctly styled for the disabled state with computed variables.

153-179: The .tertiary class is correctly styled with computed variables for various states.

181-200: The .tertiary.is-disabled class is correctly styled for the disabled state with computed variables.

205-218: The button sizing classes .small, .medium, and .large are correctly using CSS variables for font size and line height.
packages/components/outline-core-button/src/outline-core-button.css (11)
1-5: Ensure that the nested imports are pointing to the correct paths after the reorganization of components.

Verification successful

The verification script has successfully located the CSS variable files within the packages/components/outline-core-button/src/css-variables/ directory. This confirms that the nested import paths used in the outline-core-button.css file are correct and pointing to the existing files as per the repository's current state.
Scripts Executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Verify that the nested import paths are correct.
fd 'vars-.*\.css' packages/components/outline-core-button/css-variables --exec cat {}
Length of output: 230

Script:
#!/bin/bash
# Search for the CSS variable files without assuming their location.
fd 'vars-.*\.css'
Length of output: 1296
* 36-55: The `button` element styles are well-defined. However, ensure that the `var` function is used consistently for all CSS properties that can be customized. * 57-61: The `[aria-disabled='true'] ::slotted(button)` selector is correctly styled for disabled state. Confirm that this is the intended behavior for slotted buttons and that it doesn't conflict with the styles defined for `.primary.is-disabled`, `.secondary.is-disabled`, and `.tertiary.is-disabled`.

Verification successful

The review comment is verified. The styles for .primary.is-disabled, .secondary.is-disabled, and .tertiary.is-disabled do not conflict with the [aria-disabled='true'] ::slotted(button) selector. They all apply the same pointer-events: none; rule, and the latter two also apply cursor: not-allowed; and user-select: none;, which are consistent with the disabled state styling for slotted buttons.
Scripts Executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Verify that the styles for slotted buttons do not conflict with the disabled state styles.
rg --type css "\[aria-disabled='true'\] ::slotted$button$" packages/components/outline-core-button/src
Length of output: 223

Script:
#!/bin/bash
# Check for the presence of disabled state styles for primary, secondary, and tertiary button classes.
rg --type css "\.primary\.is-disabled" packages/components/outline-core-button/src
rg --type css "\.secondary\.is-disabled" packages/components/outline-core-button/src
rg --type css "\.tertiary\.is-disabled" packages/components/outline-core-button/src
Length of output: 1135

Script:
#!/bin/bash
# Extract the content of the disabled state styles for primary, secondary, and tertiary button classes.
rg --type css -A 3 "\.primary\.is-disabled" packages/components/outline-core-button/src/outline-core-button.css
rg --type css -A 3 "\.secondary\.is-disabled" packages/components/outline-core-button/src/outline-core-button.css
rg --type css -A 3 "\.tertiary\.is-disabled" packages/components/outline-core-button/src/outline-core-button.css
Length of output: 625
* 63-88: The `.primary` class and its pseudo-classes `:hover` and `:focus` are using computed CSS variables. Verify that these variables are defined and that their values are computed as expected after the reorganization.

Verification successful

The CSS variables for the .primary class and its pseudo-classes :hover and :focus are indeed defined in the vars-primary.css file. The variables are set with default values and fallbacks, ensuring that they are computed as expected.
Scripts Executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Verify that the CSS variables for the .primary class are defined and computed correctly.
rg --type css "--outline-core-button--primary-.*--computed" packages/components/outline-core-button/css-variables
Length of output: 561

Script:
#!/bin/bash
# Find files that likely contain CSS variable definitions.
fd 'css-variables' --type f --extension css packages/components/outline-core-button

# Assuming the above command finds a file named something like 'css-variables.css', we will then search for the CSS variables.
# Note: The actual command to search within the files will be written after confirming the file names with the output of the `fd` command.
Length of output: 83

Script:
#!/bin/bash
# Broaden the search for any files that might contain 'css-variables' in their name within the outline-core-button component directory.
fd 'css-variables' packages/components/outline-core-button

# If no specific 'css-variables' file is found, search for the CSS variables across all CSS files in the outline-core-button component directory.
fd --type f --extension css packages/components/outline-core-button --exec rg -- '--outline-core-button--primary-.*--computed'
Length of output: 708

Script:
#!/bin/bash
# Search for CSS files within the css-variables directory.
fd --type f --extension css 'css-variables' packages/components/outline-core-button/src/

# Assuming the above command finds CSS files, we will then search for the CSS variables within those files.
# Note: The actual command to search within the files will be written after confirming the file names with the output of the `fd` command.
Length of output: 88

Script:
#!/bin/bash
# Search for any CSS files within the css-variables directory.
fd --type f --extension css packages/components/outline-core-button/src/css-variables/

# If CSS files are found within the css-variables directory, search for the CSS variables related to the .primary class.
# Note: The actual command to search within the files will be written after confirming the file names with the output of the `fd` command.
Length of output: 626

Script:
#!/bin/bash
# Use the match-all pattern to search for CSS files within the css-variables directory.
fd . 'packages/components/outline-core-button/src/css-variables/' --type f --extension css

# If CSS files are found within the css-variables directory, search for the CSS variables related to the .primary class.
# Note: The actual command to search within the files will be written after confirming the file names with the output of the `fd` command.
Length of output: 465

Script:
#!/bin/bash
# Search within vars-primary.css for the CSS variables related to the .primary class.
rg -- '--outline-core-button--primary-.*--computed' packages/components/outline-core-button/src/css-variables/vars-primary.css
Length of output: 3422
* 91-110: The `.primary[aria-disabled='true']` selector and its `:focus` pseudo-class are using computed CSS variables for disabled state. Ensure that these variables are defined and that their values are computed correctly.

Verification successful

The CSS variables for the .primary[aria-disabled='true'] selector and its :focus pseudo-class are indeed defined in the vars-primary.css file within the css-variables directory of the outline-core-button component. The variables are set with default values, ensuring that they are computed correctly.
Scripts Executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Verify that the CSS variables for the .primary[aria-disabled='true'] selector are defined and computed correctly.
rg --type css "--outline-core-button--primary-disabled-.*--computed" packages/components/outline-core-button/css-variables
Length of output: 579

Script:
#!/bin/bash
# Verify that the CSS variables for the .primary[aria-disabled='true'] selector are defined and computed correctly.
rg --type css '\--outline-core-button--primary-disabled-.*--computed' packages/components/outline-core-button/css-variables
Length of output: 219

Script:
#!/bin/bash
# Search for a file that likely contains the CSS variables definitions.
fd 'css-variables.css' packages/components/outline-core-button
Length of output: 62

Script:
#!/bin/bash
# Broaden the search to look for any CSS files within the outline-core-button directory.
fd '\.css$' packages/components/outline-core-button
Length of output: 573

Script:
#!/bin/bash
# Check the CSS variable definition files for the presence of the specific CSS variables mentioned in the review comment.
rg --type css '\--outline-core-button--primary-disabled-.*--computed' $(fd '\.css$' packages/components/outline-core-button/src/css-variables)
Length of output: 2433
* 113-138: The `.secondary` class and its pseudo-classes `:hover` and `:focus` are using computed CSS variables. Ensure that these variables are defined and that their values are computed correctly.

Verification successful

The verification process has confirmed that the CSS variables for the .secondary class, along with its :hover and :focus pseudo-classes, are indeed defined and their values are computed correctly within the packages/components/outline-core-button/src/css-variables/vars-secondary.css file. The variables are set with default values and fallbacks, ensuring that the styles for the .secondary class are properly computed.
Scripts Executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Verify that the CSS variables for the .secondary class are defined and computed correctly.
rg --type css "--outline-core-button--secondary-.*--computed" packages/components/outline-core-button/css-variables
Length of output: 565

Script:
#!/bin/bash
# Attempt to find the CSS variable definitions within CSS files in the correct directory.
rg --type css --glob '*.css' "outline-core-button--secondary-.*--computed" packages/components/outline-core-button/src/
Length of output: 11489
* 141-160: The `.secondary[aria-disabled='true']` selector and its `:focus` pseudo-class are using computed CSS variables for disabled state. Confirm that these variables are defined and that their values are computed correctly.

Verification successful

The CSS variables for the .secondary[aria-disabled='true'] selector and its :focus pseudo-class are indeed defined and their values are computed correctly. The variables are found in the vars-secondary.css file within the outline-core-button component directory, as well as being referenced in outline-core-button.lightdom.css and outline-core-button.css.
Scripts Executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Verify that the CSS variables for the .secondary[aria-disabled='true'] selector are defined and computed correctly.
rg --type css "--outline-core-button--secondary-disabled-.*--computed" packages/components/outline-core-button/css-variables
Length of output: 583

Script:
#!/bin/bash
# Correcting the script to search for the CSS variables definitions in files that likely contain 'css-variables' in their name.
rg --glob '*css-variables*' 'outline-core-button--secondary-disabled-.*--computed' packages/components/outline-core-button/
Length of output: 125

Script:
#!/bin/bash
# Searching for the CSS variable definitions within all CSS files in the `outline-core-button` directory.
rg 'outline-core-button--secondary-disabled-.*--computed' packages/components/outline-core-button/ -g '*.css'
Length of output: 4411
* 163-188: The `.tertiary` class and its pseudo-classes `:hover` and `:focus` are using computed CSS variables. Confirm that these variables are defined and that their values are computed correctly.

Verification successful

The verification script has successfully found the CSS variable definitions for the .tertiary class within the CSS files of the outline-core-button component. The variables are indeed defined and appear to be computed correctly, with fallbacks provided for each variable. This confirms that the CSS variables used in the .tertiary class and its pseudo-classes :hover and :focus are properly established in the codebase.
Scripts Executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Verify that the CSS variables for the .tertiary class are defined and computed correctly.
rg --type css "--outline-core-button--tertiary-.*--computed" packages/components/outline-core-button/css-variables
Length of output: 563

Script:
#!/bin/bash
# Adjusting the script to search for the CSS variables within CSS files of the outline-core-button component.
# Using fd to find CSS files within the outline-core-button directory and then using rg to search for the variables.
fd '.css$' packages/components/outline-core-button --exec rg -- "--outline-core-button--tertiary-.*--computed" {}
Length of output: 6631
* 191-210: The `.tertiary[aria-disabled='true']` selector and its `:focus` pseudo-class are using computed CSS variables for disabled state. Ensure that these variables are defined and that their values are computed correctly.

Verification successful

The CSS variables for the .tertiary[aria-disabled='true'] selector and its :focus pseudo-class are indeed defined in the vars-tertiary.css file within the packages/components/outline-core-button/src/css-variables/ directory. The variables are set with default values and fallbacks, ensuring that they are computed correctly.
Scripts Executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Verify that the CSS variables for the .tertiary[aria-disabled='true'] selector are defined and computed correctly.
rg --type css "--outline-core-button--tertiary-disabled-.*--computed" packages/components/outline-core-button/css-variables
Length of output: 581

Script:
#!/bin/bash
# Verify that the CSS variables for the .tertiary[aria-disabled='true'] selector are defined and computed correctly.
# Correcting the previous script by removing the double dashes before the pattern
rg -e "--outline-core-button--tertiary-disabled-.*--computed" packages/components/outline-core-button/css-variables
Length of output: 211

Script:
#!/bin/bash
# Attempting to find the correct location of the CSS variables file.
fd "css-variables" packages/components/outline-core-button
Length of output: 117

Script:
#!/bin/bash
# Now that we have the correct directory, let's search for the CSS variables within it.
rg -e "--outline-core-button--tertiary-disabled-.*--computed" packages/components/outline-core-button/src/css-variables/
Length of output: 2060
* 213-228: The `:host(.icon__button)` selector is applying `!important` to the border-radius properties. Confirm that this is necessary and that it doesn't override any other important styles unintentionally. * 230-244: The `.small`, `.medium`, and `.large` classes are using variables for font-size and line-height. Confirm that these variables are defined and that their values are set correctly.

Verification successful

The verification process has successfully identified the usage of the CSS variables --fs-sm, --fs-base, --fs-lg, --lh-sm, --lh-base, and --lh-lg within the CSS files of the outline-core-button directory. These variables correspond to the font sizes and line heights for the .small, .medium, and .large classes as mentioned in the review comment.
Scripts Executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Verify that the variables for button sizing are defined and set correctly.
rg --type css "--fs-.*" packages/components/outline-core-button/css-variables
rg --type css "--lh-.*" packages/components/outline-core-button/css-variables
Length of output: 979

Script:
#!/bin/bash
# Correcting the script to search for the CSS variables within the likely CSS files.
# Using `fd` to find the relevant CSS file that would contain the variables.
fd 'css-variables\.css$' packages/components/outline-core-button --exec rg --type css 'var$--fs-.*$'
fd 'css-variables\.css$' packages/components/outline-core-button --exec rg --type css 'var$--lh-.*$'
Length of output: 209

Script:
#!/bin/bash
# Search for any CSS files within the outline-core-button directory.
fd '\.css$' packages/components/outline-core-button --exec rg --type css 'var$--fs-.*$'
fd '\.css$' packages/components/outline-core-button --exec rg --type css 'var$--lh-.*$'
Length of output: 527

packages/documentation/outline-storybook/stories/components/outline-core-button.stories.mdx

packages/components/outline-core-button/docs/outline-core-button.mdx

packages/components/outline-core-button/src/outline-core-button.css

shaal

This is awesome, thank you!

glitchgirl · 2024-02-06T15:21:23Z

TODO:

Jake get free time
Jake write clear directions about what this changes so it feels less scary

coderabbitai

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between f13e5b9 and d1db38f.

Files ignored due to path filters (2)

package.json is excluded by: !**/*.json
yarn.lock is excluded by: !**/*.lock

Files selected for processing (1)

.yarnrc.yml (1 hunks)

Additional comments: 2

.yarnrc.yml (2)

1-1: Ensure the nodeLinker: node-modules setting aligns with the project's dependency management strategy, especially if transitioning from Yarn 2's Plug'n'Play to a traditional node_modules layout.

3-3: Verify the specified yarnPath points to the correct Yarn release version and file format for the project's needs. Consider potential impacts on CI/CD pipelines and local development environments.

coderabbitai

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between d1db38f and 3ce056d.

Files selected for processing (1)

.changeset/shaggy-ducks-cheat.md (1 hunks)

Files not reviewed due to errors (1)

.changeset/shaggy-ducks-cheat.md (Error: unable to parse review)

bardleb and others added 12 commits August 1, 2023 10:23

feat: outline-core-button WIP

4887050

Merge branch 'next' of https://github.com/phase2/outline into issue/o…

dd335e0

…utline-core-button

fix: update styles for slotted button

7ea6f10

fix: remove tailwind resets

4a5f2b1

Merge branch 'next' of https://github.com/phase2/outline into issue/o…

e105065

…utline-core-button

fix: linting

dc8a71c

fix: linting

c4f91e5

fix: adding full button markup in defaultSlot

eba5c8f

fix: fixed styling for all button variants, removed link variants

1825e37

Merge branch 'next' of https://github.com/phase2/outline into issue/o…

ea16ab4

…utline-core-button

fix: core button changes

7e1737f

fix(outline-core-link): Updating to utilize @phase2/outline-adopted-s…

3943a09

…tylesheets-controller.

himerus added Why: Reduce adoption friction Difficulty: Average Severity: High Needs Work Coding Standards A ticket related to improving or an issue with coding standards. labels Oct 16, 2023

coderabbitai bot reviewed Oct 16, 2023

View reviewed changes

packages/components/outline-core-link/src/outline-core-link.ts Outdated Show resolved Hide resolved

packages/components/outline-core-contained-element.ts Outdated Show resolved Hide resolved

packages/components/outline-core-contained-element.ts Outdated Show resolved Hide resolved

himerus added 2 commits October 16, 2023 09:27

chore(changeset): Adding changeset for outline-core-link updates.

ee19425

fix(outline-core-link): Update format.

c89b042

coderabbitai bot reviewed Oct 16, 2023

View reviewed changes

himerus marked this pull request as draft October 16, 2023 13:35

himerus marked this pull request as ready for review October 16, 2023 14:24

This comment was marked as resolved.

Sign in to view

himerus changed the title ~~Refactor of styles for outline-core-link~~ Wide refactor of various component best practices and tooling updates Oct 16, 2023

himerus marked this pull request as draft October 16, 2023 14:33

himerus added 2 commits November 8, 2023 09:22

fix(baseline): Update Storybook.

a9638ee

fix(baseline): Reorganization of documents.

0176860

coderabbitai bot reviewed Nov 8, 2023

View reviewed changes

fix(baseline): Update story for AI suggestion.

e6af1a3

coderabbitai bot reviewed Nov 8, 2023

View reviewed changes

himerus changed the title ~~Outline Octoberfest Fix-a-thon!!~~ Outline Fall/Winter Update!! Nov 28, 2023

fix(baseline): Simple updates.

e5fa0e5

coderabbitai bot reviewed Dec 5, 2023

View reviewed changes

himerus added 9 commits December 5, 2023 12:27

feat(outline-core-button): Tweaks for release prep.

da9f578

Merge branch 'next' into issue/outline-core-button

a30f3b6

feat(outline-core-button): Tweaks for release prep.

ba20a64

feat(outline-core-button): Tweaks for release prep.

5777a40

feat(outline-core-button): Release 0.0.1.

d8358c3

fix(baseline): Removing package-lock.json.

cdebe41

feat(outline-core-button): Tweaks for release prep.

e6a12ad

feat(outline-core-button): Tweaks for release prep.

56a7da6

feat(outline-core-button): Tweaks for release prep.

f13e5b9

coderabbitai bot reviewed Jan 18, 2024

View reviewed changes

Merge branch 'next' into feature/outline-core-link-updates

75942f6

shaal approved these changes Feb 6, 2024

View reviewed changes

himerus added 4 commits February 6, 2024 16:37

Merge branch 'next' into feature/outline-core-link-updates

c88172d

chore(tooling): Updated yarn.lock.

105ceb3

feat(tooling): Update yarn config.

50dce11

feat(tooling): Update Storybook.

d1db38f

coderabbitai bot reviewed Feb 15, 2024

View reviewed changes

chore(changeset): Adding Changeset.

3ce056d

coderabbitai bot reviewed Feb 15, 2024

View reviewed changes

himerus merged commit 9b5cfef into next Feb 15, 2024
10 checks passed

himerus deleted the feature/outline-core-link-updates branch February 15, 2024 16:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Outline Fall/Winter Update!! #426

Outline Fall/Winter Update!! #426

himerus commented Oct 16, 2023 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Oct 16, 2023 •

edited

Loading

netlify bot commented Oct 16, 2023 •

edited

Loading

coderabbitai bot commented Oct 16, 2023 •

edited

Loading

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

CodeRabbit Discord Community

coderabbitai bot left a comment

coderabbitai bot left a comment

socket-security bot commented Oct 16, 2023 •

edited

Loading

This comment was marked as resolved.

coderabbitai bot left a comment

coderabbitai bot left a comment

coderabbitai bot left a comment

coderabbitai bot left a comment

shaal left a comment

glitchgirl commented Feb 6, 2024

coderabbitai bot left a comment

coderabbitai bot left a comment

Outline Fall/Winter Update!! #426

Outline Fall/Winter Update!! #426

Conversation

himerus commented Oct 16, 2023 • edited by coderabbitai bot Loading

Summary by CodeRabbit

changeset-bot bot commented Oct 16, 2023 • edited Loading

🦋 Changeset detected

netlify bot commented Oct 16, 2023 • edited Loading

✅ Deploy Preview for outlinejs ready!

coderabbitai bot commented Oct 16, 2023 • edited Loading

Walkthrough

Changes

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

CodeRabbit Discord Community

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

socket-security bot commented Oct 16, 2023 • edited Loading

This comment was marked as resolved.

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

shaal left a comment

Choose a reason for hiding this comment

glitchgirl commented Feb 6, 2024

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

himerus commented Oct 16, 2023 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Oct 16, 2023 •

edited

Loading

netlify bot commented Oct 16, 2023 •

edited

Loading

coderabbitai bot commented Oct 16, 2023 •

edited

Loading

CodeRabbit Configration File (`.coderabbit.yaml`)

socket-security bot commented Oct 16, 2023 •

edited

Loading