Skip to content
This repository has been archived by the owner on Dec 13, 2018. It is now read-only.

remove the theme argument #219

Closed
kentcdodds opened this issue Jul 10, 2017 · 5 comments
Closed

remove the theme argument #219

kentcdodds opened this issue Jul 10, 2017 · 5 comments
Labels
BREAKING CHANGE help wanted

Comments

@kentcdodds
Copy link
Contributor

The theme argument can be removed because it's now available in the props. Documentation has already been updated, so this change requires that we remove references to theme here and here (which also means that we can probably remove these tests as well) 👍
@kentcdodds
Copy link
Contributor Author

kentcdodds commented Jul 10, 2017 •
edited

For the benefit of anyone reading this...

You once had code like this:

const MyDiv = glamorous.div((props, theme) => ({
  fontSize: theme.main.fontSize,
}))

You can now write that like this:

const MyDiv = glamorous.div(({theme}) => ({
  fontSize: theme.main.fontSize,
}))

And you can actually start doing this today and it'll work. What's changing is you wont be able to use the theme argument anymore (in the next version).

@kentcdodds kentcdodds mentioned this issue Jul 10, 2017
Closed
@kentcdodds
Copy link
Contributor Author

For anyone else who wants to help, this would be really helpful.

@timdeschryver
Copy link

Is it OK if I'm taking this one? (I want to get familiar with the code-base 😄)
Normally I should be able to take a look at the codemod tomorrow too, if no one has taken it by then.

@kentcdodds
Copy link
Contributor Author

Sounds awesome!

