[APP-1310] Button cleanup (#8754) · jeanmachine.dev/witchsky.app@e87555c

+255 -293

src/components/Button.tsx

··· 14 14 View, 15 15 type ViewStyle, 16 16 } from 'react-native' 17 - import {LinearGradient} from 'expo-linear-gradient' 18 17 19 - import {atoms as a, flatten, select, tokens, useTheme} from '#/alf' 18 + import {atoms as a, flatten, select, useTheme} from '#/alf' 20 19 import {type Props as SVGIconProps} from '#/components/icons/common' 21 20 import {Text} from '#/components/Typography' 22 21 ··· 32 31 */ 33 32 export type UninheritableButtonProps = 'variant' | 'color' | 'size' | 'shape' 34 33 35 - export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient' 34 + export type ButtonVariant = 'solid' | 'outline' | 'ghost' 36 35 export type ButtonColor = 37 36 | 'primary' 38 37 | 'secondary' 39 38 | 'secondary_inverted' 40 39 | 'negative' 41 40 | 'negative_secondary' 42 - | 'gradient_primary' 43 - | 'gradient_sky' 44 - | 'gradient_midnight' 45 - | 'gradient_sunrise' 46 - | 'gradient_sunset' 47 - | 'gradient_nordic' 48 - | 'gradient_bonfire' 49 41 export type ButtonSize = 'tiny' | 'small' | 'large' 50 42 export type ButtonShape = 'round' | 'square' | 'default' 51 43 export type VariantProps = { 52 44 /** 53 45 * The style variation of the button 46 + * @deprecated Use `color` instead. 54 47 */ 55 48 variant?: ButtonVariant 56 49 /** ··· 143 136 }, 144 137 ref, 145 138 ) => { 139 + /** 140 + * The `variant` prop is deprecated in favor of simply specifying `color`. 141 + * If a `color` is set, then we want to use the existing codepaths for 142 + * "solid" buttons. This is to maintain backwards compatibility. 143 + */ 144 + if (!variant && color) { 145 + variant = 'solid' 146 + } 147 + 146 148 const t = useTheme() 147 149 const [state, setState] = React.useState({ 148 150 pressed: false, ··· 215 217 const baseStyles: ViewStyle[] = [] 216 218 const hoverStyles: ViewStyle[] = [] 217 219 218 - if (color === 'primary') { 219 - if (variant === 'solid') { 220 + /* 221 + * This is the happy path for new button styles, following the 222 + * deprecation of `variant` prop. This redundant `variant` check is here 223 + * just to make this handling easier to understand. 224 + */ 225 + if (variant === 'solid') { 226 + if (color === 'primary') { 220 227 if (!disabled) { 221 228 baseStyles.push({ 222 229 backgroundColor: t.palette.primary_500, ··· 233 240 }), 234 241 }) 235 242 } 236 - } else if (variant === 'outline') { 237 - baseStyles.push(a.border, t.atoms.bg, { 238 - borderWidth: 1, 239 - }) 240 - 241 - if (!disabled) { 242 - baseStyles.push(a.border, { 243 - borderColor: t.palette.primary_500, 244 - }) 245 - hoverStyles.push(a.border, { 246 - backgroundColor: t.palette.primary_50, 247 - }) 248 - } else { 249 - baseStyles.push(a.border, { 250 - borderColor: t.palette.primary_200, 251 - }) 252 - } 253 - } else if (variant === 'ghost') { 254 - if (!disabled) { 255 - baseStyles.push(t.atoms.bg) 256 - hoverStyles.push({ 257 - backgroundColor: t.palette.primary_100, 258 - }) 259 - } 260 - } 261 - } else if (color === 'secondary') { 262 - if (variant === 'solid') { 243 + } else if (color === 'secondary') { 263 244 if (!disabled) { 264 245 baseStyles.push(t.atoms.bg_contrast_25) 265 246 hoverStyles.push(t.atoms.bg_contrast_50) 266 247 } else { 267 248 baseStyles.push(t.atoms.bg_contrast_100) 268 249 } 269 - } else if (variant === 'outline') { 270 - baseStyles.push(a.border, t.atoms.bg, { 271 - borderWidth: 1, 272 - }) 273 - 274 - if (!disabled) { 275 - baseStyles.push(a.border, { 276 - borderColor: t.palette.contrast_300, 277 - }) 278 - hoverStyles.push(t.atoms.bg_contrast_50) 279 - } else { 280 - baseStyles.push(a.border, { 281 - borderColor: t.palette.contrast_200, 282 - }) 283 - } 284 - } else if (variant === 'ghost') { 285 - if (!disabled) { 286 - baseStyles.push(t.atoms.bg) 287 - hoverStyles.push({ 288 - backgroundColor: t.palette.contrast_25, 289 - }) 290 - } 291 - } 292 - } else if (color === 'secondary_inverted') { 293 - if (variant === 'solid') { 250 + } else if (color === 'secondary_inverted') { 294 251 if (!disabled) { 295 252 baseStyles.push({ 296 253 backgroundColor: t.palette.contrast_900, ··· 303 260 backgroundColor: t.palette.contrast_600, 304 261 }) 305 262 } 306 - } else if (variant === 'outline') { 307 - baseStyles.push(a.border, t.atoms.bg, { 308 - borderWidth: 1, 309 - }) 310 - 311 - if (!disabled) { 312 - baseStyles.push(a.border, { 313 - borderColor: t.palette.contrast_300, 314 - }) 315 - hoverStyles.push(t.atoms.bg_contrast_50) 316 - } else { 317 - baseStyles.push(a.border, { 318 - borderColor: t.palette.contrast_200, 319 - }) 320 - } 321 - } else if (variant === 'ghost') { 322 - if (!disabled) { 323 - baseStyles.push(t.atoms.bg) 324 - hoverStyles.push({ 325 - backgroundColor: t.palette.contrast_25, 326 - }) 327 - } 328 - } 329 - } else if (color === 'negative') { 330 - if (variant === 'solid') { 263 + } else if (color === 'negative') { 331 264 if (!disabled) { 332 265 baseStyles.push({ 333 266 backgroundColor: t.palette.negative_500, ··· 344 277 }), 345 278 }) 346 279 } 347 - } else if (variant === 'outline') { 348 - baseStyles.push(a.border, t.atoms.bg, { 349 - borderWidth: 1, 350 - }) 351 - 352 - if (!disabled) { 353 - baseStyles.push(a.border, { 354 - borderColor: t.palette.negative_500, 355 - }) 356 - hoverStyles.push(a.border, { 357 - backgroundColor: t.palette.negative_50, 358 - }) 359 - } else { 360 - baseStyles.push(a.border, { 361 - borderColor: t.palette.negative_200, 362 - }) 363 - } 364 - } else if (variant === 'ghost') { 365 - if (!disabled) { 366 - baseStyles.push(t.atoms.bg) 367 - hoverStyles.push({ 368 - backgroundColor: t.palette.negative_100, 369 - }) 370 - } 371 - } 372 - } else if (color === 'negative_secondary') { 373 - if (variant === 'solid') { 280 + } else if (color === 'negative_secondary') { 374 281 if (!disabled) { 375 282 baseStyles.push({ 376 283 backgroundColor: select(t.name, { ··· 395 302 }), 396 303 }) 397 304 } 398 - } else if (variant === 'outline') { 399 - baseStyles.push(a.border, t.atoms.bg, { 400 - borderWidth: 1, 401 - }) 305 + } 306 + } else { 307 + /* 308 + * BEGIN DEPRECATED STYLES 309 + */ 310 + if (color === 'primary') { 311 + if (variant === 'outline') { 312 + baseStyles.push(a.border, t.atoms.bg, { 313 + borderWidth: 1, 314 + }) 402 315 403 - if (!disabled) { 404 - baseStyles.push(a.border, { 405 - borderColor: t.palette.negative_500, 316 + if (!disabled) { 317 + baseStyles.push(a.border, { 318 + borderColor: t.palette.primary_500, 319 + }) 320 + hoverStyles.push(a.border, { 321 + backgroundColor: t.palette.primary_50, 322 + }) 323 + } else { 324 + baseStyles.push(a.border, { 325 + borderColor: t.palette.primary_200, 326 + }) 327 + } 328 + } else if (variant === 'ghost') { 329 + if (!disabled) { 330 + baseStyles.push(t.atoms.bg) 331 + hoverStyles.push({ 332 + backgroundColor: t.palette.primary_100, 333 + }) 334 + } 335 + } 336 + } else if (color === 'secondary') { 337 + if (variant === 'outline') { 338 + baseStyles.push(a.border, t.atoms.bg, { 339 + borderWidth: 1, 406 340 }) 407 - hoverStyles.push(a.border, { 408 - backgroundColor: t.palette.negative_50, 341 + 342 + if (!disabled) { 343 + baseStyles.push(a.border, { 344 + borderColor: t.palette.contrast_300, 345 + }) 346 + hoverStyles.push(t.atoms.bg_contrast_50) 347 + } else { 348 + baseStyles.push(a.border, { 349 + borderColor: t.palette.contrast_200, 350 + }) 351 + } 352 + } else if (variant === 'ghost') { 353 + if (!disabled) { 354 + baseStyles.push(t.atoms.bg) 355 + hoverStyles.push({ 356 + backgroundColor: t.palette.contrast_25, 357 + }) 358 + } 359 + } 360 + } else if (color === 'secondary_inverted') { 361 + if (variant === 'outline') { 362 + baseStyles.push(a.border, t.atoms.bg, { 363 + borderWidth: 1, 409 364 }) 410 - } else { 411 - baseStyles.push(a.border, { 412 - borderColor: t.palette.negative_200, 365 + 366 + if (!disabled) { 367 + baseStyles.push(a.border, { 368 + borderColor: t.palette.contrast_300, 369 + }) 370 + hoverStyles.push(t.atoms.bg_contrast_50) 371 + } else { 372 + baseStyles.push(a.border, { 373 + borderColor: t.palette.contrast_200, 374 + }) 375 + } 376 + } else if (variant === 'ghost') { 377 + if (!disabled) { 378 + baseStyles.push(t.atoms.bg) 379 + hoverStyles.push({ 380 + backgroundColor: t.palette.contrast_25, 381 + }) 382 + } 383 + } 384 + } else if (color === 'negative') { 385 + if (variant === 'outline') { 386 + baseStyles.push(a.border, t.atoms.bg, { 387 + borderWidth: 1, 413 388 }) 389 + 390 + if (!disabled) { 391 + baseStyles.push(a.border, { 392 + borderColor: t.palette.negative_500, 393 + }) 394 + hoverStyles.push(a.border, { 395 + backgroundColor: t.palette.negative_50, 396 + }) 397 + } else { 398 + baseStyles.push(a.border, { 399 + borderColor: t.palette.negative_200, 400 + }) 401 + } 402 + } else if (variant === 'ghost') { 403 + if (!disabled) { 404 + baseStyles.push(t.atoms.bg) 405 + hoverStyles.push({ 406 + backgroundColor: t.palette.negative_100, 407 + }) 408 + } 414 409 } 415 - } else if (variant === 'ghost') { 416 - if (!disabled) { 417 - baseStyles.push(t.atoms.bg) 418 - hoverStyles.push({ 419 - backgroundColor: t.palette.negative_100, 410 + } else if (color === 'negative_secondary') { 411 + if (variant === 'outline') { 412 + baseStyles.push(a.border, t.atoms.bg, { 413 + borderWidth: 1, 420 414 }) 415 + 416 + if (!disabled) { 417 + baseStyles.push(a.border, { 418 + borderColor: t.palette.negative_500, 419 + }) 420 + hoverStyles.push(a.border, { 421 + backgroundColor: t.palette.negative_50, 422 + }) 423 + } else { 424 + baseStyles.push(a.border, { 425 + borderColor: t.palette.negative_200, 426 + }) 427 + } 428 + } else if (variant === 'ghost') { 429 + if (!disabled) { 430 + baseStyles.push(t.atoms.bg) 431 + hoverStyles.push({ 432 + backgroundColor: t.palette.negative_100, 433 + }) 434 + } 421 435 } 422 436 } 437 + /* 438 + * END DEPRECATED STYLES 439 + */ 423 440 } 424 441 425 442 if (shape === 'default') { ··· 483 500 } 484 501 }, [t, variant, color, size, shape, disabled]) 485 502 486 - const gradientValues = React.useMemo(() => { 487 - const gradient = { 488 - primary: tokens.gradients.sky, 489 - secondary: tokens.gradients.sky, 490 - secondary_inverted: tokens.gradients.sky, 491 - negative: tokens.gradients.sky, 492 - negative_secondary: tokens.gradients.sky, 493 - gradient_primary: tokens.gradients.primary, 494 - gradient_sky: tokens.gradients.sky, 495 - gradient_midnight: tokens.gradients.midnight, 496 - gradient_sunrise: tokens.gradients.sunrise, 497 - gradient_sunset: tokens.gradients.sunset, 498 - gradient_nordic: tokens.gradients.nordic, 499 - gradient_bonfire: tokens.gradients.bonfire, 500 - }[color || 'primary'] 501 - 502 - if (variant === 'gradient') { 503 - if (gradient.values.length < 2) { 504 - throw new Error( 505 - 'Gradient buttons must have at least two colors in the gradient', 506 - ) 507 - } 508 - 509 - return { 510 - colors: gradient.values.map(([_, color]) => color) as [ 511 - string, 512 - string, 513 - ...string[], 514 - ], 515 - hoverColors: gradient.values.map(_ => gradient.hover_value) as [ 516 - string, 517 - string, 518 - ...string[], 519 - ], 520 - locations: gradient.values.map(([location, _]) => location) as [ 521 - number, 522 - number, 523 - ...number[], 524 - ], 525 - } 526 - } 527 - }, [variant, color]) 528 - 529 503 const context = React.useMemo<ButtonContext>( 530 504 () => ({ 531 505 ...state, ··· 568 542 onHoverOut={onHoverOut} 569 543 onFocus={onFocus} 570 544 onBlur={onBlur}> 571 - {variant === 'gradient' && gradientValues && ( 572 - <View 573 - style={[ 574 - a.absolute, 575 - a.inset_0, 576 - a.overflow_hidden, 577 - {borderRadius: flattenedBaseStyles.borderRadius}, 578 - ]}> 579 - <LinearGradient 580 - colors={ 581 - state.hovered || state.pressed 582 - ? gradientValues.hoverColors 583 - : gradientValues.colors 584 - } 585 - locations={gradientValues.locations} 586 - start={{x: 0, y: 0}} 587 - end={{x: 1, y: 1}} 588 - style={[a.absolute, a.inset_0]} 589 - /> 590 - </View> 591 - )} 592 545 <Context.Provider value={context}> 593 546 {typeof children === 'function' ? children(context) : children} 594 547 </Context.Provider> ··· 604 557 return React.useMemo(() => { 605 558 const baseStyles: TextStyle[] = [] 606 559 607 - if (color === 'primary') { 608 - if (variant === 'solid') { 560 + /* 561 + * This is the happy path for new button styles, following the 562 + * deprecation of `variant` prop. This redundant `variant` check is here 563 + * just to make this handling easier to understand. 564 + */ 565 + if (variant === 'solid') { 566 + if (color === 'primary') { 609 567 if (!disabled) { 610 568 baseStyles.push({color: t.palette.white}) 611 569 } else { 612 570 baseStyles.push({color: t.palette.white, opacity: 0.5}) 613 571 } 614 - } else if (variant === 'outline') { 615 - if (!disabled) { 616 - baseStyles.push({ 617 - color: t.palette.primary_600, 618 - }) 619 - } else { 620 - baseStyles.push({color: t.palette.primary_600, opacity: 0.5}) 621 - } 622 - } else if (variant === 'ghost') { 623 - if (!disabled) { 624 - baseStyles.push({color: t.palette.primary_600}) 625 - } else { 626 - baseStyles.push({color: t.palette.primary_600, opacity: 0.5}) 627 - } 628 - } 629 - } else if (color === 'secondary') { 630 - if (variant === 'solid' || variant === 'gradient') { 572 + } else if (color === 'secondary') { 631 573 if (!disabled) { 632 574 baseStyles.push({ 633 575 color: t.palette.contrast_700, ··· 637 579 color: t.palette.contrast_400, 638 580 }) 639 581 } 640 - } else if (variant === 'outline') { 641 - if (!disabled) { 642 - baseStyles.push({ 643 - color: t.palette.contrast_600, 644 - }) 645 - } else { 646 - baseStyles.push({ 647 - color: t.palette.contrast_300, 648 - }) 649 - } 650 - } else if (variant === 'ghost') { 651 - if (!disabled) { 652 - baseStyles.push({ 653 - color: t.palette.contrast_600, 654 - }) 655 - } else { 656 - baseStyles.push({ 657 - color: t.palette.contrast_300, 658 - }) 659 - } 660 - } 661 - } else if (color === 'secondary_inverted') { 662 - if (variant === 'solid' || variant === 'gradient') { 582 + } else if (color === 'secondary_inverted') { 663 583 if (!disabled) { 664 584 baseStyles.push({ 665 585 color: t.palette.contrast_50, ··· 669 589 color: t.palette.contrast_400, 670 590 }) 671 591 } 672 - } else if (variant === 'outline') { 673 - if (!disabled) { 674 - baseStyles.push({ 675 - color: t.palette.contrast_600, 676 - }) 677 - } else { 678 - baseStyles.push({ 679 - color: t.palette.contrast_300, 680 - }) 681 - } 682 - } else if (variant === 'ghost') { 683 - if (!disabled) { 684 - baseStyles.push({ 685 - color: t.palette.contrast_600, 686 - }) 687 - } else { 688 - baseStyles.push({ 689 - color: t.palette.contrast_300, 690 - }) 691 - } 692 - } 693 - } else if (color === 'negative') { 694 - if (variant === 'solid' || variant === 'gradient') { 592 + } else if (color === 'negative') { 695 593 if (!disabled) { 696 594 baseStyles.push({color: t.palette.white}) 697 595 } else { 698 596 baseStyles.push({color: t.palette.white, opacity: 0.5}) 699 597 } 700 - } else if (variant === 'outline') { 701 - if (!disabled) { 702 - baseStyles.push({color: t.palette.negative_400}) 703 - } else { 704 - baseStyles.push({color: t.palette.negative_400, opacity: 0.5}) 705 - } 706 - } else if (variant === 'ghost') { 707 - if (!disabled) { 708 - baseStyles.push({color: t.palette.negative_400}) 709 - } else { 710 - baseStyles.push({color: t.palette.negative_400, opacity: 0.5}) 711 - } 712 - } 713 - } else if (color === 'negative_secondary') { 714 - if (variant === 'solid' || variant === 'gradient') { 598 + } else if (color === 'negative_secondary') { 715 599 if (!disabled) { 716 600 baseStyles.push({ 717 601 color: select(t.name, { ··· 730 614 opacity: 0.5, 731 615 }) 732 616 } 733 - } else if (variant === 'outline') { 734 - if (!disabled) { 735 - baseStyles.push({color: t.palette.negative_400}) 736 - } else { 737 - baseStyles.push({color: t.palette.negative_400, opacity: 0.5}) 617 + } 618 + } else { 619 + /* 620 + * BEGIN DEPRECATED STYLES 621 + */ 622 + if (color === 'primary') { 623 + if (variant === 'outline') { 624 + if (!disabled) { 625 + baseStyles.push({ 626 + color: t.palette.primary_600, 627 + }) 628 + } else { 629 + baseStyles.push({color: t.palette.primary_600, opacity: 0.5}) 630 + } 631 + } else if (variant === 'ghost') { 632 + if (!disabled) { 633 + baseStyles.push({color: t.palette.primary_600}) 634 + } else { 635 + baseStyles.push({color: t.palette.primary_600, opacity: 0.5}) 636 + } 637 + } 638 + } else if (color === 'secondary') { 639 + if (variant === 'outline') { 640 + if (!disabled) { 641 + baseStyles.push({ 642 + color: t.palette.contrast_600, 643 + }) 644 + } else { 645 + baseStyles.push({ 646 + color: t.palette.contrast_300, 647 + }) 648 + } 649 + } else if (variant === 'ghost') { 650 + if (!disabled) { 651 + baseStyles.push({ 652 + color: t.palette.contrast_600, 653 + }) 654 + } else { 655 + baseStyles.push({ 656 + color: t.palette.contrast_300, 657 + }) 658 + } 738 659 } 739 - } else if (variant === 'ghost') { 740 - if (!disabled) { 741 - baseStyles.push({color: t.palette.negative_400}) 742 - } else { 743 - baseStyles.push({color: t.palette.negative_400, opacity: 0.5}) 660 + } else if (color === 'secondary_inverted') { 661 + if (variant === 'outline') { 662 + if (!disabled) { 663 + baseStyles.push({ 664 + color: t.palette.contrast_600, 665 + }) 666 + } else { 667 + baseStyles.push({ 668 + color: t.palette.contrast_300, 669 + }) 670 + } 671 + } else if (variant === 'ghost') { 672 + if (!disabled) { 673 + baseStyles.push({ 674 + color: t.palette.contrast_600, 675 + }) 676 + } else { 677 + baseStyles.push({ 678 + color: t.palette.contrast_300, 679 + }) 680 + } 744 681 } 745 - } 746 - } else { 747 - if (!disabled) { 748 - baseStyles.push({color: t.palette.white}) 749 - } else { 750 - baseStyles.push({color: t.palette.white, opacity: 0.5}) 682 + } else if (color === 'negative') { 683 + if (variant === 'outline') { 684 + if (!disabled) { 685 + baseStyles.push({color: t.palette.negative_400}) 686 + } else { 687 + baseStyles.push({color: t.palette.negative_400, opacity: 0.5}) 688 + } 689 + } else if (variant === 'ghost') { 690 + if (!disabled) { 691 + baseStyles.push({color: t.palette.negative_400}) 692 + } else { 693 + baseStyles.push({color: t.palette.negative_400, opacity: 0.5}) 694 + } 695 + } 696 + } else if (color === 'negative_secondary') { 697 + if (variant === 'outline') { 698 + if (!disabled) { 699 + baseStyles.push({color: t.palette.negative_400}) 700 + } else { 701 + baseStyles.push({color: t.palette.negative_400, opacity: 0.5}) 702 + } 703 + } else if (variant === 'ghost') { 704 + if (!disabled) { 705 + baseStyles.push({color: t.palette.negative_400}) 706 + } else { 707 + baseStyles.push({color: t.palette.negative_400, opacity: 0.5}) 708 + } 709 + } 751 710 } 711 + /* 712 + * END DEPRECATED STYLES 713 + */ 752 714 } 753 715 754 716 if (size === 'large') {

