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

feat: sd-map-marker – add component #573

Closed
4 of 7 tasks
mariohamann opened this issue Apr 21, 2023 · 23 comments · Fixed by #1006
Closed
4 of 7 tasks

feat: sd-map-marker – add component #573

mariohamann opened this issue Apr 21, 2023 · 23 comments · Fixed by #1006
Assignees
@van-nguyen-ht
Labels
CL-migration All components which need to be migrated from Component Library 🎨 figma needs changes in Figma sd-map

Comments

@mariohamann
Copy link
Contributor

mariohamann commented Apr 21, 2023 •
edited by coraliefeil

Map marker components are needed.

[description]

sd-map-marker V.0.0.1

[figma link]

  • Clarify Requirements
  • Figma Component Draft
  • Brand Approval
  • Figma Component Refined (incl. Tokens)
  • Figma Test
  • Figma Review
  • Figma Release

Storybook:

Surrounding map (am besten mit Typ "bar" testbar) https://component-library.dev.fe.union-investment.de/feat_PB2B-5245-create-map-marker-component/storybook/index.html?path=/story/components-surrounding-map--configurable&args=placeType:bar&globals=backgrounds.value:!hex(F6F6F6)

MapMarker (am besten oben auf "Docs" klicken): https://component-library.dev.fe.union-investment.de/feat_PB2B-5245-create-map-marker-component/storybook/index.html?path=/story/components-mapmarker--default&globals=backgrounds.value:!hex(F6F6F6)
@coraliefeil
Copy link
Contributor

Pls add pins to figma branch
https://www.figma.com/file/VTztxQ5pWG7ARg8hCX6PfR/branch/1zKhsJrAC54nmZFa7aR1te/Component-Library-%E2%80%93-Solid-DS?node-id=4803%3A25242&t=nQIy5YLQknWuOhb4-1

@mariohamann
Copy link
Contributor Author

mariohamann commented Apr 24, 2023 •
edited

  1. I find the pins quite large overall. A scale of 0.8 seems to me a better compromise between icon and pin presence than the current 1.0 (you can try it out in Storybook)
  2. There are also Hover and Selected styles, but they are not currently implemented.
    Pins.zip (Original files) You can also have a look in Sketch
  3. A design component for the "white" variant should also offer the possibility to include a content icon (?!)...
  4. For the development we always need the SVG with a "real" shadow - Figma and others like to export this as PNG. I have already done an implementation of this. <svg fill="${color}" xmlns="http://www.w3.org/2000/svg" width="60" height="75"><path style="filter: drop-shadow(0px 3px 1px rgb(0 0 0 / 0.2));" fill-rule="evenodd" d="M51 49A29 29 0 0 0 30 0 29 29 0 0 0 9 49l21 22 21-22ZM40 28a10 10 0 1 1-20 0 10 10 0 0 1 20 0Z" clip-rule="evenodd"/></svg> (Important part: filter: drop-shadow(0px 3px 1px rgb(0 0 0 / 0.2))
  5. In general: For development we could actually offer a helper function, which we provide globally to generate the SVGs dynamically. I think that would make a lot of sense, because that is sometimes really tricky, especially in combination with icons in the logo and so on. It would be good to think in such a direction.

@karlbaumhauer karlbaumhauer changed the title "Pins" in Design System discuss: "Pins" in Design System Apr 25, 2023
@coraliefeil coraliefeil changed the title discuss: "Pins" in Design System feat: add sample-pin as design comp in figma May 8, 2023
@coraliefeil coraliefeil changed the title feat: add sample-pin as design comp in figma feat: sample-pin – add design comp in figma May 9, 2023
@coraliefeil coraliefeil changed the title feat: sample-pin – add design comp in figma feat: sd-map-marker – add component May 16, 2023
@coraliefeil
Copy link
Contributor

Update from Mario: map markers can be components since latest google map api update

@mariohamann mariohamann changed the title feat: sd-map-marker – add component feat(dev): sd-map-marker – add component Jun 13, 2023
@mariohamann mariohamann changed the title feat(dev): sd-map-marker – add component feat(dev+design): sd-map-marker – add component Jun 13, 2023
@coraliefeil coraliefeil changed the title feat(dev+design): sd-map-marker – add component feat(design+dev): sd-map-marker – add component Jun 19, 2023
@mariohamann mariohamann changed the title feat(design+dev): sd-map-marker – add component feat(design): sd-map-marker – add component Jul 11, 2023
@mariohamann mariohamann transferred this issue from solid-design-system/solid Jul 19, 2023
@mariohamann mariohamann changed the title feat(design): sd-map-marker – add component feat: sd-map-marker – add component Jul 19, 2023
@van-nguyen-ht
Copy link
Contributor

component build in Figma
https://www.figma.com/file/VTztxQ5pWG7ARg8hCX6PfR/branch/1zKhsJrAC54nmZFa7aR1te/Solid-DS-%E2%80%93-Component-Library?type=design&node-id=4803%3A25242&mode=design&t=A59GaQxad7BL0uQf-1

@coraliefeil
Copy link
Contributor

on hold - deprioritized

@karlbaumhauer
Copy link
Contributor

@mariohamann is there anything confidential in the attached files?

@mariohamann
Copy link
Contributor Author

Nope.

@van-nguyen-ht van-nguyen-ht removed their assignment Mar 28, 2024
@coraliefeil
Copy link
Contributor

@van-nguyen-ht pls update / fill out issue description according to our issue templates. Merci

1 similar comment
@coraliefeil
Copy link
Contributor

@van-nguyen-ht pls update / fill out issue description according to our issue templates. Merci

@van-nguyen-ht
Copy link
Contributor

per discussion with @ella:
-no blue variant for pin
-only content icon would be used

@coraliefeil
Copy link
Contributor

Ah ok, no blue marker then ... alright. Then change it back, pls ;)

