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(design-tokens): DLT-2004 typography and radius design tokens for button, input, select, tabs #467

Merged
merged 31 commits into from
Aug 29, 2024
Merged

feat(design-tokens): DLT-2004 typography and radius design tokens for button, input, select, tabs #467

merged 31 commits into from
Aug 29, 2024

Conversation

francisrupert
Copy link
Contributor

@francisrupert francisrupert commented Aug 22, 2024 •
edited
Loading

Component Design Tokens for button- and input-like components

high-five-knailed-it

🛠️ Type Of Change

  • Feature

📖 Jira Ticket

https://dialpad.atlassian.net/browse/DLT-2004

📖 Description

  • Created Design Tokens for Buttons and form elements. We're not (yet) creating design tokens for every component, though some definitely need them to further support Expressive Theming in both Vue and Figma components.
  • Applied them to CSS.
    • Button
    • Split Button
    • Input (text and textarea types)
    • Tabs
  • Emoji Picker impacted by a few pixels (thanks Percy). Adjusted those and corrected some style usage within — most especially color tokens.
  • Also did a little reordering and tweaking of markdown docs

📝 Checklist

For all PRs:

  • I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
  • I have reviewed my changes.
  • I have added all relevant documentation.
  • I have considered the performance impact of my change.

For all CSS changes:

  • I have used design tokens whenever possible.
  • I have considered how this change will behave on different screen sizes.
  • I have visually validated my change in light and dark mode.
  • I have used gap or flexbox properties for layout instead of margin whenever possible.

@francisrupert
init button component text styles
33c0090
@francisrupert
chore
06e070e
@francisrupert
typography tokens for buttons
72f337a
@francisrupert
figma text styles
a1d644c
@francisrupert
inputs typography tokens
4306804
@francisrupert
text styles for inputs and textareas
dbe024d
@francisrupert
figma text style connection
76eb9e2
@francisrupert
button radius
330f09d
@francisrupert
add button and inputs text styles
843fd27
@francisrupert
apply text style design token to button
5cdedd8
@francisrupert
apply radius design token to button
e37a76a
@francisrupert
correct border size token
c42b0bf
@francisrupert
remove unused property
01a0613
@francisrupert
slight reorder of input docs to match buttons
84b277d
@francisrupert
cleaner local css variable name
fedc4c2
@francisrupert
slight reorder of input docs
49b1943
@francisrupert
code well header column tweak
927b610
@francisrupert
applied design tokens to input
fe7ea86
@francisrupert
applied design tokens to select menu
939f8d6
@francisrupert
applied design tokens to select menu and input
7ff9596
@francisrupert
applied design tokens to button
affabab
@francisrupert
corrected rendered html
0149ef5
@francisrupert
tabs css reorg before adding button design tokens
657bf08
@francisrupert
searching ui tweaks
c4f8a53
@francisrupert
applied typography design tokens to tabs
5e3ef1e
@github-actions GitHub Actions
Copy link

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

@francisrupert francisrupert changed the title feat(design-tokens): typography and radius design tokens for button, input, select, tabs feat(design-tokens): DLT-2004 typography and radius design tokens for button, input, select, tabs Aug 23, 2024
@francisrupert francisrupert self-assigned this Aug 23, 2024
@francisrupert francisrupert added the visual-test-ready Add this tag when the PR is ready for visual test, to trigger GHA visual tests label Aug 23, 2024
@francisrupert francisrupert marked this pull request as ready for review August 23, 2024 20:03
francisrupert
francisrupert commented Aug 23, 2024
View reviewed changes
apps/dialtone-documentation/docs/.vuepress/baseComponents/CodeWellHeader.vue Outdated Show resolved Hide resolved
apps/dialtone-documentation/docs/.vuepress/baseComponents/tokens/AllTokens.vue Outdated Show resolved Hide resolved
apps/dialtone-documentation/docs/.vuepress/baseComponents/tokens/TokensBar.vue Outdated Show resolved Hide resolved
apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleHovercard.vue Outdated Show resolved Hide resolved
apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleModal.vue Outdated Show resolved Hide resolved
packages/dialtone-css/lib/build/less/components/input.less Show resolved Hide resolved
packages/dialtone-css/lib/build/less/components/tabs.less Outdated Show resolved Hide resolved
packages/dialtone-css/lib/build/less/dialtone.less Outdated Show resolved Hide resolved
packages/dialtone-css/lib/build/less/variables/sizes.less Outdated Show resolved Hide resolved
packages/dialtone-tokens/postcss/constants.cjs Outdated Show resolved Hide resolved
braddialpad
braddialpad reviewed Aug 28, 2024
View reviewed changes
Copy link
Contributor

@braddialpad braddialpad left a comment

Choose a reason for hiding this comment

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

Great changes thanks! I don't see any issues with the css changes you made. Couple of things related to the housekeeping.

apps/dialtone-documentation/docs/.vuepress/views/IconCatalog.vue Outdated Show resolved Hide resolved
apps/dialtone-documentation/docs/components/button.md Show resolved Hide resolved
@github-actions GitHub Actions
Copy link

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-467/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-467/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-467/

juliodialpad
juliodialpad approved these changes Aug 29, 2024
View reviewed changes
Copy link
Collaborator

@juliodialpad juliodialpad left a comment

Choose a reason for hiding this comment

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

I don't have any concern, everything looks good, thanks!

@francisrupert francisrupert merged commit a0c10a2 into staging Aug 29, 2024
13 checks passed
@francisrupert francisrupert deleted the feat/button-component-design-tokens branch August 29, 2024 18:17
juliodialpad pushed a commit that referenced this pull request Sep 3, 2024
@semantic-release-bot
chore(release): NO-JIRA dialtone/v9.72.0
5a16e49 
# [9.72.0](dialtone/v9.71.0...dialtone/v9.72.0) (2024-09-03)

### Features

* **Design Tokens:** DLT-2004 typography and radius design tokens for button, input, select, tabs ([#467](#467)) ([a0c10a2](a0c10a2))
juliodialpad pushed a commit that referenced this pull request Sep 3, 2024
@semantic-release-bot
chore(release): NO-JIRA dialtone-css/v8.43.0
c7368d9 
# [8.43.0](dialtone-css/v8.42.3...dialtone-css/v8.43.0) (2024-09-03)

### Features

* **Design Tokens:** DLT-2004 typography and radius design tokens for button, input, select, tabs ([#467](#467)) ([a0c10a2](a0c10a2))
juliodialpad pushed a commit that referenced this pull request Sep 3, 2024
@semantic-release-bot
chore(release): NO-JIRA dialtone-tokens/v1.36.0
1f234cc 
# [1.36.0](dialtone-tokens/v1.35.0...dialtone-tokens/v1.36.0) (2024-09-03)

### Features

* **Design Tokens:** DLT-2004 typography and radius design tokens for button, input, select, tabs ([#467](#467)) ([a0c10a2](a0c10a2))
juliodialpad pushed a commit that referenced this pull request Sep 3, 2024
@semantic-release-bot
chore(release): NO-JIRA dialtone-vue2/v2.158.0
b6becd9 
# [2.158.0](dialtone-vue2/v2.157.1...dialtone-vue2/v2.158.0) (2024-09-03)

### Features

* **Design Tokens:** DLT-2004 typography and radius design tokens for button, input, select, tabs ([#467](#467)) ([a0c10a2](a0c10a2))
juliodialpad pushed a commit that referenced this pull request Sep 3, 2024
@semantic-release-bot
chore(release): NO-JIRA dialtone-vue3/v3.151.0
ba6a599 
# [3.151.0](dialtone-vue3/v3.150.1...dialtone-vue3/v3.151.0) (2024-09-03)

### Features

* **Design Tokens:** DLT-2004 typography and radius design tokens for button, input, select, tabs ([#467](#467)) ([a0c10a2](a0c10a2))
ninamarina pushed a commit that referenced this pull request Sep 3, 2024
@francisrupert @ninamarina
feat(design-tokens): DLT-2004 typography and radius design tokens for…
ffbdaf5 
… button, input, select, tabs (#467)
ninamarina pushed a commit that referenced this pull request Sep 3, 2024
@semantic-release-bot @ninamarina
chore(release): NO-JIRA dialtone/v9.72.0
f93c3aa 
# [9.72.0](dialtone/v9.71.0...dialtone/v9.72.0) (2024-09-03)

### Features

* **Design Tokens:** DLT-2004 typography and radius design tokens for button, input, select, tabs ([#467](#467)) ([a0c10a2](a0c10a2))
ninamarina pushed a commit that referenced this pull request Sep 3, 2024
@semantic-release-bot @ninamarina
chore(release): NO-JIRA dialtone-css/v8.43.0
d08f978 
# [8.43.0](dialtone-css/v8.42.3...dialtone-css/v8.43.0) (2024-09-03)

### Features

* **Design Tokens:** DLT-2004 typography and radius design tokens for button, input, select, tabs ([#467](#467)) ([a0c10a2](a0c10a2))
ninamarina pushed a commit that referenced this pull request Sep 3, 2024
@semantic-release-bot @ninamarina
chore(release): NO-JIRA dialtone-tokens/v1.36.0
0ff58dc 
# [1.36.0](dialtone-tokens/v1.35.0...dialtone-tokens/v1.36.0) (2024-09-03)

### Features

* **Design Tokens:** DLT-2004 typography and radius design tokens for button, input, select, tabs ([#467](#467)) ([a0c10a2](a0c10a2))
ninamarina pushed a commit that referenced this pull request Sep 3, 2024
@semantic-release-bot @ninamarina
chore(release): NO-JIRA dialtone-vue2/v2.158.0
e43e9e7 
# [2.158.0](dialtone-vue2/v2.157.1...dialtone-vue2/v2.158.0) (2024-09-03)

### Features

* **Design Tokens:** DLT-2004 typography and radius design tokens for button, input, select, tabs ([#467](#467)) ([a0c10a2](a0c10a2))
ninamarina pushed a commit that referenced this pull request Sep 3, 2024
@semantic-release-bot @ninamarina
chore(release): NO-JIRA dialtone-vue3/v3.151.0
0e0a46c 
# [3.151.0](dialtone-vue3/v3.150.1...dialtone-vue3/v3.151.0) (2024-09-03)

### Features

* **Design Tokens:** DLT-2004 typography and radius design tokens for button, input, select, tabs ([#467](#467)) ([a0c10a2](a0c10a2))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@braddialpad braddialpad braddialpad left review comments

@juliodialpad juliodialpad juliodialpad approved these changes

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

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

Assignees

@francisrupert francisrupert

Labels
visual-test-ready Add this tag when the PR is ready for visual test, to trigger GHA visual tests
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@francisrupert @braddialpad @juliodialpad