@atticoos atticoos mentioned this issue Jul 10, 2017
Closed
@timdeschryver timdeschryver mentioned this issue Jul 10, 2017
Merged
4 tasks
kentcdodds pushed a commit that referenced this issue Jul 10, 2017
@timdeschryver
fix(get-glamor-classname): remove theme argument (#222)
c43c7d1 
Closes #219

BREAKING CHANGE: theme argument has been removed in favor of getting the `theme` from `props`.

Before:

```javascript
const MyDiv = glamorous.div((props, theme) => ({
  fontSize: theme.main.fontSize,
}))
```

After:

```js
const MyDiv = glamorous.div(({theme}) => ({
  fontSize: theme.main.fontSize,
}))
```
@kentcdodds
Copy link
Contributor Author

This has been merged into next. Will be released 🔜ish

kentcdodds pushed a commit that referenced this issue Jul 25, 2017
@timdeschryver
fix(get-glamor-classname): remove theme argument (#222)
a31ea28 
Closes #219

BREAKING CHANGE: theme argument has been removed in favor of getting the `theme` from `props`.

Before:

```javascript
const MyDiv = glamorous.div((props, theme) => ({
  fontSize: theme.main.fontSize,
}))
```

After:

```js
const MyDiv = glamorous.div(({theme}) => ({
  fontSize: theme.main.fontSize,
}))
```
kentcdodds pushed a commit that referenced this issue Jul 25, 2017
@timdeschryver
fix(get-glamor-classname): remove theme argument (#222)
785162e 
Closes #219

BREAKING CHANGE: theme argument has been removed in favor of getting the `theme` from `props`.

Before:

```javascript
const MyDiv = glamorous.div((props, theme) => ({
  fontSize: theme.main.fontSize,
}))
```

After:

```js
const MyDiv = glamorous.div(({theme}) => ({
  fontSize: theme.main.fontSize,
}))
```
kentcdodds pushed a commit that referenced this issue Jul 27, 2017
@oalbacha
feat(config): change the default of useDisplayNameInClassName (#221)
592346f 
BREAKING CHANGE: `useDisplayNameInClassName` is now defaulted to `process.env.NODE_ENV !== 'test'`

fix(get-glamor-classname): remove theme argument (#222)

Closes #219

BREAKING CHANGE: theme argument has been removed in favor of getting the `theme` from `props`.

Before:

```javascript
const MyDiv = glamorous.div((props, theme) => ({
  fontSize: theme.main.fontSize,
}))
```

After:

```js
const MyDiv = glamorous.div(({theme}) => ({
  fontSize: theme.main.fontSize,
}))
```

fix(typescript): Fixed issue where glamorous accepted invalid functions (#214)

Fixes issue where Partials accept arbitary functions, which resulted in glamorous accepting methods
of any shape.

closes #212

BREAKING CHANGE: Glamorous function arguments will no longer be untyped which will break on any code that was returning things that are not valid style objects.

fix(typescript): complete glamorous component factories (#230)

fix(typescript): glamorous component factory arguments typing

This pr follows on from the work in #212 and the discussion on that pr.

BREAKING CHANGE: This fixes a number of issues with the glamorous component factory
typings

* style objects can only be sets of css or svg properties
* style functions can return a string classname or style object
* glamorous arguments can be a string classname
* glamorous arguments can be a StyleArray containing classnames, style objects and style functions.

This also improves the developer experience provided by intellisense
with autocomplete once again working.

This also includes typing for withComponent and adds typing
for classname and theme props on GlamorousComponents.

This closes #212

* chore(typescript): update theme typings

This pr updates the typescript typing to pass the theme to glamorous
component factory function arguments as a key on props rather than
as the second argument.

* chore(typescript): Update typescript usage documentation

* chore(typescript): use omit to simplify theme usage and fix factory

Introduces Omit and uses it to simplify Theme usage and correct the
component factory component argument typing with classname.

* chore(typescript): add WithComponent bug to known issues

* chore(typescript): bump typescript version to 2.4.2

chore: fix some things

fix(typescript): remove useDisplayNameInClassName and config (#249)

* task(typescript): remove useDisplayNameInClassName and config

This updates the typings based on #247

It also adds tests for the use of displayName.

* fix(typescript): fixes incorrectly used ref in glamorous.test.tsx

fix: remove useDisplayNameInClassName and use glamor's built-in `label` (#247)

closes #242

BREAKING CHANGE: It is no longer possible to configure anything with glamorous

update things

feat: add shouldClassNameUpdate for optimizing glamorous components (#250)

Closes #203

feat(typescript): add shouldClassNameUpdate typing (#251)

* task(typescript): improve glamorous component factory creation

This ensures that when Glamorous component factories are created
with your own components, the resulting glamorous components are
correctly typed.

* task(typescript): add typings for shouldClassNameUpdate

This introduces typescript support for shouldClassNameUpdate.

```ts
// By default glamorous will grab the props from the component passed
// to use context you need to pass props and context as generics
// glamorous<Props, Context>( // ...
const pureDivFactory = glamorous(Component, {
  shouldClassNameUpdate: (props, previousProps, context, previousContext) => {
    if (props.color !== props.color) {
      return false
    }
    return true
  },
})
```

* chore(typescript): document shouldClassNameUpdate typescript usage

feat(typescript): create component factories via dom key (#252)

* task(typescript): improve glamorous component factory creation

This ensures that when Glamorous component factories are created
with your own components, the resulting glamorous components are
correctly typed.

* task(typescript): add typings for shouldClassNameUpdate

This introduces typescript support for shouldClassNameUpdate.

```ts
// By default glamorous will grab the props from the component passed
// to use context you need to pass props and context as generics
// glamorous<Props, Context>( // ...
const pureDivFactory = glamorous(Component, {
  shouldClassNameUpdate: (props, previousProps, context, previousContext) => {
    if (props.color !== props.color) {
      return false
    }
    return true
  },
})
```

* feat(typescript): create component factories from dom keys

This introduces typing to be able to create component factories
from their dom key.  The component createds style arguments return
types will be typed the same as it's equivalent built-in component.

ie. `glamorous('div')({ /* must be valid div styles */`

```ts
glamorous('div')({}) // glamorous.div({})
```
kentcdodds pushed a commit that referenced this issue Aug 3, 2017
@oalbacha
feat(config): change the default of useDisplayNameInClassName (#221)
91e3225 
BREAKING CHANGE: `useDisplayNameInClassName` is now defaulted to `process.env.NODE_ENV !== 'test'`

fix(get-glamor-classname): remove theme argument (#222)

Closes #219

BREAKING CHANGE: theme argument has been removed in favor of getting the `theme` from `props`.

Before:

```javascript
const MyDiv = glamorous.div((props, theme) => ({
  fontSize: theme.main.fontSize,
}))
```

After:

```js
const MyDiv = glamorous.div(({theme}) => ({
  fontSize: theme.main.fontSize,
}))
```

fix(typescript): Fixed issue where glamorous accepted invalid functions (#214)

Fixes issue where Partials accept arbitary functions, which resulted in glamorous accepting methods
of any shape.

closes #212

BREAKING CHANGE: Glamorous function arguments will no longer be untyped which will break on any code that was returning things that are not valid style objects.

fix(typescript): complete glamorous component factories (#230)

fix(typescript): glamorous component factory arguments typing

This pr follows on from the work in #212 and the discussion on that pr.

BREAKING CHANGE: This fixes a number of issues with the glamorous component factory
typings

* style objects can only be sets of css or svg properties
* style functions can return a string classname or style object
* glamorous arguments can be a string classname
* glamorous arguments can be a StyleArray containing classnames, style objects and style functions.

This also improves the developer experience provided by intellisense
with autocomplete once again working.

This also includes typing for withComponent and adds typing
for classname and theme props on GlamorousComponents.

This closes #212

* chore(typescript): update theme typings

This pr updates the typescript typing to pass the theme to glamorous
component factory function arguments as a key on props rather than
as the second argument.

* chore(typescript): Update typescript usage documentation

* chore(typescript): use omit to simplify theme usage and fix factory

Introduces Omit and uses it to simplify Theme usage and correct the
component factory component argument typing with classname.

* chore(typescript): add WithComponent bug to known issues

* chore(typescript): bump typescript version to 2.4.2

chore: fix some things

fix(typescript): remove useDisplayNameInClassName and config (#249)

* task(typescript): remove useDisplayNameInClassName and config

This updates the typings based on #247

It also adds tests for the use of displayName.

* fix(typescript): fixes incorrectly used ref in glamorous.test.tsx

fix: remove useDisplayNameInClassName and use glamor's built-in `label` (#247)

closes #242

BREAKING CHANGE: It is no longer possible to configure anything with glamorous

update things

feat: add shouldClassNameUpdate for optimizing glamorous components (#250)

Closes #203

feat(typescript): add shouldClassNameUpdate typing (#251)

* task(typescript): improve glamorous component factory creation

This ensures that when Glamorous component factories are created
with your own components, the resulting glamorous components are
correctly typed.

* task(typescript): add typings for shouldClassNameUpdate

This introduces typescript support for shouldClassNameUpdate.

```ts
// By default glamorous will grab the props from the component passed
// to use context you need to pass props and context as generics
// glamorous<Props, Context>( // ...
const pureDivFactory = glamorous(Component, {
  shouldClassNameUpdate: (props, previousProps, context, previousContext) => {
    if (props.color !== props.color) {
      return false
    }
    return true
  },
})
```

* chore(typescript): document shouldClassNameUpdate typescript usage

feat(typescript): create component factories via dom key (#252)

* task(typescript): improve glamorous component factory creation

This ensures that when Glamorous component factories are created
with your own components, the resulting glamorous components are
correctly typed.

* task(typescript): add typings for shouldClassNameUpdate

This introduces typescript support for shouldClassNameUpdate.

```ts
// By default glamorous will grab the props from the component passed
// to use context you need to pass props and context as generics
// glamorous<Props, Context>( // ...
const pureDivFactory = glamorous(Component, {
  shouldClassNameUpdate: (props, previousProps, context, previousContext) => {
    if (props.color !== props.color) {
      return false
    }
    return true
  },
})
```

* feat(typescript): create component factories from dom keys

This introduces typing to be able to create component factories
from their dom key.  The component createds style arguments return
types will be typed the same as it's equivalent built-in component.

ie. `glamorous('div')({ /* must be valid div styles */`

```ts
glamorous('div')({}) // glamorous.div({})
```
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
BREAKING CHANGE help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kentcdodds @timdeschryver