Barista: [ํ•„ํ„ฐ ํ•„๋“œ] ์ฒซ ๋ฒˆ์งธ ํ•ญ๋ชฉ์ด ํ•ญ์ƒ ์„ ํƒ๋œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2020๋…„ 05์›” 20์ผ  ยท  10์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: dynatrace-oss/barista

๋ฒ„๊ทธ ์‹ ๊ณ 

์˜ˆ์ƒ๋˜๋Š” ๋™์ž‘

๋งˆ์šฐ์Šค๊ฐ€ ์œ„์— ์žˆ๋Š” ํ•ญ๋ชฉ์—๋งŒ ์ƒ‰์ƒ์ด ์ง€์ •๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

ํ˜„์žฌ ํ–‰๋™

๋งˆ์šฐ์Šค๋ฅผ ๊ฐ€์ ธ๊ฐ€๋Š” ํ•ญ๋ชฉ๊ณผ ์ฒซ ๋ฒˆ์งธ ํ•ญ๋ชฉ์— ์ƒ‰์ƒ์ด ์ง€์ •๋ฉ๋‹ˆ๋‹ค.

๊ฐ€๋Šฅํ•œ ํ•ด๊ฒฐ์ฑ…

์‚ฌ์šฉ์ž๊ฐ€ ํด๋ฆญํ•  ๋•Œ ๋ฌด์—‡์„ ์„ ํƒํ• ์ง€ ํ˜ผ๋™๋  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์ˆ˜์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋ฒˆ์‹ ๋‹จ๊ณ„

์—ฌ๊ธฐ์—์„œ ์ฒซ ๋ฒˆ์งธ ํ•„ํ„ฐ ํ•„๋“œ๋ฅผ ์‚ฌ์šฉํ•ด ๋ณด์„ธ์š”.
https://barista.dynatrace.com/components/filter-field

  • ์ž๋™ ์™„์„ฑ, ์„ ํƒ ๋ฐ ์ฝค๋ณด ์ƒ์ž๋„ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค.
  1. https://barista.dynatrace.com/components/filter-field๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค.
  2. ์ฒซ ๋ฒˆ์งธ ํ•„ํ„ฐ ํ•„๋“œ๋ฅผ ํด๋ฆญํ•˜์‹ญ์‹œ์˜ค.
  3. ์„ธ ๋ฒˆ์งธ ํ•ญ๋ชฉ ์œ„๋กœ ๋งˆ์šฐ์Šค๋ฅผ ๊ฐ€์ ธ๊ฐ‘๋‹ˆ๋‹ค. ์ฒซ ๋ฒˆ์งธ ํ•ญ๋ชฉ๋„ "์„ ํƒ๋จ"์œผ๋กœ ํ‘œ์‹œ๋˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ปจํ…์ŠคํŠธ(ํ™˜๊ฒฝ)

๋ฐœ๊ฒฌ ๋‚ ์งœ:
ํŒŒ์ด์–ดํญ์Šค ๋ฒ„์ „: 76.0.1
ํฌ๋กฌ ๋ฒ„์ „: 83.0.4103.61

์‚ฌ์šฉ๋œ ๋ฒ„์ „:

  • ๋…ธ๋“œ : >=10.13.0
  • ์›์‚ฌ : >=1.13.0 <2
  • ํƒ€์ดํ”„์Šคํฌ๋ฆฝํŠธ : 3.8.3
  • ๊ฐ๋„ : 9.1.0
  • @angular/cdk : 9.2.0
  • @dynatrace/barista-components : 6.5.2

์ฒจ๋ถ€ ํŒŒ์ผ

filter-field-bug

bug has-pr

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋™์˜ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฏธ ๋„ˆ๋ฌด ์˜ค๋ž˜ ์—ฐ๊ธฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์„ ํƒํ•œ ํ•ญ๋ชฉ์„ ํ‘œ์‹œํ•˜๋Š” ๋งค์šฐ ์ธ๊ธฐ ์žˆ๋Š” ๋ฐฉ๋ฒ•์€ ๊ตต์€ ๊ธ€๊ผด์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ๋” ์ด์ƒ ํ˜ธ๋ฒ„ ์ƒํƒœ(์ƒ‰ ๋ฐฐ๊ฒฝ)๋ฅผ ๋ฐฉํ•ดํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ™œ์„ฑ ์ƒํƒœ๋ฅผ ๊ตต์€ ๊ธ€๊ผด๋กœ ๋ณ€๊ฒฝํ•ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์‹ญ๋‹ˆ๊นŒ?

๋ชจ๋“  10 ๋Œ“๊ธ€

