Skip to content

RC #391#392

Merged
rmenner merged 2 commits into
mainfrom
rc/391
Jan 29, 2026
Merged

RC #391#392
rmenner merged 2 commits into
mainfrom
rc/391

Conversation

@jordanjones243

@jordanjones243 jordanjones243 commented Jan 28, 2026

Copy link
Copy Markdown
Contributor

Alaska Airlines Pull Request

Checklist can be skipped because this PR just contains doc changes - @jordanjones243

Review Checklist:

  • My update follows the CONTRIBUTING guidelines of this project
  • I have performed a self-review of my own update
RC Checklist

Testing Checklist:

Browsers

Browsers Support Guide

Dev demo link

Android

  • Chrome
  • Firefox

iOS

  • Chrome
  • Firefox
  • Safari

Desktop

  • Chrome
  • Firefox
  • Safari
  • Edge

Scenarios

  • Validated linked issues with issue reporting team
  • Test coverage report review

Framework playground

  • Next React
  • SvelteKit

**By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.**

Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.

Thank you for your submission!

-- Auro Design System Team

Summary by Sourcery

Refine auro-button documentation structure and demos while adding targeted API and styling examples.

Enhancements:

  • Tighten JSDoc annotations on AuroButton for clearer custom element metadata and property documentation.
  • Align docs and examples with current appearance/inverse and tabindex/tIndex guidance, deprecations, and naming conventions.
  • Add new demo examples showing usage of CSS shadow parts and refined shape/size examples for auro-button.

Documentation:

  • Clarify and simplify index and README descriptions and usage guidance for auro-button, including custom element registration details.
  • Reorganize and expand API documentation with focused sections for properties, attributes, slots, CSS shadow parts, accessibility, and common usage patterns.
  • Move nonessential and advanced examples from the index page into the API docs, keeping the landing page minimal and example-light.
  • Document CSS variable and token-based customization options for restyling the component.

@jordanjones243 jordanjones243 self-assigned this Jan 28, 2026
@jordanjones243
jordanjones243 requested a review from a team as a code owner January 28, 2026 23:05
@jordanjones243 jordanjones243 linked an issue Jan 28, 2026 that may be closed by this pull request
@sourcery-ai

sourcery-ai Bot commented Jan 28, 2026

Copy link
Copy Markdown
Contributor

Reviewer's Guide

Refactors auro-button documentation to separate minimal landing-page content from detailed API usage, expands and reorganizes API examples (including shape, loading, accessibility, and CSS parts), improves descriptions and custom registration guidance, and slightly updates component JSDoc without changing runtime behavior.

Updated class diagram for AuroButton component

classDiagram
  class AuroButton {
    <<customElement>>
    +string appearance
    +boolean autofocus
    +boolean disabled
    +boolean fluid
    +boolean formAssociated
    +string layout
    +boolean loading
    +string loadingText
    +boolean onDark
    +string shape
    +string size
    +boolean static
    +string tabindex
    +string tIndex
    +string title
    +string type
    +string value
    +string variant
    +static void register(name)
  }

  class AuroElement {
  }

  AuroButton --|> AuroElement
Loading

File-Level Changes

Change Details Files
Simplify the main demo/index and docs index pages to a minimal description and single basic example, pushing all detailed usage content into the API docs.
  • Replace the old maintenance warning in demo and docs index templates with a new note emphasizing keeping index content minimal and moving extra examples to API docs.
  • Rename headings like "Auro-Button use cases" to "Use Cases" and add an explicit "Example(s)" section with a single basic example accordion.
  • Remove the long list of visual, state, shape, variant, and functional examples from the index templates so they can be hosted in the API docs instead.
demo/index.md
docs/partials/index.md
Reorganize and significantly expand the API documentation to cover properties/attributes, shapes, sizes, states, slot usage, ARIA patterns, CSS shadow parts, and functional examples in a more structured way.
  • Introduce new sectional structure in docs/partials/api.md, including Property & Attribute Examples, Slot Examples, CSS Shadow Part Examples, and Common Usage Patterns.
  • Add or rewire API example includes to use new example files (e.g., inverse.html, disabled-inverse.html, static-inverse.html, size.html, shape-rounded.html, fluid.html, loading-inverse.html, pass-function.html, do-and-dont.html, aria-label.html, aria-labeledby.html, part_button.html, part_link.html, part_content-wrapper.html, part_text.html, part_loader.html, toggled-text.html, right-align.html).
  • Clarify attribute behavior with explanatory text (tabindex vs tIndex, inverse appearance, static, shape variants, fluid, loading, right-aligned toggle text) and regroup examples under logical headings (Property & Attribute Examples, Slot Examples, ARIA Support, CSS Shadow Part Examples, Common Usage Patterns).
  • Move icon support, ARIA guidance, and do/don't guidance from the index into the API page with better headings and explanations.
  • Add a new top-level description paragraph in docs/api.md explaining what AuroButton is and refine the property table entries for onDark, shape, and size, removing redundant entries for type and variant that are now covered elsewhere.