+4 -3

src/components/Lists.tsx

··· 1 - import React, {memo} from 'react' 2 - import {StyleProp, View, ViewStyle} from 'react-native' 1 + import {memo} from 'react' 2 + import {type StyleProp, View, type ViewStyle} from 'react-native' 3 3 import {msg, Trans} from '@lingui/macro' 4 4 import {useLingui} from '@lingui/react' 5 + import type React from 'react' 5 6 6 7 import {cleanError} from '#/lib/strings/errors' 7 8 import {CenteredView} from '#/view/com/util/Views' ··· 95 96 )} 96 97 </Text> 97 98 <Button 98 - variant="gradient" 99 + variant="solid" 99 100 label={_(msg`Press to retry`)} 100 101 style={[ 101 102 a.align_center,

+2 -2

src/screens/Onboarding/StepFinished.tsx

··· 305 305 <Button 306 306 disabled={saving} 307 307 key={state.activeStep} // remove focus state on nav 308 - variant="gradient" 309 - color="gradient_sky" 308 + variant="solid" 309 + color="primary" 310 310 size="large" 311 311 label={_(msg`Complete onboarding and start using your account`)} 312 312 onPress={finishOnboarding}>

+3 -3

src/screens/Onboarding/StepInterests/index.tsx

··· 15 15 TitleText, 16 16 } from '#/screens/Onboarding/Layout' 17 17 import { 18 - ApiResponseMap, 18 + type ApiResponseMap, 19 19 Context, 20 20 useInterestsDisplayNames, 21 21 } from '#/screens/Onboarding/state' ··· 235 235 ) : ( 236 236 <Button 237 237 disabled={saving || !data} 238 - variant="gradient" 239 - color="gradient_sky" 238 + variant="solid" 239 + color="primary" 240 240 size="large" 241 241 label={_(msg`Continue to next step`)} 242 242 onPress={saveInterests}>

+2 -2

src/screens/Onboarding/StepProfile/index.tsx

··· 267 267 <OnboardingControls.Portal> 268 268 <View style={[a.gap_md, gtMobile && {flexDirection: 'row-reverse'}]}> 269 269 <Button 270 - variant="gradient" 271 - color="gradient_sky" 270 + variant="solid" 271 + color="primary" 272 272 size="large" 273 273 label={_(msg`Continue to next step`)} 274 274 onPress={onContinue}>

+43 -167

src/view/screens/Storybook/Buttons.tsx

··· 1 - import React from 'react' 2 1 import {View} from 'react-native' 3 2 4 3 import {atoms as a} from '#/alf' ··· 7 6 type ButtonColor, 8 7 ButtonIcon, 9 8 ButtonText, 10 - type ButtonVariant, 11 9 } from '#/components/Button' 12 10 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron' 13 11 import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' ··· 27 25 'negative_secondary', 28 26 ].map(color => ( 29 27 <View key={color} style={[a.gap_md, a.align_start]}> 30 - {['solid', 'outline', 'ghost'].map(variant => ( 31 - <React.Fragment key={variant}> 32 - <Button 33 - variant={variant as ButtonVariant} 34 - color={color as ButtonColor} 35 - size="large" 36 - label="Click here"> 37 - <ButtonText>Button</ButtonText> 38 - </Button> 39 - <Button 40 - disabled 41 - variant={variant as ButtonVariant} 42 - color={color as ButtonColor} 43 - size="large" 44 - label="Click here"> 45 - <ButtonText>Button</ButtonText> 46 - </Button> 47 - </React.Fragment> 48 - ))} 28 + <Button 29 + color={color as ButtonColor} 30 + size="large" 31 + label="Click here"> 32 + <ButtonText>Button</ButtonText> 33 + </Button> 34 + <Button 35 + disabled 36 + color={color as ButtonColor} 37 + size="large" 38 + label="Click here"> 39 + <ButtonText>Button</ButtonText> 40 + </Button> 49 41 </View> 50 42 ))} 51 - 52 - <View style={[a.flex_row, a.gap_md, a.align_start]}> 53 - <View style={[a.gap_md, a.align_start]}> 54 - {['gradient_sky', 'gradient_midnight', 'gradient_sunrise'].map( 55 - name => ( 56 - <React.Fragment key={name}> 57 - <Button 58 - variant="gradient" 59 - color={name as ButtonColor} 60 - size="large" 61 - label="Click here"> 62 - <ButtonText>Button</ButtonText> 63 - </Button> 64 - <Button 65 - disabled 66 - variant="gradient" 67 - color={name as ButtonColor} 68 - size="large" 69 - label="Click here"> 70 - <ButtonText>Button</ButtonText> 71 - </Button> 72 - </React.Fragment> 73 - ), 74 - )} 75 - </View> 76 - </View> 77 43 </View> 78 44 79 45 <View style={[a.flex_wrap, a.gap_md, a.align_start]}> 80 - <Button variant="solid" color="primary" size="large" label="Link out"> 46 + <Button color="primary" size="large" label="Link out"> 81 47 <ButtonText>Button</ButtonText> 82 48 </Button> 83 - <Button variant="solid" color="primary" size="large" label="Link out"> 49 + <Button color="primary" size="large" label="Link out"> 84 50 <ButtonText>Button</ButtonText> 85 51 <ButtonIcon icon={Globe} position="right" /> 86 52 </Button> 87 53 88 - <Button variant="solid" color="primary" size="small" label="Link out"> 54 + <Button color="primary" size="small" label="Link out"> 89 55 <ButtonText>Button</ButtonText> 90 56 </Button> 91 - <Button variant="solid" color="primary" size="small" label="Link out"> 57 + <Button color="primary" size="small" label="Link out"> 92 58 <ButtonText>Button</ButtonText> 93 59 <ButtonIcon icon={Globe} position="right" /> 94 60 </Button> 95 61 96 - <Button variant="solid" color="primary" size="tiny" label="Link out"> 62 + <Button color="primary" size="tiny" label="Link out"> 97 63 <ButtonIcon icon={Globe} position="left" /> 98 64 <ButtonText>Button</ButtonText> 99 65 </Button> 100 66 </View> 101 67 102 68 <View style={[a.flex_row, a.gap_md, a.align_center]}> 103 - <Button variant="solid" color="primary" size="large" label="Link out"> 69 + <Button color="primary" size="large" label="Link out"> 104 70 <ButtonText>Button</ButtonText> 105 71 </Button> 106 - <Button variant="solid" color="primary" size="large" label="Link out"> 72 + <Button color="primary" size="large" label="Link out"> 107 73 <ButtonText>Button</ButtonText> 108 74 <ButtonIcon icon={Globe} position="right" /> 109 75 </Button> 110 - <Button variant="solid" color="primary" size="large" label="Link out"> 76 + <Button color="primary" size="large" label="Link out"> 111 77 <ButtonText>Button</ButtonText> 112 78 <ButtonIcon icon={Globe} position="right" size="lg" /> 113 79 </Button> 114 - <Button 115 - variant="solid" 116 - color="primary" 117 - size="large" 118 - shape="round" 119 - label="Link out"> 80 + <Button color="primary" size="large" shape="round" label="Link out"> 120 81 <ButtonIcon icon={ChevronLeft} /> 121 82 </Button> 122 - <Button 123 - variant="solid" 124 - color="primary" 125 - size="large" 126 - shape="round" 127 - label="Link out"> 83 + <Button color="primary" size="large" shape="round" label="Link out"> 128 84 <ButtonIcon icon={ChevronLeft} size="lg" /> 129 85 </Button> 130 86 </View> 131 87 132 88 <View style={[a.flex_row, a.gap_md, a.align_center]}> 133 - <Button variant="solid" color="primary" size="small" label="Link out"> 89 + <Button color="primary" size="small" label="Link out"> 134 90 <ButtonText>Button</ButtonText> 135 91 </Button> 136 - <Button variant="solid" color="primary" size="small" label="Link out"> 92 + <Button color="primary" size="small" label="Link out"> 137 93 <ButtonText>Button</ButtonText> 138 94 <ButtonIcon icon={Globe} position="right" /> 139 95 </Button> 140 - <Button 141 - variant="solid" 142 - color="primary" 143 - size="small" 144 - shape="round" 145 - label="Link out"> 96 + <Button color="primary" size="small" shape="round" label="Link out"> 146 97 <ButtonIcon icon={ChevronLeft} /> 147 98 </Button> 148 - <Button 149 - variant="solid" 150 - color="primary" 151 - size="small" 152 - shape="round" 153 - label="Link out"> 99 + <Button color="primary" size="small" shape="round" label="Link out"> 154 100 <ButtonIcon icon={ChevronLeft} size="lg" /> 155 101 </Button> 156 102 </View> 157 103 158 104 <View style={[a.flex_row, a.gap_md, a.align_center]}> 159 - <Button variant="solid" color="primary" size="tiny" label="Link out"> 105 + <Button color="primary" size="tiny" label="Link out"> 160 106 <ButtonText>Button</ButtonText> 161 107 </Button> 162 - <Button variant="solid" color="primary" size="tiny" label="Link out"> 108 + <Button color="primary" size="tiny" label="Link out"> 163 109 <ButtonText>Button</ButtonText> 164 110 <ButtonIcon icon={Globe} position="right" /> 165 111 </Button> 166 - <Button 167 - variant="solid" 168 - color="primary" 169 - size="tiny" 170 - shape="round" 171 - label="Link out"> 112 + <Button color="primary" size="tiny" shape="round" label="Link out"> 172 113 <ButtonIcon icon={ChevronLeft} /> 173 114 </Button> 174 - <Button 175 - variant="solid" 176 - color="primary" 177 - size="tiny" 178 - shape="round" 179 - label="Link out"> 115 + <Button color="primary" size="tiny" shape="round" label="Link out"> 180 116 <ButtonIcon icon={ChevronLeft} size="md" /> 181 117 </Button> 182 118 </View> 183 119 184 120 <View style={[a.flex_row, a.gap_md, a.align_center]}> 185 - <Button 186 - variant="solid" 187 - color="primary" 188 - size="large" 189 - shape="round" 190 - label="Link out"> 121 + <Button color="primary" size="large" shape="round" label="Link out"> 191 122 <ButtonIcon icon={ChevronLeft} /> 192 123 </Button> 193 - <Button 194 - variant="gradient" 195 - color="gradient_sunset" 196 - size="small" 197 - shape="round" 198 - label="Link out"> 124 + <Button color="primary" size="small" shape="round" label="Link out"> 199 125 <ButtonIcon icon={ChevronLeft} /> 200 126 </Button> 201 - <Button 202 - variant="gradient" 203 - color="gradient_sunset" 204 - size="tiny" 205 - shape="round" 206 - label="Link out"> 127 + <Button color="primary" size="tiny" shape="round" label="Link out"> 207 128 <ButtonIcon icon={ChevronLeft} /> 208 129 </Button> 209 - <Button 210 - variant="outline" 211 - color="primary" 212 - size="large" 213 - shape="round" 214 - label="Link out"> 130 + <Button color="primary" size="large" shape="round" label="Link out"> 215 131 <ButtonIcon icon={ChevronLeft} /> 216 132 </Button> 217 - <Button 218 - variant="ghost" 219 - color="primary" 220 - size="small" 221 - shape="round" 222 - label="Link out"> 133 + <Button color="primary" size="small" shape="round" label="Link out"> 223 134 <ButtonIcon icon={ChevronLeft} /> 224 135 </Button> 225 - <Button 226 - variant="ghost" 227 - color="primary" 228 - size="tiny" 229 - shape="round" 230 - label="Link out"> 136 + <Button color="primary" size="tiny" shape="round" label="Link out"> 231 137 <ButtonIcon icon={ChevronLeft} /> 232 138 </Button> 233 139 </View> 234 140 235 141 <View style={[a.flex_row, a.gap_md, a.align_start]}> 236 - <Button 237 - variant="solid" 238 - color="primary" 239 - size="large" 240 - shape="square" 241 - label="Link out"> 142 + <Button color="primary" size="large" shape="square" label="Link out"> 242 143 <ButtonIcon icon={ChevronLeft} /> 243 144 </Button> 244 - <Button 245 - variant="gradient" 246 - color="gradient_sunset" 247 - size="small" 248 - shape="square" 249 - label="Link out"> 145 + <Button color="primary" size="small" shape="square" label="Link out"> 250 146 <ButtonIcon icon={ChevronLeft} /> 251 147 </Button> 252 - <Button 253 - variant="gradient" 254 - color="gradient_sunset" 255 - size="tiny" 256 - shape="square" 257 - label="Link out"> 148 + <Button color="primary" size="tiny" shape="square" label="Link out"> 258 149 <ButtonIcon icon={ChevronLeft} /> 259 150 </Button> 260 - <Button 261 - variant="outline" 262 - color="primary" 263 - size="large" 264 - shape="square" 265 - label="Link out"> 151 + <Button color="primary" size="large" shape="square" label="Link out"> 266 152 <ButtonIcon icon={ChevronLeft} /> 267 153 </Button> 268 - <Button 269 - variant="ghost" 270 - color="primary" 271 - size="small" 272 - shape="square" 273 - label="Link out"> 154 + <Button color="primary" size="small" shape="square" label="Link out"> 274 155 <ButtonIcon icon={ChevronLeft} /> 275 156 </Button> 276 - <Button 277 - variant="ghost" 278 - color="primary" 279 - size="tiny" 280 - shape="square" 281 - label="Link out"> 157 + <Button color="primary" size="tiny" shape="square" label="Link out"> 282 158 <ButtonIcon icon={ChevronLeft} /> 283 159 </Button> 284 160 </View>