์•ˆ๋…•ํ•˜์„ธ์š” @schobocop์ž…๋‹ˆ๋‹ค ! ์ด๊ฒƒ์€ ์šฐ๋ฆฌ๊ฐ€ ์ด๋ฏธ ์˜ค๋žซ๋™์•ˆ ์ง๋ฉดํ•˜๊ณ  ์žˆ๋Š” ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. ์ž๋™ ์™„์„ฑ / ๋“œ๋กญ ๋‹ค์šด ์„ ํƒ ํ˜ธ๋ฒ„ ๋ฐ ํ™œ์„ฑ ์ƒํƒœ๊ฐ€ ์ •ํ™•ํžˆ ๋™์ผํ•˜๊ฒŒ ๋ณด์ž…๋‹ˆ๋‹ค.
์šฐ๋ฆฌ๋Š” ์ด๋ฏธ ๊ณผ๊ฑฐ์— @dynatrace-oss/ux-core์™€ ๊ธด ํ† ๋ก ์„ ํ–ˆ์ง€๋งŒ, ๋‚˜๋Š” ์šฐ๋ฆฌ๊ฐ€ ์ด๊ฒƒ์„ ๋‹ค์‹œ ๋ฐฉ๋ฌธํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ํ™•์‹ ํ•ฉ๋‹ˆ๋‹ค.
@dynatrace-oss/ux-core์— ๋Œ€ํ•œ ์ƒ๊ฐ์ด ์žˆ์Šต๋‹ˆ๊นŒ?

์šฐ๋ฆฌ๊ฐ€ ์ด๊ฒƒ์— ๋Œ€ํ•ด ๋ญ”๊ฐ€๋ฅผ ํ•  ๋•Œ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค :)

๋™์˜ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฏธ ๋„ˆ๋ฌด ์˜ค๋ž˜ ์—ฐ๊ธฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์„ ํƒํ•œ ํ•ญ๋ชฉ์„ ํ‘œ์‹œํ•˜๋Š” ๋งค์šฐ ์ธ๊ธฐ ์žˆ๋Š” ๋ฐฉ๋ฒ•์€ ๊ตต์€ ๊ธ€๊ผด์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ๋” ์ด์ƒ ํ˜ธ๋ฒ„ ์ƒํƒœ(์ƒ‰ ๋ฐฐ๊ฒฝ)๋ฅผ ๋ฐฉํ•ดํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ™œ์„ฑ ์ƒํƒœ๋ฅผ ๊ตต์€ ๊ธ€๊ผด๋กœ ๋ณ€๊ฒฝํ•ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์‹ญ๋‹ˆ๊นŒ?

ํ™œ์„ฑ ์ƒํƒœ๋ฅผ ๊ตต์€ ๊ธ€๊ผด๋กœ ๋ณ€๊ฒฝํ•ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์‹ญ๋‹ˆ๊นŒ?

@ursula-wieshofer ๋‹ต๋ณ€์ด ๋Šฆ์–ด ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ์„ ํƒํ•œ ๋ฐฐ๊ฒฝ์„ ์ œ๊ฑฐํ•˜๊ณ  ๊ตต์€ ๊ธ€๊ผด์„ ์ถ”๊ฐ€ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ, ์•„๋‹ˆ๋ฉด ๋ฐฐ๊ฒฝ์„ ๊ทธ๋Œ€๋กœ ๋‘๊ณ  ๊ตต์€ ๊ธ€๊ผด์„ ์ถ”๊ฐ€ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

@tomheller ํ˜ธ๋ฒ„ ์ƒํƒœ์— ๋Œ€ํ•œ ๋ฐฐ๊ฒฝ์„ ๋‚จ๊ฒจ๋‘๊ณ  ์„ ํƒํ•œ ํ•ญ๋ชฉ์— ๋Œ€ํ•ด ๋ฐฐ๊ฒฝ์„ ์ œ๊ฑฐํ•˜๊ณ  ๊ตต์€ ๊ธ€๊ผด์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.)

@ursula-wieshofer ์ข‹์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ์„ค์ •์ด ๋‚จ์Šต๋‹ˆ๋‹ค.

_selected_: ๋ฐฐ๊ฒฝ ์—†์Œ, ๊ธ€๊ผด ๊ตต๊ฒŒ
_hover_: ๋ฐฐ๊ฒฝ, ๊ธ€๊ผด ์ผ๋ฐ˜
_keyboardFocused_: ๋ฐฐ๊ฒฝ ?, ๊ธ€๊ผด ?

