Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[rfc|feature branch] Spectrum CSS 3.0.0 releases and '[dir="rtl|ltr"]' #754

Merged
merged 3 commits into from
Jul 24, 2020

Conversation

Westbrook
Copy link
Contributor

Description

Spectrum CSS is getting close to a v3.0.0 release of all of its components and this branch should be able to serve as a base for testing out individual package upgrades.

  • add a "base" package that vends SpectrumMixin and SpectrumElement, very open to alternate naming conventions if you have them.
    • adds public shadowRoot!: ShadowRoot; to the element as we currently use shadow DOM in all of our elements and it's a pain to test for it in TS all the time
    • add a connectedCallback() that queries document direction and then applies it to the element tag so that elements extending from his can have an [dir="rtl|ltr"] selector to leverage in their styles
  • extends the Spectrum CSS processing to include [dir="rtl|ltr"] selectors in the output by appending them to the host selector (by default they are included as "context" selectors the director corollary of which in shadow DOM are not available cross-browser)
  • exemplifies sp-actionbar as a very simple upgrade (just the version bump)
  • exemplifies sp-checkbox as a more complex upgrade (leverages mixins and requires DOM updates, etc.)

I'm gonna work with the Spectrum CSS team and catch up on how they're documenting the lack of support for dir="auto" in this update, as we'll need to include matching instructions in our docs so that users don't fall into any traps there. I'll also confirm whether the team is targeting any other specifically breaking changes (e.g. t-shirt sizes) before moving these releases to stable.

Related Issue

related to #477
related to #513
related to #543
related to #669
related to #739

Motivation and Context

Need to keep up with out source material

How Has This Been Tested?

  • snapshots for the effected elements have been updated
  • hopefully visual regressions "just work" 🤞

Types of changes

  • New feature (non-breaking change which adds functionality)

Checklist:

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@Westbrook Westbrook force-pushed the westbrook/base branch 5 times, most recently from 84ff0e1 to 9cd027d Compare July 19, 2020 15:46
@Westbrook Westbrook force-pushed the westbrook/base branch 6 times, most recently from 1c70136 to 7febd88 Compare July 24, 2020 15:50
@Westbrook Westbrook changed the base branch from main to spectrum-css-3 July 24, 2020 19:28
packages/base/README.md Show resolved Hide resolved
packages/base/package.json Show resolved Hide resolved
packages/base/package.json Show resolved Hide resolved
@@ -17,7 +17,7 @@ module.exports = {
name: 'checkbox',
host: {
selector: '.spectrum-Checkbox',
shadowSelector: '#root',
// shadowSelector: '#root',
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Actually remove this.

Copy link
Collaborator

@andrewhatran andrewhatran left a comment

Choose a reason for hiding this comment

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

Lgtm!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants