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: Blade Visual Refresh 💅🏼 #1856

Merged
merged 118 commits into from
Jan 24, 2024
Merged

feat: Blade Visual Refresh 💅🏼 #1856

merged 118 commits into from
Jan 24, 2024

Conversation

saurabhdaware
Copy link
Member

@saurabhdaware saurabhdaware commented Nov 30, 2023 •
edited by kamleshchandnani
Loading

TODOs

  • Typography (font-family change, tokens, components, internal component migration)
  • Elevations (feat(Rebranding / Elevations): add elevation tokens #1870)
  • Colors
  • Component Migrations (for Homepage)
    • Buttons and Links
    • Counter, Badge, Indicator, Tag
    • Card
    • Carousel
    • Collapsible
    • TabsIcons
    • Accordion
    • BottomSheet
    • Modal
    • ListView
    • Spinner
    • Divider
    • ProgressBar
    • Icons
    • Tooltip
  • Codemod
  • Changeset with migration guide
  • Pray 🙏🏼
  • Release

Sanity Check before Release

  • Everything that is deprecated is removed
  • Chromatic UI Snapshot Changes are as expected
  • Things load on React Native
  • Documentation is updated as per new changes in components
  • We've run codemod on frontend-website once to see changes

@saurabhdaware
feat(Rebranding / Typography): font-family changes (#1804)
a9ca50d 
* feat: add fonts file and css

* feat: add fonts to files

* feat: add fonts export

* feat: add lighter font

* add display swap for tasa

* feat: change font family tokens

* feat: add heading font family for native

* feat: change font for storybook

* feat: add fonts from csb

* feat: use inter variable font

* feat: generate razorpay's latin fonts

* fix: unicode range

* refactor: remove unused fonts

* fix: standardise font file names

* fix: blade-extra name
@saurabhdaware
feat(Rebranding / Typography): typography token changes (#1811)
d62d9ba 
* feat: add fonts file and css

* feat: add fonts to files

* feat: add fonts export

* feat: add lighter font

* add display swap for tasa

* feat: change font family tokens

* feat: add heading font family for native

* feat: change font-size token

* feat: change font for storybook

* feat: add fonts from csb

* feat: add line-height, letter-spacing tokens

* feat: change font-weight token

* feat: change font-weight tokens

* feat: use inter variable font

* feat: generate razorpay's latin fonts

* fix: unicode range

* refactor: remove unused fonts

* feat: update typography tokens
@saurabhdaware
feat(Rebranding / Typography): Update Typography Components (#1820)
c79d17e 
* feat: add fonts file and css

* feat: add fonts to files

* feat: add fonts export

* feat: add lighter font

* add display swap for tasa

* feat: change font family tokens

* feat: add heading font family for native

* feat: change font-size token

* feat: change font for storybook

* feat: add fonts from csb

* feat: add line-height, letter-spacing tokens

* feat: change font-weight token

* feat: change font-weight tokens

* fix: remove additional styles

* feat: migrate Display, remove Title

* feat: add letter-spacing support

* feat: migrate Heading to new typescale

* feat: remove subheading variant

* feat(Code): migrate Code component to new spacings

* fix: Title instances

* feat: use inter variable font

* feat: generate razorpay's latin fonts

* fix: unicode range

* refactor: remove unused fonts

* feat: update typography tokens

* feat: update as per new tokens

* feat: add medium fontWeight in Text component

* fix: remove letterSpacing prop, fix font family of heading

* fix: storybook font size

* fix: storybook headings
@saurabhdaware
feat(Rebranding / Typography): Blade Internal Component Migrations (#…
0970a7b 
…1822)

* feat: add fonts file and css

* feat: add fonts to files

* feat: add fonts export

* feat: add lighter font

* add display swap for tasa

* feat: change font family tokens

* feat: add heading font family for native

* feat: change font-size token

* feat: change font for storybook

* feat: add fonts from csb

* feat: add line-height, letter-spacing tokens

* feat: change font-weight token

* feat: change font-weight tokens

* fix: remove additional styles

* feat: migrate Display, remove Title

* feat: add letter-spacing support

* feat: migrate Heading to new typescale

* feat: remove subheading variant

* feat(Code): migrate Code component to new spacings

* fix: Title instances

* feat: migrate simpler changes

* feat: resolve broken changes

* feat: ignore amountTokens changes

* feat: use inter variable font

* feat: generate razorpay's latin fonts

* fix: unicode range

* refactor: remove unused fonts

* feat: update typography tokens

* feat: update as per new tokens

* fix: broke components after token change

* feat: add medium fontWeight in Text component

* fix: remove letterSpacing prop, fix font family of heading

* fix: storybook font size

* fix: table bold text instances
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Nov 30, 2023 •
edited
Loading

🦋 Changeset detected

Latest commit: 7827f17

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@razorpay/blade Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@codesandbox-ci CodeSandbox CI
Copy link

codesandbox-ci bot commented Nov 30, 2023 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 7827f17:

Sandbox Source
razorpay/blade: basic Configuration

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Nov 30, 2023 •
edited
Loading

✅ PR title follows Conventional Commits specification.

saurabhdaware and others added 5 commits December 6, 2023 12:58
@saurabhdaware @snitin315
docs(Rebranding / Typography): Add documentation changes (#1866)
f2ca3f2 
* docs: add installation steps for web and figma to typography token

* docs: web font guide

* feat: add Inter font for RN

* feat: add lato back

* add supported fonts for rn

* feat: add fonts to react native

* fix: remove lato

* feat: add fonts react native zip

* docs: add docs for react native

* feat: add zip and fix TASA name

* fix: font download link

* Update packages/blade/docs/guides/Installation.stories.mdx

Co-authored-by: Nitin Kumar <snitin315@gmail.com>

* fix: update links and zip in documentation

* fix: ipdate documentation link

---------

Co-authored-by: Nitin Kumar <snitin315@gmail.com>
@saurabhdaware @snitin315
fix(Rebranding / Typography): snapshots (#1867)
9d382d6 
* docs: add installation steps for web and figma to typography token

* docs: web font guide

* feat: add Inter font for RN

* feat: add lato back

* add supported fonts for rn

* feat: add fonts to react native

* fix: remove lato

* feat: add fonts react native zip

* docs: add docs for react native

* feat: add zip and fix TASA name

* fix: font download link

* Update packages/blade/docs/guides/Installation.stories.mdx

Co-authored-by: Nitin Kumar <snitin315@gmail.com>

* fix: update links and zip in documentation

* fix: ipdate documentation link

* fix: snapshots

* fix: remaining tests

* fix: linting issue

* fix: size limit of button

---------

Co-authored-by: Nitin Kumar <snitin315@gmail.com>
@saurabhdaware
feat(Rebranding / Elevations): add elevation tokens (#1870)
6696629 
* feat: add elevations for web

* set argTypes

* feat: add rn values

* fix: remove unnecessary props

* fix: web token value for high raised

* fix: adjust shadows better for android and ios
@saurabhdaware
fix: master conflicts
c5a9f30
@saurabhdaware
fix: merge conflicts
f4c4be4
@bundlemon BundleMon
Copy link

bundlemon bot commented Dec 13, 2023

BundleMon

Files updated (12)
Status Path Size Limits
✅ Web Components
build/components/index.production.web.js
 330.11KB (+75B +0.02%) -
✅ CSS Theme Tokens
build/css/bankingThemeDarkMobile.css
 4.55KB (+39B +0.84%) -
✅ CSS Theme Tokens
build/css/bankingThemeLightMobile.css
 4.56KB (+38B +0.82%) -
✅ CSS Theme Tokens
build/css/paymentThemeLightMobile.css
 4.54KB (+38B +0.82%) -
✅ CSS Theme Tokens
build/css/paymentThemeDarkMobile.css
 4.57KB (+35B +0.75%) -
✅ CSS Theme Tokens
build/css/bankingThemeDarkDesktop.css
 4.55KB (+32B +0.69%) -
✅ CSS Theme Tokens
build/css/bankingThemeLightDesktop.css
 4.56KB (+31B +0.67%) -
✅ CSS Theme Tokens
build/css/paymentThemeLightDesktop.css
 4.55KB (+31B +0.67%) -
✅ CSS Theme Tokens
build/css/paymentThemeDarkDesktop.css
 4.57KB (+29B +0.62%) -
✅ React Native Tokens
build/tokens/index.native.js
 38.38KB (+26B +0.07%) -
✅ Web Tokens
build/tokens/index.production.web.js
 42.21KB (-25B -0.06%) -
✅ React Native Components
build/components/index.native.js
 187KB (-42B -0.02%) -
Unchanged files (2)
Status Path Size Limits
✅ Web Utils
build/utils/index.production.web.js
 3.38KB -
✅ React Native Utils
build/utils/index.native.js
 2.27KB -

Total files change +307B +0.05%

Final result: ✅

View report in BundleMon website ➡️

Current branch size history | Target branch size history

rzpcibot and others added 15 commits December 14, 2023 16:32
@rzpcibot
feat(tokens): add new tokens (#1873)
404a7b0
@saurabhdaware
fix: merge master
ab70a9d
@saurabhdaware
fix: conflicts
59ab91a
@saurabhdaware
feat: remove paymentTheme and bankingTheme files and instances (#1882)
c5bba5b
@rzpcibot @kamleshchandnani
feat(tokens): add new tokens (#1885)
e5dc3ab 
Co-authored-by: kamleshchandnani <kamlesh.chandnani@gmail.com>
@kamleshchandnani
Merge branch 'master' of github.com:razorpay/blade into rebranding/ma…
eac1f07 
…ster
@kamleshchandnani
fix: update opacity tokens
1921935
@rzpcibot @kamleshchandnani
feat(tokens): add new tokens (#1891)
d25ae19 
Co-authored-by: kamleshchandnani <kamlesh.chandnani@gmail.com>
@kamleshchandnani
fix: ignore elevation tokens
eb7dda9
@kamleshchandnani
Merge branches 'rebranding/master' and 'rebranding/master' of github.…
2f4a909 
…com:razorpay/blade into rebranding/master
@anuraghazra @rzpcibot @saurabhdaware
feat: rebrand Button, Link, Divider, List, Text (#1881)
f6084c0 
* feat(tokens): add new tokens

* fix: opacity values

* fix: global colors types

* feat(theme.ts): add color types

* fix: optional values in colors type

* feat: export bladeTheme

* refactor: rename contrast type to emphasis

* chore: revive storybook

* refactor: remove paymentTheme and bankingTheme

* feat: remove getThemeTokens function

* chore: typesafe getIn

* fix: remove ash gray scale type

* chore: added divider component

* chore: update list components

* chore: update list item colors

* chore: update base link

* chore: finalize link

* chore: update button tokens

* chore: cleanup

* chore: update

* chore: update hover colors

---------

Co-authored-by: rzpcibot <tools+cibot@razorpay.com>
Co-authored-by: saurabhdaware <saurabh.daware@razorpay.com>
@saurabhdaware @rzpcibot @anuraghazra
feat(Rebranding / Components): small component migrations (#1886)
be0100a 
Co-authored-by: rzpcibot <tools+cibot@razorpay.com>
Co-authored-by: anuraghazra <anurag.hazra@razorpay.com>
@rzpcibot @kamleshchandnani
feat(tokens): add new tokens (#1893)
6340a33 
Co-authored-by: kamleshchandnani <kamlesh.chandnani@gmail.com>
@snitin315
feat: rebrand Tooltip (#1887)
3340768
@saurabhdaware
fix(Rebranding / tsconfig): fix typechecks and build (#1892)
3b135a6
anuraghazra and others added 26 commits January 11, 2024 16:07
@anuraghazra
refactor(blade): rebrand skeleton (#1935)
a1fbac3 
* chore: rebrand skeleton

* chore: update skeleton tests

* chore: reexport

* chore: update snaps
@chaitanyadeorukhkar
refactor: rebrand Input components (#1960)
f33ca90
@snitin315
chore: remove razorsharp from workspace packages (#1953)
b0e37d8
@anuraghazra
refactor(blade): rebrand Alert (#1931)
5c723ec 
* refactor: rebrand alert

* chore: update alert tests

* chore: update

* chore: update test

* chore: update

* chore: reexort

* chore: update base link colors

* chore: update alignment

* chore: update alignment

* chore: update tsconfig

* chore: update snaps

* chore: update tests

* chore: fix tsconfig

* chore: update type
@snitin315
refactor!: rebrand Chip & ChipGroup components (#1948)
5fc8ed0
@snitin315
refactor: move component wise codemod logic into separate files (#1955)
40dd304
@anuraghazra
feat(blade): rebranding whitelabel fix (#1959)
856f56d
@snitin315
refactor: rebrand SpotlightPopoverTour (#1952)
1dd8b43
@saurabhdaware
feat(Rebranding / Dropdown): Dropdown and ActionList rebranding chang…
1bce840 
…es (#1938)

* fix: remove surfaceLevel

* fix: actionlistitem colors

* fix: Dropdown colors

* feat: remove deprecated onDismiss

* fix: hover color on actionlistitem

* fix: Amount size in baseheader

* feat: add to rebranded components

* fix: chevron color

* fix: revert tsconfig

* fix: remove surfaceLevel prop from stories

* fix: chevron icon color

* fix: snapshots
@kamleshchandnani
Merge branches 'rebranding/master' and 'rebranding/master' of github.…
57931bd 
…com:razorpay/blade into rebranding/master
@anuraghazra
fix(blade): rebranded button text color (#1977)
af8bbe4 
* chore: update tokens

* chore: update snaps
@kamleshchandnani
fix: update token
e62155e
@kamleshchandnani
Merge branches 'rebranding/master' and 'rebranding/master' of github.…
d2d3a0c 
…com:razorpay/blade into rebranding/master
@anuraghazra
refactor(blade): rebrand Table (#1973)
c755812 
* chore: rebrand tablebody,footer,header,toolbar

* chore: fix focus ring

* chore: change icon color

* chore: remove surface level

* chore: update snaps

* chore: minor

* chore: add back backgroundColor prop

* chore: update snaps

* chore: update table background color

* chore: review comments

* chore: update snaps

* chore: update story
@anuraghazra
chore: fix rebranded component stories (#1979)
a839712
@chaitanyadeorukhkar
Merge remote-tracking branch 'origin/master' into rebranding/master
f7e6338
@snitin315
refactor: add codemod for Table & Spinner (#1976)
cc209df
@anuraghazra
chore(blade): remove backgroundColor prop from table (#1984)
c96858b
@snitin315
feat: update the color prop for Amount (#1980)
1a1e72b
@anuraghazra
chore(blade): fix rebranded ts checks & tests (#1983)
36c708a
@anuraghazra
chore(blade): rebranded storybook changes (#1982)
1254a0c
@chaitanyadeorukhkar @anuraghazra
fix: remaining rebranded stories (#1981)
26828b9 
Co-authored-by: anuraghazra <anurag.hazra@razorpay.com>
@snitin315
feat(Amount): add new props & remove prefix (#1987)
f9a5e27
@snitin315
docs: update migration guide (#1991)
6d9cbeb
@kamleshchandnani
Merge branch 'master' into rebranding/master
6cbb668
@kamleshchandnani
chore: linting errors
7827f17
@kamleshchandnani kamleshchandnani merged commit abd99bb into master Jan 24, 2024
13 checks passed
@kamleshchandnani kamleshchandnani deleted the rebranding/master branch January 24, 2024 09:48
@kamleshchandnani kamleshchandnani changed the title feat: Rebranding Integration Branch 💅🏼 feat: Blade Visual Refresh 💅🏼 Jan 24, 2024
anuraghazra added a commit that referenced this pull request Apr 9, 2024
@saurabhdaware @snitin315
@kamleshchandnani @rzpcibot @anuraghazra @chaitanyadeorukhkar
feat: Blade Visual Refresh 💅🏼 (#1856)
ace670f 
Co-authored-by: Nitin Kumar <snitin315@gmail.com>
Co-authored-by: kamleshchandnani <kamlesh.chandnani@gmail.com>
Co-authored-by: rzpcibot <tools+cibot@razorpay.com>
Co-authored-by: saurabhdaware <saurabh.daware@razorpay.com>
Co-authored-by: anuraghazra <anurag.hazra@razorpay.com>
Co-authored-by: Kamlesh Chandnani <kamlesh.chandnani@gmail.com>
Co-authored-by: Chaitanya Deorukhkar <deorukhkarchaitanya@gmail.com>
Co-authored-by: Saurabh Daware <saurabh.daware@razorpay.com>
Co-authored-by: rzpcibot <64553331+rzpcibot@users.noreply.github.com>
Co-authored-by: Anurag Hazra <anurag.hazra@razorpay.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

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

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

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

@nashcheez nashcheez Awaiting requested review from nashcheez

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

Assignees
No one assigned
Labels
do not merge
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@saurabhdaware @kamleshchandnani @rzpcibot @anuraghazra @snitin315 @chaitanyadeorukhkar