docs/partials/api.md
docs/api.md
Improve high-level component description, custom registration guidance, and remove outdated or redundant README content.
  • Update the short component description in docs/partials/description.md to a clearer plain-language explanation of auro-button, and propagate that into README.md and demo/index.md via generated-content blocks.
  • Replace the placeholder customRegistration partial with a real code sample that imports the class and calls AuroButton.register('custom-button'), along with explanatory text that both auro-button and custom-button can coexist.
  • Trim older, less relevant README guidance (multi-button support and related WebCore stylesheet notes) while keeping responsive/reverse information.
  • Ensure the README custom registration section now shows the new example and explanation via the updated partial.
docs/partials/description.md
docs/partials/customRegistration.md
docs/partials/readmeAddlInfo.md
README.md
Align component-level JSDoc with the new documentation structure and clarify some property annotations without altering component behavior.
  • Replace the long JSDoc property list on the AuroButton class with a concise class description and @CustomElement tag, moving specific property annotations for type and variant into their respective property definitions.
  • Adjust JSDoc comments for type and variant to be more descriptive and consistent (e.g., clarify that type matches HTML5 button spec and list variant options).
  • Remove the @csspart icon JSDoc entry, reflecting that icon is now documented via slot and part-based styling examples rather than a dedicated csspart.
  • Clarify the register(name) method JSDoc param description to "the name of the element that you want to register."
src/auro-button.js
Add new example HTML files to demonstrate styling via CSS shadow parts and shape/size combinations while removing older or redundant example files and internal docs.
  • Create new apiExamples files for ::part usage (part_button.html, part_link.html, part_content-wrapper.html, part_text.html, part_loader.html) showing how to restyle button, link, content wrapper, text, and loader areas via CSS parts.
  • Add shape-rounded.html to illustrate rounded buttons across all t-shirt sizes.
  • Delete obsolete or superseded example files such as iconButtons.html, loadingText.html, roundedTextOnly.html, roundedTextWithIcon.html, and shape.html and remove references to them from the docs.
  • Remove older design/figma docs and an obsolete WCA script file that are no longer needed with the new documentation flow.
apiExamples/part_button.html
apiExamples/part_link.html
apiExamples/part_content-wrapper.html
apiExamples/part_text.html
apiExamples/part_loader.html
apiExamples/shape-rounded.html
apiExamples/iconButtons.html
apiExamples/loadingText.html
apiExamples/roundedTextOnly.html
apiExamples/roundedTextWithIcon.html
apiExamples/shape.html
docs/design-notes.md
docs/figma.md
scripts/wca/auro-button.js

Assessment against linked issues

Issue Objective Addressed Explanation
#391 Update documentation to clearly describe and demonstrate circle and square button shapes.
#391 Refactor and update auro-button documentation (README, index, API docs, examples) to align with the latest documentation standards and structure.

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've found 1 issue, and left some high level feedback:

  • In docs/api.md the properties table no longer lists the type and variant properties (even though they are still documented in JSDoc and used by the component); consider restoring rows for these so the API reference stays complete.
  • The methods table in docs/api.md has lost the register method entry in this refactor; consider adding the method back into the table so consumers can still discover the custom-registration API from the main reference.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- In docs/api.md the properties table no longer lists the `type` and `variant` properties (even though they are still documented in JSDoc and used by the component); consider restoring rows for these so the API reference stays complete.
- The methods table in docs/api.md has lost the `register` method entry in this refactor; consider adding the method back into the table so consumers can still discover the custom-registration API from the main reference.

## Individual Comments

### Comment 1
<location> `docs/partials/api.md:342-351` </location>
<code_context>
 </auro-accordion>

-## Fluid
+#### Aria Labelledby

-In the following example see how the `fluid` attributes alters the shape of the button to be full width of its parent container.
+The component supports both the `aria-labelledby` attribute for accessibility.

 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fluid.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/aria-labeledby.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>

 <auro-accordion alignRight>
   <span slot="trigger">See code</span>

-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fluid.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/aria-labeledby.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->

</code_context>

<issue_to_address>
**suggestion (typo):** Align spelling of “labelled/labeled” with the `aria-labelledby` attribute for consistency.

The heading, example filename, and attribute currently use three different spellings. Please standardize them to match the actual attribute name (`aria-labelledby`), including the example file (`aria-labelledby.html`).
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Comment thread docs/partials/api.md
@rmenner
rmenner merged commit e5d9259 into main Jan 29, 2026
19 of 20 checks passed
@rmenner
rmenner deleted the rc/391 branch January 29, 2026 00:42
@github-actions

Copy link
Copy Markdown

🎉 This PR is included in version 12.3.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

@github-actions github-actions Bot added the released Completed work has been released label Jan 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

released Completed work has been released semantic-status: perf

Projects

None yet

Development

Successfully merging this pull request may close these issues.

RC 2026-01-28

4 participants