CKTextComponent in horizontal StackLayoutComponent does not respect constrained size?

[facebook]

CKTextComponent in horizontal StackLayoutComponent does not respect constrained size?

[ocrickard]

Could you enable debug mode on the components and post a screenshot of what's going on?

[smiLLe]

iOS 8.2 Simulator Screenshots

This is the result i expect and it is the result of the StackLayout when childrens are vertically aligned

This is the result i got

#import <UIKit/UIKit.h>

@interface ViewController : UICollectionViewController


@end

#import "ViewController.h"
#import "CKComponentFlexibleSizeRangeProvider.h"
#import "CKCollectionViewDataSource.h"
#import "CKComponent.h"
#import "CKTextComponent.h"
#import "CKStackLayoutComponent.h"
#import <ComponentKit/CKComponentProvider.h>

@interface ViewController () <CKComponentProvider>

@end

@implementation ViewController {
   CKCollectionViewDataSource *_dataSource;
   CKComponentFlexibleSizeRangeProvider *_sizeRangeProvider;
}

- (void)viewDidLoad {
   [super viewDidLoad];
  self.collectionView.backgroundColor = [UIColor whiteColor];
  self.collectionView.delegate = self;

   _sizeRangeProvider = [CKComponentFlexibleSizeRangeProvider providerWithFlexibility:CKComponentSizeRangeFlexibleHeight];
  _dataSource = [[CKCollectionViewDataSource alloc]
    initWithCollectionView:self.collectionView
    supplementaryViewDataSource:nil
    componentProvider:[self class]
    context:nil
    cellConfigurationFunction:nil];


  CKArrayControllerSections listSctions;
  CKArrayControllerInputItems listItems;
  listSctions.insert(0);
  listItems.insert({0,0}, @{});
  [_dataSource
    enqueueChangeset:{listSctions, listItems}
    constrainedSize:[_sizeRangeProvider sizeRangeForBoundingSize:self.collectionView.bounds.size]];
}

- (BOOL)prefersStatusBarHidden
{
  return YES;
}

+ (CKComponent *)componentForModel:(id<NSObject>)model context:(id<NSObject>)context
{
  return [CKStackLayoutComponent
    newWithView:{}
    size:{}
    style:{
      .direction = CKStackLayoutDirectionHorizontal
    }
    children:{
      {
        [CKTextComponent
          newWithTextAttributes:{
            .attributedString = [[NSMutableAttributedString
              alloc]
              initWithString:@"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum"
              attributes:@{
                NSFontAttributeName: [UIFont systemFontOfSize:17.0f],
                NSForegroundColorAttributeName : [UIColor blueColor],
              }]
          }
          viewAttributes:{
            {@selector(setOpaque:), @NO}
          }
          accessibilityContext:{}]
      }
    }];
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
  return [_dataSource sizeForItemAtIndexPath:indexPath];
}

@end

[aaronschubert0]

Try adding .flexShrink = YES to the CKTextComponent that works for me.

[CKTextComponent
          newWithTextAttributes:{
            .attributedString = [[NSMutableAttributedString
              alloc]
              initWithString:@"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum"
              attributes:@{
                NSFontAttributeName: [UIFont systemFontOfSize:17.0f],
                NSForegroundColorAttributeName : [UIColor blueColor],
              }]
          }
          viewAttributes:{
            {@selector(setOpaque:), @NO}
          }
          accessibilityContext:{}],
          .flexShrink = YES

[smiLLe]

You're right, this works! I still think it might be a bug

[modocache]

Thanks for the suggestion, @aaronschubert0! Glad to see @smiLLe unstuck! 💯

This may indeed be something we should "fix"--but the key is keeping the behavior consistent across CKStackLayoutDirectionHorizontal and CKStackLayoutDirectionVertical. I would think that components without flexShrink specified should render with the minimum widths or heights necessary to fit their content, regardless of screen size, and that appears to be the case already. But maybe the text wrapping behavior is unintuitive? Let's take a closer look! ☝️

[adamjernst]

Thanks @smiLLe for reporting!

We've discussed this a bunch. I agree it's a kinda confusing at first—it's surprising that the text doesn't wrap!

However, this is how CSS flex-box specifies that it should work. When stacking horizontally, items should first be laid out unconstrained in the horizontal dimension (meaning: no wrapping). Then, the flex-box algorithm uses flexShrink and justifyContent to decide what to do about it.

In this case, you want wrapping, so you should use flexShrink. If you wanted instead of the single line of text to be centered, you could use justifyContent = Center. And so forth.