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.

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

feat(button, fab): add component tokens #10358

Open
wants to merge 16 commits into
base: dev
Choose a base branch
from
Open

feat(button, fab): add component tokens #10358

wants to merge 16 commits into from
+582 −538

Conversation

alisonailea
Copy link
Contributor

@alisonailea alisonailea commented Sep 19, 2024 •
edited
Loading

Related Issue: #7180

Summary

Calcite Button

--calcite-button-background-color: Specifies the component's background color when appearance="solid" or appearance="outline-fill".
--calcite-button-border-color: Specifies the component's border color when it has appearance="outline" or appearance="outline-fill".
--calcite-button-corner-radius: Specifies the component's corner radius.
--calcite-button-text-color: Specifies the component's text color.

Calcite FAB

--calcite-fab-background-color: Specifies the component's text color.
--calcite-fab-border-color: Specifies the component's border color.
--calcite-fab-corner-radius: Specifies the component's corner radius.
--calcite-fab-shadow-color: Specifies the base color used to define the component's shadows. Must be in a three number rgb format. Example --calcite-fab-shadow-color: 0, 0, 0;.
--calcite-fab-text-color: Specifies the component's text color.

@alisonailea alisonailea self-assigned this Sep 19, 2024
@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Sep 19, 2024
@alisonailea alisonailea mentioned this pull request Sep 25, 2024
Open
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Oct 3, 2024

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions bot added Stale Issues or pull requests that have not had recent activity. and removed Stale Issues or pull requests that have not had recent activity. labels Oct 3, 2024
@alisonailea alisonailea added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Oct 7, 2024
@jcfranco
Copy link
Member

For consistency and according to the wiki, button needs stateful tokens.

@alisonailea
Copy link
Contributor Author

For consistency and according to the wiki, button needs stateful tokens.

That's not the case. State tokens are only for sub-components

@jcfranco jcfranco mentioned this pull request Oct 15, 2024
Open
@jcfranco
Copy link
Member

Synced up w/ @alisonailea and got clarification. The guidance doc has been updated, so we are good to proceed.

jcfranco
jcfranco requested changes Oct 18, 2024
View reviewed changes
Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

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

This is looking great, @alisonailea! 😎

packages/calcite-components/src/components/button/button.scss Outdated Show resolved Hide resolved
packages/calcite-components/src/components/button/button.scss Show resolved Hide resolved
packages/calcite-components/src/components/button/button.scss Outdated Show resolved Hide resolved
packages/calcite-components/src/components/button/button.e2e.ts Show resolved Hide resolved
@alisonailea alisonailea requested a review from jcfranco October 22, 2024 02:38
@jcfranco jcfranco changed the title feat(button): add component tokens feat(button, fab): add component tokens Oct 22, 2024
jcfranco
jcfranco approved these changes Oct 22, 2024
View reviewed changes
Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

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

Nice! This should be good to merge once the remaining comments are addressed. Thanks, @alisonailea! ✨💪✨

packages/calcite-components/src/components/fab/fab.scss Show resolved Hide resolved
packages/calcite-components/src/custom-theme/button.ts Show resolved Hide resolved
@alisonailea alisonailea mentioned this pull request Oct 25, 2024
Merged
@jcfranco jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Oct 30, 2024
@jcfranco jcfranco mentioned this pull request Oct 30, 2024
Closed
6 tasks
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Nov 8, 2024

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Nov 8, 2024
@alisonailea
chore(button): remove extraneous selectors
25900aa
@alisonailea
chore(button): merge duplicate selectors
59cb357
@alisonailea
chore(button): reorder selectors
3b09221 
:host
.class-selectors
:host([prop]) selectors
@includes
@Keyframes
@alisonailea
chore(button): rename internal variables
c56bb8e
@alisonailea
chore(button): sort style props
456d968
@alisonailea
chore(button): sort tailwind styles
653d882
@alisonailea
feat(button): add corner radius tokens
238dd4d
@alisonailea
feat(button): component tokens
5ea3e15 
add component token docs
simplify background color and border across appearance and kind
simplify alignment styles and border-radius
@alisonailea
chore(inline-editable): cancel-editing-button color control
0761c6e
@alisonailea
fix(button): transparent hover and focus
f578432
@alisonailea
test(button): passing tests
c43929c
@alisonailea
feat(button): simplify tokens
5f7c093
@alisonailea
test(button): add tests e2e storybook and demo pages
40c2452
@alisonailea
feat(fab): add component tokens
a188205 
started with just moving [rounded] over but then I just kept going
@alisonailea
chore(button): move disabled and keyframes to the bottom of the file …
a980bfc 
…per CSS conventions
@alisonailea
test(fab): add demo stories and e2e
6528b33
@alisonailea
Copy link
Contributor Author

Waiting on #10829 #10828 #10827

@alisonailea alisonailea removed the Stale Issues or pull requests that have not had recent activity. label Nov 21, 2024
@github-actions GitHub Actions
Copy link
Contributor

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Nov 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Elijbet Elijbet Elijbet left review comments

@jcfranco jcfranco jcfranco approved these changes

@eriklharper eriklharper Awaiting requested review from eriklharper

@driskull driskull Awaiting requested review from driskull

@macandcheese macandcheese Awaiting requested review from macandcheese

@benelan benelan Awaiting requested review from benelan benelan is a code owner

@anveshmekala anveshmekala Awaiting requested review from anveshmekala

@josercarcamo josercarcamo Awaiting requested review from josercarcamo

@aPreciado88 aPreciado88 Awaiting requested review from aPreciado88

Assignees

@alisonailea alisonailea

Labels
enhancement Issues tied to a new feature or request. pr ready for visual snapshots Adding this label will run visual snapshot testing. Stale Issues or pull requests that have not had recent activity.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@alisonailea @jcfranco @Elijbet