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

nimble-card Component #296

Open
12 of 13 tasks
m-akinc opened this issue Jan 28, 2022 · 1 comment
Open
12 of 13 tasks

nimble-card Component #296

m-akinc opened this issue Jan 28, 2022 · 1 comment
Assignees
@fredvisser
Labels
enhancement New feature or request new component Request for a new component

Comments

@m-akinc
Copy link
Contributor

m-akinc commented Jan 28, 2022 •
edited
Loading

😯 Problem to Solve

Need to create a new Nimble component to display other components within a card. This was requested by the following clients but could be useful in other places:

  1. Transportation BU (1st screenshot below; contact Jonathan Meyer or Deborah Bryant for more info).
  2. SLE landing page (2nd screenshot below; contact Fred Visser, Mark Black, or Michael Brandt for more info)

💁 Proposed Solution

image
image
image from this BTS wireframe

Requirements/features

  • visual styling like drop shadows
  • slots to include arbitrary content
  • future: higher level card layouts as a mobile-friendly representation of a data grid?

📋 Tasks

  • nimble-card visual design issue
  • nimble-card visual design spec
  • nimble-card spec
  • nimble-card custom element
  • nimble-card unit tests
  • nimble-card Storybook tests
  • nimble-card Storybook docs
  • nimble-card Angular wrapper
  • nimble-card Blazor wrapper
  • Add to Angular example app
  • Add to Blazor example app
  • Update Component Status table in README and incubating status
  • nimble-card pattern/usage documentation
