Ajar math: a couple of styling updates

changelog.md

@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [0.13.10] - 2019-12-17
+### Changed
+- `lib/block.js`: update flex so titles will wrap as needed
+- `lib/button.js`: add text wrapping as an option (default false)
+
 ## [0.13.9] - 2019-12-05
 
 ## [0.13.8] - 2019-12-05

lib/block.js

@@ -13,7 +13,7 @@ const TitleWrap = styled.header`
   background-color: var(--colors-secondaryBackground);
 `;
 const TitleContent = styled.h2`
-  flex: 1 0 auto;
+  flex: 1 1 auto;
   margin: 0;
   padding: 0;
   font-size: var(--fontSizes-small);

lib/button.js

@@ -36,6 +36,7 @@ const StyledButton = styled.span`
   font-weight: 600;
   line-height: 1;
   position: relative;
+  white-space: nowrap;
   &:disabled,
   button:disabled &,
   a:disabled & {
@@ -48,12 +49,17 @@ const StyledButton = styled.span`
   // Note that this is font-specific and proportional to font size,
   // and at smaller sizes this is complicated by pixel rounding.
   padding: 0.375em 0.5em 0.1875em;
-  white-space: normal;
   text-decoration: none;
 
   ${({ variant }) => variants[variant]}
+  ${({ textWrap }) => textWrap}
   ${({ size }) => sizes[size]}
-`;
+  ${({ textWrap }) =>
+      textWrap &&
+      css`
+        white-space: normal;
+    `}
+  `;
 
 const focus = (...args) => css`
   &:focus,
@@ -138,10 +144,12 @@ export const Button = styled(StyledButton).attrs(() => ({ 'data-module': 'Button
 Button.propTypes = {
   variant: PropTypes.oneOf(Object.keys(variants)),
   size: PropTypes.oneOf(Object.keys(sizes)),
+  textWrap: PropTypes.bool,
 };
 Button.defaultProps = {
   variant: 'primary',
   size: 'normal',
+  textWrap: false,
   as: BaseButton,
 };
 
@@ -204,7 +212,7 @@ export const StoryButton_with_Icon = () => (
     <CodeExample>{`<Button onClick={addProject}>Add Project <Icon icon="bentoBox" /></Button>`}</CodeExample>
     <Container>
       <Button onClick={noop}>No Icon</Button>
-      <Button onClick={noop}>
+      <Button textWrap onClick={noop}>
         View 8 Projects <Icon icon="arrowRight" />
       </Button>
       <Button onClick={noop}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fogcreek/shared-components",
-  "version": "0.13.9",
+  "version": "0.13.10",
   "description": "Shared components",
   "main": "build/main.js",
   "module": "build/module.js",