Semantic-Org/Semantic-UI-React

Search: ability to pass Image props in SearchResult

Open

#3619 opened on May 24, 2019

View on GitHub
 (4 comments) (0 reactions) (0 assignees)JavaScript (13,136 stars) (4,065 forks)batch import
enhancementhelp wanted

Description

Feature Request

Problem description

I wanted to use circular images in <Search> results. However, the image prop only accepts a string according to the documentation, not a props object.

I tried passing an object anyway { circular : true, src : 'https://...' } and it renders the image successfully. However, the image isn't circular, despite the fact that the circular class is correctly applied. The border-radius seems to be overridden by a selector with higher precedence. I then tried using a custom render function and had the same result.

Since the documentation doesn't indicate that props objects are supported here, maybe this is expected? But it's kind of surprising nonetheless.

Proposed solution

Officially support props object for image and fix any relevant CSS precedence issues.

MVP

https://codesandbox.io/s/semantic-ui-react-xce2z

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Familiarity with React componentsUnderstanding of CSS specificity
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Examine the Search component in the Semantic UI React repository, particularly how the `image` prop is handled in SearchResult. Check the Image component's prop types and styling. Replicate the CSS precedence issue shown in the provided CodeSandbox. Potential fix involves modifying the SearchResult to accept an object for `image` and ensuring the `circular` class is not overridden by other styles. Look at existing PRs or comments for guidance.