Skip to content

feat(checkbox)!: migrate checkbox component to core tokens (CSS-99) #1465

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 49 commits into from
Oct 4, 2022
Merged

feat(checkbox)!: migrate checkbox component to core tokens (CSS-99) #1465

merged 49 commits into from
Oct 4, 2022

Conversation

yosevu
Copy link
Contributor

@yosevu yosevu commented Jun 29, 2022 •
edited
Loading

Description

This PR migrates the Checkbox component and styles to use core-tokens and includes:

  • Create spectrum and express theme styles
  • Moving skin.css styles to index.css
  • Updating the HTML examples and component description
  • Update Windows high contrast mode styles
  • Add locale-specific styles

How and where has this been tested?

  • How this was tested:
    • Tested locally referencing the Components batch XD file
    • Tested with VoiceOver on Safari
    • Tested WHCM with forced colors Chrome Emulation
    • Tested locale-specific styles by manually adding a locale attribute
  • Browser(s) and OS(s) this was tested with:
    • Chrome on macOS
    • Safari on macOS

Screenshots

Screen Shot 2022-07-19 at 8 57 13 AM

Screen Shot 2022-07-19 at 8 57 07 AM

Screen Shot 2022-07-19 at 8 57 02 AM

To-do list

- [ ] If my change impacts other components, I have tested to make sure they don't break.

  • If my change impacts documentation, I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • Windows high contrast mode styles make sense.
  • Spectrum theme-specific styles match design
  • Express theme-specific styles match design
  • --spectrum-checkbox-CJK-line-height is applied correctly.
    Test by adding lang attribute to a .spectrom-Checkbox-label element or the html element e.g. lang="ko".
  • This pull request is ready to merge.

@yosevu yosevu changed the title Yosevu/css 99 migrate checkbox button to core tokens feat(CSS-99 Checkbox): Migrate checkbox component to core tokens Jun 29, 2022
yosevu
yosevu commented Jun 29, 2022
View reviewed changes
yosevu
yosevu commented Jun 29, 2022
View reviewed changes
pfulton
pfulton reviewed Jul 1, 2022
View reviewed changes
pfulton
pfulton reviewed Jul 1, 2022
View reviewed changes
pfulton
pfulton reviewed Jul 1, 2022
View reviewed changes
pfulton
pfulton reviewed Jul 1, 2022
View reviewed changes
@yosevu yosevu force-pushed the yosevu/css-99-migrate-checkbox-button-to-core-tokens branch 13 times, most recently from 8280496 to 0f853ab Compare July 15, 2022 13:34
@yosevu yosevu force-pushed the yosevu/css-99-migrate-checkbox-button-to-core-tokens branch 4 times, most recently from b69fff5 to 9274de1 Compare July 18, 2022 13:21
@yosevu yosevu changed the title feat(CSS-99 Checkbox): Migrate checkbox component to core tokens feat(checkbox)!: Migrate checkbox component to core tokens (CSS-99) Jul 18, 2022
@yosevu yosevu changed the title feat(checkbox)!: Migrate checkbox component to core tokens (CSS-99) feat(checkbox)!: migrate checkbox component to core tokens (CSS-99) Jul 18, 2022
@yosevu yosevu force-pushed the yosevu/css-99-migrate-checkbox-button-to-core-tokens branch 3 times, most recently from bb10935 to fcfb79b Compare July 18, 2022 23:01
@yosevu yosevu marked this pull request as ready for review July 18, 2022 23:55
Yosevu Kilonzo and others added 23 commits October 4, 2022 11:26
@pfulton
fix: add paren to custom prop
c0e3dc0
@pfulton
fix: adjust disabled colors
3c1a3ea 
refactor: group styles

fix: update hover states

refactor: move active styles

refactor: update styles
@pfulton
refactor: update emphasized styles
fad41b2 
feat(wip): focus states

refactor: format long lines
@pfulton
refactor: update content colors
62af036 
refactor: update disabled variables

fix: add missing invalid active state

chore: remove skin.css

refactor: update highcontrast and focus states

refactor: organize styles

refactor: update checkmark variable naming

fix: update highcontrast variables

refactor: remove long line formatting
@pfulton
feat: add CJK-line-height
bb71669
@pfulton
docs: update checkbox component description
f4289e6
@pfulton
refactor: move hardcoded checkmark sizes to checkbox index
1a816a5
@pfulton
docs: update checkbox usage notes
4503149
@pfulton
fix: add --mod variables
6ce2b5c 
chore: remove invalid selector :focus-ring
@pfulton
refactor: abstract border-width variable
efa54cc
@pfulton
fix: add back :focus-ring
d132be4
@pfulton
fix: missing comma
a880de4
@pfulton
fix: separate checked and unchecked border-width
4f89444
@pfulton
chore: add spectrum-css/tokens dependency
95b188f
@pfulton
chore(checkbox): manually increase version number for beta
8fa6b80
@pfulton
chore(checkbox): bump version number due to faulty build
04caddd
@pfulton
feat: add indeterminate t-shirt size examples
e311564
@pfulton
fix: center checkmark and dash with flexbox
176e700
@pfulton
chore(checkbox): version bump after fixes
8c64250
@pfulton
chore(checkbox): version bump & update dependencies
76655cb
@pfulton
chore(checkbox): fix focus ring issues
91bba60
@GarthDB @pfulton
fix: cleaning up core tokens
b13eb17
@pfulton
chore(checkbox): use latest tokens dependency
1699121
@pfulton pfulton force-pushed the yosevu/css-99-migrate-checkbox-button-to-core-tokens branch from 3349630 to 1699121 Compare October 4, 2022 15:27
@github-actions github-actions bot temporarily deployed to pull request October 4, 2022 15:31 Inactive
@github-actions github-actions bot temporarily deployed to pull request October 4, 2022 15:43 Inactive
@pfulton pfulton merged commit 20b5917 into main Oct 4, 2022
@pfulton pfulton deleted the yosevu/css-99-migrate-checkbox-button-to-core-tokens branch October 4, 2022 17:25
bernhard-adobe added a commit that referenced this pull request Oct 12, 2022
@bernhard-adobe
chore: tokens 3.0.0 and merge branch 'main'
6dfc155 
* main: (53 commits)
  chore(release): release
  fix(checkbox): whcm focus states (#1527)
  chore(release): release
  feat(fieldlabel)!: migrate to core tokens (CSS-102) (#1476)
  chore(release): release
  feat(swatchgroup)!: migrate swatchgroup to core tokens (#1505)
  chore(release): release
  feat(swatch)!: migrate swatch to core tokens (#1501)
  chore(release): release
  fix(tabs): selection indicator scroll overflow border (#1513)
  chore(release): release
  feat(divider)!: migrate to core tokens
  chore(release): release
  refactor(checkbox): remove commented out code (#1524)
  chore(release): release
  feat(progresscircle)!: migrate to core tokens
  chore(release): release
  feat(checkbox)!: migrate checkbox component to core tokens (CSS-99) (#1465)
  chore(release): release
  fix(card): increase content area height when necessary
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@lazd lazd lazd left review comments

@lunarfusion lunarfusion lunarfusion left review comments

@pfulton pfulton pfulton approved these changes

@bernhard-adobe bernhard-adobe bernhard-adobe approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@yosevu @pfulton @bernhard-adobe @lazd @lunarfusion @GarthDB