diff --git a/demo/angularjs/components/uploader/doc.md b/demo/angularjs/components/uploader/doc.md
index 2b8a29c2b..4b4d2f1c1 100644
--- a/demo/angularjs/components/uploader/doc.md
+++ b/demo/angularjs/components/uploader/doc.md
@@ -1,3 +1,9 @@
# Uploader
+## Default
+
+
+## Circle
+
+
diff --git a/demo/angularjs/components/uploader/partials/circle.html b/demo/angularjs/components/uploader/partials/circle.html
new file mode 100644
index 000000000..c5a92d657
--- /dev/null
+++ b/demo/angularjs/components/uploader/partials/circle.html
@@ -0,0 +1,8 @@
+
diff --git a/demo/angularjs/components/uploader/partials/default.html b/demo/angularjs/components/uploader/partials/default.html
index c5a92d657..0230e5f5b 100644
--- a/demo/angularjs/components/uploader/partials/default.html
+++ b/demo/angularjs/components/uploader/partials/default.html
@@ -1,8 +1,5 @@
diff --git a/src/components/uploader/angularjs/uploader_directive.js b/src/components/uploader/angularjs/uploader_directive.js
index 5e6e1f8df..bc3d0ef0b 100644
--- a/src/components/uploader/angularjs/uploader_directive.js
+++ b/src/components/uploader/angularjs/uploader_directive.js
@@ -26,6 +26,7 @@ function UploaderController() {
*/
const _DEFAULT_PROPS = {
aspectRatio: 'horizontal',
+ size: 'xl',
theme: 'light',
variant: 'squared',
};
@@ -42,31 +43,20 @@ function UploaderController() {
* @return {Array} The list of button classes.
*/
function getClasses() {
- const classes = [];
-
- if (angular.isDefined(lumx.aspectRatio) && lumx.aspectRatio) {
- classes.push(`${CSS_PREFIX}-uploader--aspect-ratio-${lumx.aspectRatio}`);
- } else {
- classes.push(`${CSS_PREFIX}-uploader--aspect-ratio-${_DEFAULT_PROPS.aspectRatio}`);
- }
-
- if (angular.isDefined(lumx.size) && lumx.size) {
- classes.push(`${CSS_PREFIX}-uploader--size-${lumx.size}`);
- }
-
- if (angular.isDefined(lumx.theme) && lumx.theme) {
- classes.push(`${CSS_PREFIX}-uploader--theme-${lumx.theme}`);
- } else {
- classes.push(`${CSS_PREFIX}-uploader--theme-${_DEFAULT_PROPS.theme}`);
- }
-
- if (angular.isDefined(lumx.variant) && lumx.variant) {
- classes.push(`${CSS_PREFIX}-uploader--variant-${lumx.variant}`);
- } else {
- classes.push(`${CSS_PREFIX}-uploader--variant-${_DEFAULT_PROPS.variant}`);
- }
-
- return classes;
+ const aspectRatio = lumx.aspectRatio ? lumx.aspectRatio : _DEFAULT_PROPS.aspectRatio;
+ const size = lumx.size ? lumx.size : _DEFAULT_PROPS.size;
+ const theme = lumx.theme ? lumx.theme : _DEFAULT_PROPS.theme;
+ const variant = lumx.variant ? lumx.variant : _DEFAULT_PROPS.variant;
+
+ // Adjust to square aspect ratio when using circle variants.
+ const adjustedAspectRatio = variant === 'circle' ? 'square' : aspectRatio;
+
+ return [
+ `${CSS_PREFIX}-uploader--aspect-ratio-${adjustedAspectRatio}`,
+ `${CSS_PREFIX}-uploader--size-${size}`,
+ `${CSS_PREFIX}-uploader--theme-${theme}`,
+ `${CSS_PREFIX}-uploader--variant-${variant}`,
+ ];
}
/////////////////////////////
diff --git a/src/components/uploader/react/Uploader.tsx b/src/components/uploader/react/Uploader.tsx
index 9c5fc3b31..2c19cf41c 100644
--- a/src/components/uploader/react/Uploader.tsx
+++ b/src/components/uploader/react/Uploader.tsx
@@ -99,7 +99,7 @@ const Uploader: React.FC = (props: UploaderProps): ReactElement =
...forwardedProps
} = props;
- // Square aspect ratio for circle variants.
+ // Adjust to square aspect ratio when using circle variants.
const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
return (