Left some comments.

Thank you <3

@van-nguyen-ht
Copy link
Contributor

@coraliefeil Implemented what you wrote. I'll put the ticket into Ready to wait for development.

@van-nguyen-ht van-nguyen-ht added the 🚧🛑🚧 waiting for DEV 🚧🛑🚧 Design is done but waiting for DEV to publish together label Apr 5, 2024
@coraliefeil
Copy link
Contributor

@van-nguyen-ht thanks

Add link to figma branch to this ticket here so we can refine it for implementation.
#308

I’ll get brand approval in the meantime.

@van-nguyen-ht
Copy link
Contributor

Figma Branch

@van-nguyen-ht
Copy link
Contributor

van-nguyen-ht commented Apr 9, 2024 •
edited

Hi @mariohamann Mario, we have some questions related to this and the #308

Regarding map configuration:

Image

  1. There's a mapColor prop in the old build here, what does it allow the user to do?
  2. In this same screenshot, there's also other pins that don't consume UI style, what's the rule here?
  3. In general do we provide any styling customization option to user?
  4. Focus state of sd-map-marker would be like this? Or can I make it round like radio?
    Image

Regarding comp naming convention:
Is the map considered a solid component, a pattern or a sample?

@mariohamann
Copy link
Contributor Author

mariohamann commented Apr 9, 2024 •
edited

  1. I don't know. Doesn't seem to change anything.
  2. The other pins are provided by Google Maps itself, while the UI one's are set by the app or whatever. Nothing that has to bother us.
  3. Customization is easily doable as shown here: https://mapstyle.withgoogle.com We should maybe more think about providing a theme.
  4. Not sure, if we have a way to make it in the shape of the element. Maybe it will look like this, yes.

Naming convention: From my expectation I woldn't offer a Solid Component but more a pattern or sample.

@mariohamann mariohamann removed their assignment Apr 9, 2024
@yoezlem yoezlem mentioned this issue Apr 9, 2024
Closed
13 tasks
@coraliefeil coraliefeil added 🚧🛑🚧 BLOCKED 🚧🛑🚧 Item is blocked and cannot be continued. and removed 🚧🛑🚧 waiting for DEV 🚧🛑🚧 Design is done but waiting for DEV to publish together 🚧🛑🚧 BLOCKED 🚧🛑🚧 Item is blocked and cannot be continued. labels Apr 11, 2024
This was referenced Apr 12, 2024
Open
Closed
@van-nguyen-ht van-nguyen-ht added the 🚧🛑🚧 waiting for DEV 🚧🛑🚧 Design is done but waiting for DEV to publish together label Apr 15, 2024
@van-nguyen-ht van-nguyen-ht mentioned this issue Apr 18, 2024
Merged
3 tasks
@coraliefeil
Copy link
Contributor

@van-nguyen-ht pls publish the comp. Code comp has been released on Friday.

karlbaumhauer pushed a commit that referenced this issue Apr 30, 2024
@van-nguyen-ht
fix: removing shadow-md token (#963)
c811e74 
BREAKING CHANGE: remove `shadow-md` token

following
[#573](#573)
shadow-md was created through importing from the old sketch file.
Since in the new design, it's visually sufficient for the map marker to
consume the shadow token, this token is no longer valid and need to be
deprecated
karlbaumhauer pushed a commit that referenced this issue Apr 30, 2024
@semantic-release-bot
chore(release/tokens): 4.0.0 [skip actions]
478c64a 
# [@solid-design-system/tokens-v4.0.0](tokens/3.1.0...tokens/4.0.0) (2024-04-30)

### Bug Fixes

* removing shadow-md token ([#963](#963)) ([c811e74](c811e74)), closes [#573](#573)

### BREAKING CHANGES

* remove `shadow-md` token

following
@van-nguyen-ht van-nguyen-ht mentioned this issue May 2, 2024
Merged
3 tasks
@van-nguyen-ht
Copy link
Contributor

complete, this ticket will be closed after #1006 is closed

@yoezlem yoezlem removed the 🚧🛑🚧 waiting for DEV 🚧🛑🚧 Design is done but waiting for DEV to publish together label May 2, 2024
van-nguyen-ht added a commit that referenced this issue May 3, 2024
@van-nguyen-ht
ci(token): add *background-transparent|30 token for sd-map-marker (#1006
a5e4c93 
)

## Description:
link to ticket #963 
following
[#573](#573)
closes #573 
shadow-md was created from the style importing from the old sketch file.
Since in the new design, it's visually sufficient for the map marker to
consume the shadow token, this token is no longer valid and need to be
deprecated at releasing

## Definition of Reviewable:
*PR notes: Irrelevant elements should be removed.*
- [x] Documentation is created/updated
- [x] Migration Guide is created/updated
- [x] relevant tickets are linked
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@van-nguyen-ht van-nguyen-ht

Labels
CL-migration All components which need to be migrated from Component Library 🎨 figma needs changes in Figma sd-map
Projects
Solid Design System Project Board
Status: ✅ Done
[legacy] - SDS Roadmap
Status: Planned
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

ci(token): add *background-transparent|30 token for sd-map-marker solid-design-system/solid
5 participants
@mariohamann @coraliefeil @karlbaumhauer @yoezlem @van-nguyen-ht