+3 -3

src/view/screens/Storybook/Forms.tsx

··· 1 1 import React from 'react' 2 - import {TextInput, View} from 'react-native' 2 + import {type TextInput, View} from 'react-native' 3 3 4 4 import {atoms as a} from '#/alf' 5 5 import {Button, ButtonText} from '#/components/Button' ··· 216 216 </View> 217 217 218 218 <Button 219 - variant="gradient" 220 - color="gradient_nordic" 219 + variant="solid" 220 + color="primary" 221 221 size="small" 222 222 label="Reset all toggles" 223 223 onPress={() => {

-7

src/view/screens/Storybook/index.tsx

··· 52 52 <> 53 53 <View style={[a.flex_row, a.align_start, a.gap_md]}> 54 54 <Button 55 - variant="outline" 56 55 color="primary" 57 56 size="small" 58 57 label='Set theme to "system"' ··· 60 59 <ButtonText>System</ButtonText> 61 60 </Button> 62 61 <Button 63 - variant="solid" 64 62 color="secondary" 65 63 size="small" 66 64 label='Set theme to "light"' ··· 68 66 <ButtonText>Light</ButtonText> 69 67 </Button> 70 68 <Button 71 - variant="solid" 72 69 color="secondary" 73 70 size="small" 74 71 label='Set theme to "dim"' ··· 79 76 <ButtonText>Dim</ButtonText> 80 77 </Button> 81 78 <Button 82 - variant="solid" 83 79 color="secondary" 84 80 size="small" 85 81 label='Set theme to "dark"' ··· 94 90 <Toasts /> 95 91 96 92 <Button 97 - variant="solid" 98 93 color="primary" 99 94 size="small" 100 95 onPress={() => navigation.navigate('SharedPreferencesTester')} ··· 128 123 <Settings /> 129 124 130 125 <Button 131 - variant="solid" 132 126 color="primary" 133 127 size="large" 134 128 label="Switch to Contained List" ··· 139 133 ) : ( 140 134 <> 141 135 <Button 142 - variant="solid" 143 136 color="primary" 144 137 size="large" 145 138 label="Switch to Storybook"

Configure Feed

Configure Feed