@m-akinc m-akinc added the enhancement New feature or request label Jan 28, 2022
@fredvisser fredvisser added the new component Request for a new component label Aug 10, 2022
@mollykreis mollykreis mentioned this issue Aug 18, 2022
Merged
1 task
@kjohn1922 kjohn1922 mentioned this issue Oct 23, 2023
Merged
kjohn1922 added a commit that referenced this issue Oct 30, 2023
@kjohn1922
Spec for nimble-card component (#1618)
74646b8 
# Pull Request

## 🤨 Rationale

We want to introduce a nimble-card component for the new Routines UX in
SLE. See the initial feature HLD here:
[Feature Design: No code Routines
creation](https://ni.visualstudio.com/DevCentral/_git/Skyline?path=%2Fdocs%2Fdesign-documents%2FRoutines%2FNo-code-Routines-creation.md&version=GBmaster&_a=preview)

This type of component has previously been requested for other use cases
as well:
[GitHub Issue #296: nimble-card
component](#296)

This is a draft of a spec doc

## 👩‍💻 Implementation

Added README under `nimble-components/src/card/specs`.

See prototype branch here:
https://github.com/ni/nimble/tree/users/kelseyj/card-prototype

## 🧪 Testing

N/A

## ✅ Checklist

~~- [ ] I have updated the project documentation to reflect my changes
or determined no changes are needed.~~
@jattasNI jattasNI mentioned this issue Oct 30, 2023
Merged
1 task
kjohn1922 added a commit that referenced this issue Nov 1, 2023
@kjohn1922 @jattasNI
Add incubating nimble-card component (#1630)
0049146 
# Pull Request

Initial component code for the `nimble-card` component.

See #296 and the [`nimble-card`
spec](https://github.com/ni/nimble/blob/main/packages/nimble-components/src/card/specs/README.md)
for more information.

## 🤨 Rationale

This adds the initial `nimble-card` component, storybook, and tests.

I will add a "title" slot to the template in a future PR. Future PRs
will also add Angular and Blazor support.

The styling in the component right now is intended as a placeholder. We
will get styling from our designer and update the styles before
releasing the Routines UI with the card component.

## 👩‍💻 Implementation

- Added myself as a code owner for the incubating component, per the
contributing instructions
- Marked the component as incubating in the component-status table
- Added index, styles, and template files for the new component, called
`nimble-card`


## 🧪 Testing

- Added a storybook page under Incubating with an example
- Added a spec file with a basic unit test

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

---------

Co-authored-by: Jesse Attas <[email protected]>
@kjohn1922 kjohn1922 mentioned this issue Nov 1, 2023
Merged
1 task
kjohn1922 added a commit that referenced this issue Nov 2, 2023
@kjohn1922
Add a title slot to the Card component (#1638)
67a2e37 
# Pull Request

Add a title slot for the `nimble-card` component.

See #296 and the [`nimble-card`
spec](https://github.com/ni/nimble/blob/main/packages/nimble-components/src/card/specs/README.md)
for more information.

## 🤨 Rationale

The `title` slot in the `nimble-card` component will make it easy for
clients to add a title with the correct styling and to enforce
consistency across usages.

The style itself is still a placeholder. We'll apply styles from a
visual design in a future PR, before releasing the Routines UI with the
card component.

## 👩‍💻 Implementation

- Add a `slot` with `name="title"` to the `nimble-card` template
- Add a style to apply a title font to the title slot (placeholder, may
require additional styling from visual design)
- For accessibility, put a `section` at the root of the component
template
- Use `display: contents` to allow the `host` display settings to apply
directly to the slotted content.
- Add a title to the matrix stories
- Add a configurable title to the storybook page.
- Modeled after the `nimble-banner` with similar description text for
the title.

## 🧪 Testing

Updated storybook and matrix tests:


![image](https://github.com/ni/nimble/assets/35350751/9a7e5bd4-dd3e-4a48-b527-de924e2391b6)

![image](https://github.com/ni/nimble/assets/35350751/4606f41e-d499-435c-a5e3-0947ff2238c7)

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.
This was referenced Nov 2, 2023
Merged
Merged
kjohn1922 added a commit that referenced this issue Nov 6, 2023
@kjohn1922
Add Blazor support for the nimble-card (#1647)
4ed966e 
# Pull Request

Add Blazor support for the `nimble-card` component.

See #296 and the [`nimble-card`
spec](https://github.com/ni/nimble/blob/main/packages/nimble-components/src/card/specs/README.md)
for more information.

## 🤨 Rationale

For the sake of completeness, we want to also add Blazor support for the
new `nimble-card` component.

## 👩‍💻 Implementation

- Create a NimbleCard razor class for the `nimble-card` component
- Update the component status table to "incubating" for Blazor support

## 🧪 Testing

- Added a basic unit test
- Added an example to example app:

![image](https://github.com/ni/nimble/assets/35350751/4bc99c4e-6d4d-46f3-aeed-ae9f89931a03)

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.
rajsite added a commit that referenced this issue Nov 8, 2023
@kjohn1922 @mollykreis @rajsite
Add Angular support for the nimble-card (#1646)
57ee0e9 
# Pull Request

Add Angular support for the `nimble-card` component.

See #296 and the [`nimble-card`
spec](https://github.com/ni/nimble/blob/main/packages/nimble-components/src/card/specs/README.md)
for more information.

## 🤨 Rationale

We want to be able to use the `nimble-card` in Angular applications.

## 👩‍💻 Implementation

- Add and export a new Angular directive and module for the
`nimble-card` component
- Update the component status table to "incubating" for Angular support

## 🧪 Testing

- Added a basic unit test
- Added an example to example-client-app:

![image](https://github.com/ni/nimble/assets/35350751/57827bf5-91dd-4654-98a6-053900aba046)

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

---------

Co-authored-by: mollykreis <[email protected]>
Co-authored-by: Milan Raj <[email protected]>
@jattasNI
Copy link
Contributor

jattasNI commented Dec 11, 2023 •
edited
Loading

Remaining open questions before moving the card out of "incubating" and closing this issue are around usage guidance for cards vs accordions. Should cards ever be collapsible? If so, would they just be replaced by accordion or are there still independent purposes?

Fred can start driving this as he has bandwidth and works more on usage docs in the coming months.

Edit: there are ongoing discussions about how to move the card out of incubating (#2406). Maybe it will move to Spright, maybe it will be promoted to non-incubating, maybe it will be supplanted by another component like the accordion. Fred is working on a pattern for configuration drawers and dialogs which may provide clarity.

@m-akinc m-akinc closed this as completed Jul 16, 2024
@m-akinc m-akinc reopened this Jul 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@fredvisser fredvisser

Labels
enhancement New feature or request new component Request for a new component
Projects
Nimble Design System Priorities
Status: Defined/Ready to Pickup
Milestone
No milestone
Development

No branches or pull requests
3 participants
@fredvisser @m-akinc @jattasNI