-
Notifications
You must be signed in to change notification settings - Fork 347
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.
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
Icon: Add Compact Icons #3771
Merged
Merged
Icon: Add Compact Icons #3771
Changes from all commits
Commits
Show all changes
23 commits
Select commit
Hold shift + click to select a range
9c016f9
init add badge-icons
rlingineni f571744
update icon sizes
rlingineni 15bf7ac
move to internal icon
rlingineni 48cee47
Merge branch 'master' into ravi-badge-icons
rlingineni e67797e
update InternalIcon
rlingineni fa727c4
Update Icon.tsx
rlingineni 4043e6f
add internal icon
rlingineni 5dd2295
Merge branch 'master' into ravi-badge-icons
rlingineni fbf6627
use compact icons
rlingineni a0954fb
fix typos
rlingineni 89be95b
move to a compacticon component
rlingineni 7552205
fallback compact icon metadata
rlingineni 962655f
fallback icon metadata
rlingineni fcbd4a8
remove size prop on IconCompact
rlingineni 51f08d6
remove extra type
rlingineni 387863b
fix missing icons
rlingineni 2801413
fix internal icon
rlingineni 7e23097
fix prettier
rlingineni 7781b83
fix ts error
rlingineni 73e547f
Update compactIcon.tsx
rlingineni 6bf8061
Merge branch 'master' into ravi-badge-icons
rlingineni df48574
add compact icons
rlingineni 60b136e
fix tsc error
rlingineni File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import React, { useState } from 'react'; | ||
import { Flex, IconCompact, SelectList } from 'gestalt'; | ||
|
||
export default function Example() { | ||
const compactIconsList = IconCompact.icons; | ||
const [selectedValue, setSelectedValue] = useState<string | undefined>(compactIconsList[0]); | ||
|
||
return ( | ||
<Flex alignItems="center" height="100%" justifyContent="center" width="100%"> | ||
<Flex alignItems="center" direction="row" gap={4}> | ||
<SelectList | ||
id="select-list-example" | ||
onChange={({ value }) => { | ||
setSelectedValue(value); | ||
}} | ||
> | ||
{compactIconsList.map((value: string) => ( | ||
<SelectList.Option key={value} label={value} value={value} /> | ||
))} | ||
</SelectList> | ||
|
||
<IconCompact | ||
accessibilityLabel="Add a new item" | ||
color="default" | ||
icon={selectedValue as typeof compactIconsList[0]} | ||
/> | ||
</Flex> | ||
</Flex> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 18 additions & 0 deletions
18
packages/gestalt-icons-android/dist/classic/compact/index.d.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
declare const icons: Readonly<{ | ||
'compact-add': any; | ||
'compact-arrow-up-right': any; | ||
'compact-cancel': any; | ||
'compact-check': any; | ||
'compact-check-circle-fill': any; | ||
'compact-chevron-down': any; | ||
'compact-chevron-left': any; | ||
'compact-chevron-right': any; | ||
'compact-chevron-up': any; | ||
'compact-dash': any; | ||
'compact-lock': any; | ||
'compact-sparkle': any; | ||
'compact-workflow-status-problem': any; | ||
'compact-workflow-status-warning': any; | ||
'compact-info-circle-fill': any; | ||
}>; | ||
export default icons; |
17 changes: 17 additions & 0 deletions
17
packages/gestalt-icons-android/dist/vr-theme/compact/index.d.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
declare const icons: Readonly<{ | ||
'compact-add': any; | ||
'compact-arrow-up-right': any; | ||
'compact-cancel': any; | ||
'compact-check': any; | ||
'compact-check-circle-fill': any; | ||
'compact-chevron-down': any; | ||
'compact-chevron-left': any; | ||
'compact-chevron-right': any; | ||
'compact-chevron-up': any; | ||
'compact-dash': any; | ||
'compact-info-circle-fill': any; | ||
'compact-lock': any; | ||
'compact-workflow-status-problem': any; | ||
'compact-workflow-status-warning': any; | ||
}>; | ||
export default icons; |
10 changes: 10 additions & 0 deletions
10
packages/gestalt-icons-android/src/classic/compact/global.d.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
declare module '*.svg' { | ||
/** | ||
* Use `any` to avoid conflicts with | ||
* `@svgr/webpack` plugin or | ||
* `babel-plugin-inline-react-svg` plugin. | ||
*/ | ||
const content: any; | ||
|
||
export default content; | ||
} |
1 change: 1 addition & 0 deletions
1
packages/gestalt-icons-android/src/classic/compact/ic_compact-add_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
...gestalt-icons-android/src/classic/compact/ic_compact-arrow-up-right_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
packages/gestalt-icons-android/src/classic/compact/ic_compact-cancel_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
...talt-icons-android/src/classic/compact/ic_compact-check-circle-fill_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
packages/gestalt-icons-android/src/classic/compact/ic_compact-check_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
...s/gestalt-icons-android/src/classic/compact/ic_compact-chevron-down_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
...s/gestalt-icons-android/src/classic/compact/ic_compact-chevron-left_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
.../gestalt-icons-android/src/classic/compact/ic_compact-chevron-right_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
...ges/gestalt-icons-android/src/classic/compact/ic_compact-chevron-up_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
packages/gestalt-icons-android/src/classic/compact/ic_compact-dash_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
...stalt-icons-android/src/classic/compact/ic_compact-info-circle-fill_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
packages/gestalt-icons-android/src/classic/compact/ic_compact-lock_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
packages/gestalt-icons-android/src/classic/compact/ic_compact-sparkle_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
...cons-android/src/classic/compact/ic_compact-workflow-status-problem_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
...cons-android/src/classic/compact/ic_compact-workflow-status-warning_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 35 additions & 0 deletions
35
packages/gestalt-icons-android/src/classic/compact/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import compactAdd from './ic_compact-add_gestalt.svg'; | ||
import compactArrowUpRight from './ic_compact-arrow-up-right_gestalt.svg'; | ||
import compactCancel from './ic_compact-cancel_gestalt.svg'; | ||
import compactCheck from './ic_compact-check_gestalt.svg'; | ||
import compactCheckCircleFill from './ic_compact-check-circle-fill_gestalt.svg'; | ||
import compactChevronDown from './ic_compact-chevron-down_gestalt.svg'; | ||
import compactChevronLeft from './ic_compact-chevron-left_gestalt.svg'; | ||
import compactChevronRight from './ic_compact-chevron-right_gestalt.svg'; | ||
import compactChevronUp from './ic_compact-chevron-up_gestalt.svg'; | ||
import compactDash from './ic_compact-dash_gestalt.svg'; | ||
import compactInfoCircleFill from './ic_compact-info-circle-fill_gestalt.svg'; | ||
import compactLock from './ic_compact-lock_gestalt.svg'; | ||
import compactSparkle from './ic_compact-sparkle_gestalt.svg'; | ||
import compactWorkflowStatusProblem from './ic_compact-workflow-status-problem_gestalt.svg'; | ||
import compactWorkflowStatusWarning from './ic_compact-workflow-status-warning_gestalt.svg'; | ||
|
||
const icons = Object.freeze({ | ||
'compact-add': compactAdd, | ||
'compact-arrow-up-right': compactArrowUpRight, | ||
'compact-cancel': compactCancel, | ||
'compact-check': compactCheck, | ||
'compact-check-circle-fill': compactCheckCircleFill, | ||
'compact-chevron-down': compactChevronDown, | ||
'compact-chevron-left': compactChevronLeft, | ||
'compact-chevron-right': compactChevronRight, | ||
'compact-chevron-up': compactChevronUp, | ||
'compact-dash': compactDash, | ||
'compact-lock': compactLock, | ||
'compact-sparkle': compactSparkle, | ||
'compact-workflow-status-problem': compactWorkflowStatusProblem, | ||
'compact-workflow-status-warning': compactWorkflowStatusWarning, | ||
'compact-info-circle-fill': compactInfoCircleFill, | ||
}); | ||
|
||
export default icons; |
10 changes: 10 additions & 0 deletions
10
packages/gestalt-icons-android/src/vr-theme/compact/global.d.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
declare module '*.svg' { | ||
/** | ||
* Use `any` to avoid conflicts with | ||
* `@svgr/webpack` plugin or | ||
* `babel-plugin-inline-react-svg` plugin. | ||
*/ | ||
const content: any; | ||
|
||
export default content; | ||
} |
1 change: 1 addition & 0 deletions
1
packages/gestalt-icons-android/src/vr-theme/compact/ic_vr_compact-add_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
...alt-icons-android/src/vr-theme/compact/ic_vr_compact-arrow-up-right_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
...ges/gestalt-icons-android/src/vr-theme/compact/ic_vr_compact-cancel_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
...-icons-android/src/vr-theme/compact/ic_vr_compact-check-circle-fill_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
...ages/gestalt-icons-android/src/vr-theme/compact/ic_vr_compact-check_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
...stalt-icons-android/src/vr-theme/compact/ic_vr_compact-chevron-down_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
...stalt-icons-android/src/vr-theme/compact/ic_vr_compact-chevron-left_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
...talt-icons-android/src/vr-theme/compact/ic_vr_compact-chevron-right_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
...gestalt-icons-android/src/vr-theme/compact/ic_vr_compact-chevron-up_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
packages/gestalt-icons-android/src/vr-theme/compact/ic_vr_compact-dash_gestalt.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
...t-icons-android/src/vr-theme/compact/ic_vr_compact-info-circle-fill_gestalt.svg
Oops, something went wrong.
1 change: 1 addition & 0 deletions
1
packages/gestalt-icons-android/src/vr-theme/compact/ic_vr_compact-lock_gestalt.svg
Oops, something went wrong.
1 change: 1 addition & 0 deletions
1
...-android/src/vr-theme/compact/ic_vr_compact-workflow-status-problem_gestalt.svg
Oops, something went wrong.
1 change: 1 addition & 0 deletions
1
...-android/src/vr-theme/compact/ic_vr_compact-workflow-status-warning_gestalt.svg
Oops, something went wrong.
33 changes: 33 additions & 0 deletions
33
packages/gestalt-icons-android/src/vr-theme/compact/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
import compactAdd from './ic_vr_compact-add_gestalt.svg'; | ||
import compactArrowUpRight from './ic_vr_compact-arrow-up-right_gestalt.svg'; | ||
import compactCancel from './ic_vr_compact-cancel_gestalt.svg'; | ||
import compactCheck from './ic_vr_compact-check_gestalt.svg'; | ||
import compactCheckCircleFill from './ic_vr_compact-check-circle-fill_gestalt.svg'; | ||
import compactChevronDown from './ic_vr_compact-chevron-down_gestalt.svg'; | ||
import compactChevronLeft from './ic_vr_compact-chevron-left_gestalt.svg'; | ||
import compactChevronRight from './ic_vr_compact-chevron-right_gestalt.svg'; | ||
import compactChevronUp from './ic_vr_compact-chevron-up_gestalt.svg'; | ||
import compactDash from './ic_vr_compact-dash_gestalt.svg'; | ||
import compactInfoCircleFill from './ic_vr_compact-info-circle-fill_gestalt.svg'; | ||
import compactLock from './ic_vr_compact-lock_gestalt.svg'; | ||
import compactWorkflowStatusProblem from './ic_vr_compact-workflow-status-problem_gestalt.svg'; | ||
import compactWorkflowStatusWarning from './ic_vr_compact-workflow-status-warning_gestalt.svg'; | ||
|
||
const icons = Object.freeze({ | ||
'compact-add': compactAdd, | ||
'compact-arrow-up-right': compactArrowUpRight, | ||
'compact-cancel': compactCancel, | ||
'compact-check': compactCheck, | ||
'compact-check-circle-fill': compactCheckCircleFill, | ||
'compact-chevron-down': compactChevronDown, | ||
'compact-chevron-left': compactChevronLeft, | ||
'compact-chevron-right': compactChevronRight, | ||
'compact-chevron-up': compactChevronUp, | ||
'compact-dash': compactDash, | ||
'compact-info-circle-fill': compactInfoCircleFill, | ||
'compact-lock': compactLock, | ||
'compact-workflow-status-problem': compactWorkflowStatusProblem, | ||
'compact-workflow-status-warning': compactWorkflowStatusWarning, | ||
}); | ||
|
||
export default icons; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we do a follow up PR adding a single page for IconCompact?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes - I think we should. I wanted to wait since there's not too many right now. and it's a replica of
Icon