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

🌸 DesignLibrary #1187

Open
3 of 12 tasks
zspencer opened this issue Mar 5, 2023 · 0 comments
Open
3 of 12 tasks

🌸 DesignLibrary #1187

zspencer opened this issue Mar 5, 2023 · 0 comments
Labels
✨ feature Reduces Client's Burden or Grants them Benefits 🛠️ infrastructure ci, build, deploy, networking, etc. 🌸 Polish Improves the UX! 🌱 Ready for Dev Stuff we are able to move forward on 🥔 Satisfices It's good enough to use, but not particularly great

Comments

@zspencer
Copy link
Member

zspencer commented Mar 5, 2023 •
edited
Loading

Use Cases

  • 🥔 Browsable Component Previews at /components!
    • 🌱 That works on Production

Components
@zspencer zspencer added the 🛠️ infrastructure ci, build, deploy, networking, etc. label Mar 5, 2023
@zspencer zspencer mentioned this issue Mar 5, 2023
Merged
@zspencer zspencer added this to the 1.0 - Andromeda milestone Mar 5, 2023
zspencer added a commit that referenced this issue Mar 6, 2023
@zspencer
🛠️ Component: Set up view_component ComponentPreviews
65a106b 
- #1187

This is an intermediary step before we look into `LookBook` or similar,
but it:

1. Makes it possible to define component previews in
   `spec/components/previews`
2. Creates a basic layout for showing Components
3. Adds a `CardComponentPreview`
4. Sprouts an `ApplicationComponent` which we can start to massage into
   playing well with tailwind's class syntax
zspencer added a commit that referenced this issue Mar 6, 2023
@zspencer
🛠️ Component: Set up view_component ComponentPreviews
d3ff7b5 
- #1187

This is an intermediary step before we look into `LookBook` or similar,
but it:

1. Makes it possible to define component previews in
   `spec/components/previews`
2. Creates a basic layout for showing Components
3. Adds a `CardComponentPreview`
4. Sprouts an `ApplicationComponent` which we can start to massage into
   playing well with tailwind's class syntax
zspencer added a commit that referenced this issue Mar 6, 2023
@zspencer
🛠️ Component: Set up view_component ComponentPreviews
17ddcdc 
- #1187

This is an intermediary step before we look into `LookBook` or similar,
but it:

1. Makes it possible to define component previews in
   `spec/components/previews`
2. Creates a basic layout for showing Components
3. Adds a `CardComponentPreview`
4. Sprouts an `ApplicationComponent` which we can start to massage into
   playing well with tailwind's class syntax
@zspencer zspencer mentioned this issue Mar 6, 2023
Merged
zspencer added a commit that referenced this issue Mar 6, 2023
@zspencer
🛠️ Component: Sprout CardComponentPreview
c8e6f9d 
- #1187

This:

3. Adds a `CardComponentPreview`
4. Sprouts an `ApplicationComponent` which we can start to massage into playing well with tailwind's class syntax

<img width="577" alt="Screenshot 2023-03-05 at 6 14 16 PM" src="https://user-images.githubusercontent.com/50284/223004317-f0bf8d69-0c13-40e9-862c-5bf7826f6654.png">
<img width="575" alt="Screenshot 2023-03-05 at 6 14 08 PM" src="https://user-images.githubusercontent.com/50284/223004320-057da756-7d6d-49e1-9691-e81255adff6b.png">
@zspencer zspencer mentioned this issue Mar 6, 2023
Merged
zspencer added a commit that referenced this issue Mar 6, 2023
@zspencer
🛠️ Component: Set up view_component ComponentPreviews
6c6fec4 
- #1187

This is an intermediary step before we look into `LookBook` or similar,
but it:

1. Makes it possible to define component previews in
   `spec/components/previews`