ํ˜ธ๋ฒ„์™€ ํ‚ค๋ณด๋“œ ํฌ์ปค์Šค๋ฅผ ๊ตฌ๋ถ„ํ•ด์•ผ ํ•ฉ๋‹ˆ๊นŒ ์•„๋‹ˆ๋ฉด ๋™์ผํ•˜๊ฒŒ ๋ณด์—ฌ์•ผ ํ•ฉ๋‹ˆ๊นŒ?
keyboardFocused ๋ฐ hovered๋Š” 2๊ฐœ์˜ ๋‹ค๋ฅธ ํ•ญ๋ชฉ์— ๋™์‹œ์— ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ง€๊ธˆ๊นŒ์ง€ ์šฐ๋ฆฌ๋Š” ํ˜ธ๋ฒ„์™€ ํ‚ค๋ณด๋“œ ํฌ์ปค์Šค๋ฅผ ๊ตฌ๋ถ„ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ์—ฌ๊ธฐ์„œ ํฐ ๋ฌธ์ œ๋ฅผ ๋ณธ ์ ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ™์€ ๋ชจ์–‘์„ ์ ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

๋งˆ์šฐ์Šค๋ฅผ ๊ฐ€์ ธ๊ฐ€๋Š” ํ•ญ๋ชฉ๊ณผ ์ฒซ ๋ฒˆ์งธ ํ•ญ๋ชฉ์— ์ƒ‰์ƒ์ด ์ง€์ •๋ฉ๋‹ˆ๋‹ค.

@schobocop ํ‚ค๋ณด๋“œ ์ง€์›์„ ์œ„ํ•œ ๊ฐ•์กฐ ํ‘œ์‹œ๋„ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ์ฒซ ๋ฒˆ์งธ ํ•ญ๋ชฉ์ด ์ด๋ฏธ ๊ฐ•์กฐ ํ‘œ์‹œ๋œ ์ด์œ ์ž…๋‹ˆ๋‹ค.
@ursula-wieshofer์™€์˜ ํ† ๋ก ์—์„œ ์–ธ๊ธ‰๋œ ๊ฒƒ์ฒ˜๋Ÿผ ์„ ํƒ๋จ๊ณผ ์ง‘์ค‘๋จ/ํ˜ธ๋ฒ„๋ง ์‚ฌ์ด์˜ ๊ตฌ๋ถ„์„ ์ถ”๊ฐ€ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ง€๊ธˆ๊นŒ์ง€ ์šฐ๋ฆฌ๋Š” ํ˜ธ๋ฒ„์™€ ํ‚ค๋ณด๋“œ ํฌ์ปค์Šค๋ฅผ ๊ตฌ๋ถ„ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ์—ฌ๊ธฐ์„œ ํฐ ๋ฌธ์ œ๋ฅผ ๋ณธ ์ ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ™์€ ๋ชจ์–‘์„ ์ ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

@ursula-wieshofer ํ‚ค๋ณด๋“œ ์„ ํƒ ์Šคํƒ€์ผ๊ณผ ํ˜ธ๋ฒ„๋ง ์Šคํƒ€์ผ์„ ๊ตฌ๋ถ„ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ํ˜„์žฌ ๋‘˜ ๋‹ค ๋™์ผํ•˜๊ฒŒ ๊ฐ•์กฐ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

image

์ฒซ ๋ฒˆ์งธ๋Š” ํ‚ค๋ณด๋“œ๋ฅผ ํ†ตํ•ด ์„ ํƒ๋˜๊ณ  ๋‘ ๋ฒˆ์งธ๋Š” ๋งˆ์šฐ์Šค ํ˜ธ๋ฒ„๋ฅผ ํ†ตํ•ด ์„ ํƒ๋ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ : ๋‹ซ๊ธฐ.
ํ‚ค๋ณด๋“œ ์„ ํƒ ์˜ต์…˜์— ๋ฐ‘์ค„์„ ๊ธ‹๋Š” ๊ฒƒ์ด ํŠธ๋ฆญ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ฒซ ๋ฒˆ์งธ๋Š” ํ‚ค๋ณด๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์„ ํƒ๋ฉ๋‹ˆ๋‹ค.
๋‘ ๋ฒˆ์งธ๋Š” ํ˜ธ๋ฒ„๋ง๋ฉ๋‹ˆ๋‹ค.

image

@ffriedl89 @tomheller @ursula-wieshofer ์–ด๋–ป๊ฒŒ ์ƒ๊ฐํ•˜์„ธ์š”?

์—…๋ฐ์ดํŠธ: Tom๊ณผ Fabian์˜ ๋„์›€์œผ๋กœ ์šฐ๋ฆฌ๋Š” ํ•˜๋‚˜์˜ ์˜ต์…˜๋งŒ ์„ ํƒํ•ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•„๋ƒˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ์˜ต์…˜์„ ๊ฐ€๋ฆฌํ‚ค๋ฉด ํ‚ค๋ณด๋“œ ์„ ํƒ์ด ํ•ด์ œ๋˜๊ณ  ๊ทธ ๋ฐ˜๋Œ€์˜ ๊ฒฝ์šฐ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