2. Creates a basic layout for showing Components
zspencer added a commit that referenced this issue Mar 6, 2023
@zspencer
🛠️ Component: Set up view_component Previews (#1190)
d6d5926 
- #1187

This is an intermediary step before we look into `LookBook` or similar,
but it:

1. Makes it possible to define component previews in
   `spec/components/previews`
2. Creates a basic layout for showing Components
zspencer added a commit that referenced this issue Mar 7, 2023
@zspencer
Components: Install Lookbook for Component Preview
383e6e4 
- #1187

Now we get even *shinier* components! Such shiny! Very browse! Much wow!

I went with the 2.0 beta because I figured it's close to prod.
@zspencer zspencer mentioned this issue Mar 7, 2023
Merged
zspencer added a commit that referenced this issue Mar 7, 2023
@zspencer
🛠️🧹 Component: Sprout CardComponentPreview (#1191)
de7596d 
- #1187

This:

3. Adds a `CardComponentPreview`
4. Sprouts an `ApplicationComponent` which we can start to massage into playing well with tailwind's class syntax

<img width="577" alt="Screenshot 2023-03-05 at 6 14 16 PM" src="https://user-images.githubusercontent.com/50284/223004317-f0bf8d69-0c13-40e9-862c-5bf7826f6654.png">
<img width="575" alt="Screenshot 2023-03-05 at 6 14 08 PM" src="https://user-images.githubusercontent.com/50284/223004320-057da756-7d6d-49e1-9691-e81255adff6b.png">
zspencer added a commit that referenced this issue Mar 7, 2023
@zspencer @naomiquinones
🛠️🧹 Components: Make ButtonComponent more Customizable (#1188)
dc230dd 
- #1187

While attempting to use the `IconButtonComponent` for the
`Marketplace::Cart::DeliveryAddress#update` flow, we realized we didn't
have the affordances we needed to adjust the component.

So we introduced a constructor parameter for setting arbitrary classes
on the component, which makes it possible for us to adjust the
padding/text/background/etc.

🛠️🧹 `Component`: rename `IconButtonComponent`

It seems like `ButtonComponent` is a more appropriate name, given that:

- It doesn't have any `Icon` *specific* behavior and
- It's shorter

Co-authored-by: Naomi Quinones <[email protected]>
zspencer added a commit that referenced this issue Mar 7, 2023
@zspencer
🛠️🌸 Components: Install Lookbook for Component Preview (#1194)
26c289f 
- #1187

Now we get even *shinier* components! Such shiny! Very browse! Much wow!

I went with the 2.0 beta because I figured it's close to prod.
zspencer added a commit that referenced this issue Mar 11, 2023
@zspencer
🧹Components: Light syntactical sugar for finding Components
b350a7c 
- #1187

This is probably a premature optimization, but I hate writing the entire
class name out in template files! I don't know why! It just bothers me!
@zspencer zspencer mentioned this issue Mar 11, 2023
Closed
zspencer added a commit that referenced this issue Mar 11, 2023
@zspencer
🧹Components: Light syntactical sugar for finding Components
b8e92f0 
- #1187

This is probably a premature optimization, but I hate writing the entire
class name out in template files! I don't know why! It just bothers me!
@zspencer zspencer mentioned this issue Mar 16, 2023
Merged
zspencer added a commit that referenced this issue Mar 16, 2023
@zspencer @anaulin
@daltonrpruitt @KellyAH @rosschapman
✨ Neighborhood: Make money_field look more like text_field (#1220)
0822c00 
- #1187

A super cool person may want to actually make this a Component, which
would be super cool.

Co-authored-by: Ana Ulin <[email protected]>
Co-authored-by: Dalton Pruitt <[email protected]>
Co-authored-by: Kelly Hong <[email protected]>
Co-authored-by: Ross Chapman <[email protected]>
@zspencer zspencer mentioned this issue Mar 23, 2023
Merged
zspencer added a commit that referenced this issue Apr 2, 2023
@zspencer
🛠️ Component: ButtonComponent supports GET Turbo Streams
002e347 
- #1187
- https://turbo.hotwired.dev/handbook/streams#streaming-from-http-responses

It turns out that `Turbo` only does turbo-streams when
`PUT`/`POST`/`DELETE` are the request methods.

If we want to make `GET` requests use the `turbo-stream` request type,
we need to specify it in the HTML output, i.e. `<a href="..."
data-turbo-stream=true>`

I wasn't sure if this should be default behavior or not, so I leaned
towards making it default to not 🤷
zspencer added a commit that referenced this issue Apr 2, 2023
@zspencer
🛠️ Component: ButtonComponent supports GET Turbo Streams
b11ba9f 
- #1187
- https://turbo.hotwired.dev/handbook/streams#streaming-from-http-responses

It turns out that `Turbo` only does turbo-streams when
`PUT`/`POST`/`DELETE` are the request methods.

If we want to make `GET` requests use the `turbo-stream` request type,
we need to specify it in the HTML output, i.e. `<a href="..."
data-turbo-stream=true>`

I wasn't sure if this should be default behavior or not, so I leaned
towards making it default to not 🤷
@zspencer zspencer mentioned this issue Apr 2, 2023
Merged
zspencer added a commit that referenced this issue Apr 3, 2023
@zspencer
🛠️ Component: ButtonComponent supports GET Turbo Streams (#1297)
4f934f0 
- #1187
-
https://turbo.hotwired.dev/handbook/streams#streaming-from-http-responses

It turns out that `Turbo` only does turbo-streams when
`PUT`/`POST`/`DELETE` are the request methods.

If we want to make `GET` requests use the `turbo-stream` request type,
we need to specify it in the HTML output, i.e. `<a href="..."
data-turbo-stream=true>`

I wasn't sure if this should be default behavior or not, so I leaned
towards making it default to not 🤷
anaulin pushed a commit that referenced this issue Apr 3, 2023
@zspencer @anaulin
🛠️ Component: ButtonComponent supports GET Turbo Streams
3698c48 
- #1187
- https://turbo.hotwired.dev/handbook/streams#streaming-from-http-responses

It turns out that `Turbo` only does turbo-streams when
`PUT`/`POST`/`DELETE` are the request methods.

If we want to make `GET` requests use the `turbo-stream` request type,
we need to specify it in the HTML output, i.e. `<a href="..."
data-turbo-stream=true>`

I wasn't sure if this should be default behavior or not, so I leaned
towards making it default to not 🤷
@zspencer zspencer added ✨ feature Reduces Client's Burden or Grants them Benefits 🌸 Polish Improves the UX! 🥔 Satisfices It's good enough to use, but not particularly great labels Apr 8, 2023
@zspencer zspencer mentioned this issue May 26, 2023
Open
zspencer added a commit that referenced this issue Jun 25, 2023
@zspencer
✨🥔 Components: Expose ButtonComponent#danger variant
0095772 
- #1187

As part of #1592 I needed
a Button that used the `dange` variant and all the turbo-y goodness.

So I pulled a variant into the `ButtonComponent`; and then we can search
for `--danger` and purge them.
@zspencer zspencer mentioned this issue Jun 25, 2023
Merged
zspencer added a commit that referenced this issue Jun 25, 2023
@zspencer
✨🥔 Components: Expose ButtonComponent#danger variant (#1596)
9697967 
* ✨🥔 `Components`: Expose ButtonComponent#danger variant

- #1187

As part of #1592 I needed
a Button that used the `dange` variant and all the turbo-y goodness.

So I pulled a variant into the `ButtonComponent`; and then we can search
for `--danger` and purge them.
zspencer added a commit that referenced this issue Jun 28, 2023
@zspencer @KellyAH
Component: Add bell option to SvgComponent
155996c 
- #1511
- #1187

Co-authored-by: Kelly Hong <[email protected]>
@zspencer zspencer mentioned this issue Jun 28, 2023
Merged
zspencer added a commit that referenced this issue Jun 28, 2023
@zspencer @KellyAH
Component: Add bell option to SvgComponent
36545a7 
- #1511
- #1187

Co-authored-by: Kelly Hong <[email protected]>
zspencer added a commit that referenced this issue Jun 29, 2023
@zspencer @KellyAH
Component: Add bell option to SvgComponent
1a9fe75 
- #1511
- #1187

Co-authored-by: Kelly Hong <[email protected]>
zspencer added a commit that referenced this issue Jun 29, 2023
@zspencer @KellyAH
🌸✨ Component: Add bell option to SvgComponent (#1614)
d425c08 
`Component`: Add `bell` option to `SvgComponent`

- #1511
- #1187

Co-authored-by: Kelly Hong <[email protected]>
@zspencer zspencer removed this from the 1.0 - Andromeda milestone Jul 13, 2023
@zspencer zspencer mentioned this issue Jul 27, 2023
Merged
1 task
@zspencer zspencer mentioned this issue Aug 14, 2023
Merged
zspencer added a commit that referenced this issue Aug 15, 2023
@zspencer
🧹 Components: Add Turbo support
b799212 
- #1187

I tried using `helpers.turbo_frame_tag` in a component and it duplicated
the content!

Then I found this:
ViewComponent/view_component#1099 (comment)

And now we can use
[`turbo_frame_tag`](https://rubydoc.info/gems/turbo-rails/1.4.0/Turbo/FramesHelper#turbo_frame_tag-instance_method)
directly.
@zspencer zspencer mentioned this issue Aug 15, 2023
Merged
zspencer added a commit that referenced this issue Aug 15, 2023
@zspencer
🧹 Components: Add Turbo support (#1762)
cd13f71 
- #1187

I tried using `helpers.turbo_frame_tag` in a component and it duplicated
the content!

Then I found this:
ViewComponent/view_component#1099 (comment)

And now we can use
[`turbo_frame_tag`](https://rubydoc.info/gems/turbo-rails/1.4.0/Turbo/FramesHelper#turbo_frame_tag-instance_method)
directly.
zspencer added a commit that referenced this issue Nov 24, 2023
@zspencer
🧹 Components: Rename nude to minimal
5170014 
- #1187

Sometimes there are pages where we don't want to include anything but
the body; such as in
#1956

This renames that layout from `nude` to `minimal`
zspencer added a commit that referenced this issue Nov 24, 2023
@zspencer
🧹 Components: Rename nude to minimal
bb1739d 
- #1187

Sometimes there are pages where we don't want to include anything but
the body; such as in
#1956

This renames that layout from `nude` to `minimal`
@zspencer zspencer mentioned this issue Nov 24, 2023
Merged
@zspencer zspencer changed the title 🌱🌸🥔🛠️✨ Neighborhood: Components 🌱🌸🥔🛠️✨ DesignLibrary Nov 24, 2023
zspencer added a commit that referenced this issue Nov 25, 2023
@zspencer
🧹 Components: Rename nude to minimal (#1963)
24266f2 
- #1187

Sometimes there are pages where we don't want to include anything but
the body; such as in
#1956

This renames that layout from `nude` to `minimal`
@zspencer zspencer mentioned this issue Dec 27, 2023
Merged
zspencer added a commit that referenced this issue Dec 28, 2023
@zspencer
🧹 CardComponent: Cards fill as much space as they can (#2071)
d40de8a 
- #1187

This won't do anything in most cases; but if a `CardComponent` is inside
of an element with height, such as a `grid`; it will take up the entire
thing.

It's possible that we should be using `items-stretch` or something?
@zspencer zspencer mentioned this issue Jan 4, 2024
Open
@zspencer zspencer mentioned this issue Jan 11, 2024
Open
@zspencer zspencer mentioned this issue Feb 17, 2024
Open
@zspencer zspencer changed the title 🌱🌸🥔🛠️✨ DesignLibrary 🌸 DesignLibrary Feb 17, 2024
zspencer added a commit that referenced this issue Mar 7, 2024
@zspencer
🌸 DesignLibrary: Layout is responsible for.... Layout...
515c686 
- #1187
- #2271
- #2253

One of the things we've kept bumping into is that each page has to
decide how wide it wants to be. That doesn't really seem sustainable or
particularly necessary; so now the Layout takes care of:

- Providing a Max-Width on every page
- Ensuring the Layout is centered horizontally
- Ensuring there is appropriate margin from the top
  of the screen
@zspencer zspencer mentioned this issue Mar 7, 2024
Merged
zspencer added a commit that referenced this issue Mar 7, 2024
@zspencer
🌸 DesignLibrary: Layout is responsible for.... Layout... (#2281)
7e24542 
- #1187
- #2271
- #2253

One of the things we've kept bumping into is that each page has to
decide how wide it wants to be. That doesn't really seem sustainable or
particularly necessary; so now the Layout takes care of:

- Providing a Max-Width on every page
- Ensuring the Layout is centered horizontally
- Ensuring there is appropriate margin from the top
  of the screen
zspencer added a commit to zinc-collective/tobias that referenced this issue Mar 25, 2024
@zspencer
🌸 DesignLibrary: Layout is responsible for.... Layout... (zinc-coll…
a92e7f9 
…ective#2281)

- zinc-collective#1187
- zinc-collective#2271
- zinc-collective#2253

One of the things we've kept bumping into is that each page has to
decide how wide it wants to be. That doesn't really seem sustainable or
particularly necessary; so now the Layout takes care of:

- Providing a Max-Width on every page
- Ensuring the Layout is centered horizontally
- Ensuring there is appropriate margin from the top
  of the screen
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
✨ feature Reduces Client's Burden or Grants them Benefits 🛠️ infrastructure ci, build, deploy, networking, etc. 🌸 Polish Improves the UX! 🌱 Ready for Dev Stuff we are able to move forward on 🥔 Satisfices It's good enough to use, but not particularly great
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@zspencer